import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { listTargets } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { deleteTargetAction } from '@/lib/account/actions';
import { PageHeader, btnDanger } from '@/components/account/page-header';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { Progress } from '@/components/account/charts';
import { fmtRelative } from '@/lib/format';
import { TargetForm } from './target-form';

export const metadata: Metadata = { title: 'Price targets', robots: { index: false } };

export default async function TargetsPage() {
  const u = await requireUser('/targets');
  const d = await getDisplay();
  const rows = await listTargets(u.id);
  return (
    <>
      <PageHeader title="Price targets" description="Set a RIV level you are waiting for — to buy below or to sell above — and watch progress. You are notified once when it is reached." />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
        <Card>
          <CardHeader title={`Targets · ${rows.length}`} />
          {rows.length === 0 ? (
            <EmptyState title="No targets yet" description="Add one on the right. Progress is measured from the RIV at the time you set the target." />
          ) : (
            <Table>
              <thead>
                <tr>
                  <th className={th}>Asset</th>
                  <th className={th}>Direction</th>
                  <th className={`${th} text-right`}>Baseline</th>
                  <th className={`${th} text-right`}>Now</th>
                  <th className={`${th} text-right`}>Target</th>
                  <th className={`${th} w-[160px]`}>Progress</th>
                  <th className={th}>Status</th>
                  <th className={th}></th>
                </tr>
              </thead>
              <tbody>
                {rows.map(({ target: t, asset, stats }) => {
                  const now = stats?.rivUsd ?? null;
                  const base = t.baselineUsd ?? now;
                  let progress = 0;
                  if (now !== null && base !== null && base !== t.targetUsd) progress = (now - base) / (t.targetUsd - base);
                  const hit = t.hitAt !== null || (now !== null && (t.direction === 'above' ? now >= t.targetUsd : now <= t.targetUsd));
                  return (
                    <tr key={t.id}>
                      <td className={td}>
                        <div className="max-w-[240px]">
                          <Link href={`/asset/${asset.slug}`} className="block truncate font-medium hover:underline">
                            {asset.title}
                          </Link>
                          <p className="text-[11px] text-subtle">
                            set {fmtRelative(t.createdAt)}
                            {t.note ? ` · ${t.note}` : ''}
                          </p>
                        </div>
                      </td>
                      <td className={td}>
                        <Badge tone={t.direction === 'above' ? 'gain' : 'index'}>{t.direction === 'above' ? 'sell above' : 'buy below'}</Badge>
                      </td>
                      <td className={tdNum}>{t.baselineUsd ? d.money(t.baselineUsd) : '—'}</td>
                      <td className={tdNum}>{now ? d.money(now) : <span className="text-subtle">—</span>}</td>
                      <td className={tdNum}>{d.money(t.targetUsd)}</td>
                      <td className={td}>
                        <Progress value={hit ? 1 : progress} />
                      </td>
                      <td className={td}>{hit ? <Badge tone="gain">reached</Badge> : now === null ? <Badge tone="neutral">no RIV yet</Badge> : <span className="text-xs text-muted">{Math.round(Math.max(0, Math.min(1, progress)) * 100)}%</span>}</td>
                      <td className={td}>
                        <form action={deleteTargetAction}>
                          <input type="hidden" name="id" value={t.id} />
                          <button className={btnDanger}>Remove</button>
                        </form>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
          )}
        </Card>
        <Card>
          <CardHeader title="New target" />
          <div className="p-4">
            <TargetForm />
          </div>
        </Card>
      </div>
    </>
  );
}