'use client';

import Link from 'next/link';
import { useCallback, useRef, useState } from 'react';
import { Camera, ImagePlus, Link2, Loader2, Type, X } from 'lucide-react';
import { cn, fmtMoney, fmtPct, fmtDate, confidenceLabel } from '@/lib/format';
import { Badge, Card, CardHeader, EmptyState, Stat } from '@/components/ui/primitives';

type Mode = 'photo' | 'url' | 'text';

interface Candidate {
  assetId: string;
  slug: string;
  title: string;
  categorySlug: string;
  heroImageUrl: string | null;
  year: number | null;
  setName: string | null;
  number: string | null;
  score: number;
  rivUsd: number | null;
  rivLowUsd: number | null;
  rivHighUsd: number | null;
  rivConfidence: number | null;
  rivSampleSize: number;
  latestSaleUsd: number | null;
  latestSaleAt: string | null;
  salesCount: number;
  activeListings: number;
  minAskUsd: number | null;
}
interface ScanResponse {
  sessionId: string;
  mode: Mode;
  guess: Record<string, unknown> & { confidence?: number; rationale?: string; warnings?: string[]; likelyGradeRange?: string | null; conditionNotes?: string | null } | null;
  guessConfidence: number | null;
  candidates: Candidate[];
  best: (Candidate & { context: { sales: Array<Record<string, unknown>>; listings: Array<Record<string, unknown>>; variants: Array<Record<string, unknown>> } }) | null;
  listing: { sourceId: string; sourceUrl: string; rawTitle: string; price: number | null; currency: string | null; grader: string | null; grade: string | null; imageUrls: string[]; discountToRiv: number | null; verdict: string } | null;
  model: string | null;
  usdEst: number;
  durationMs: number;
  notes: string[];
  quota: { used: number; limit: number };
  error?: string;
}

async function downscale(file: File, max = 1600, quality = 0.86): Promise<{ data: string; mediaType: 'image/jpeg'; thumb: string }> {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, max / Math.max(bitmap.width, bitmap.height));
  const w = Math.round(bitmap.width * scale);
  const h = Math.round(bitmap.height * scale);
  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(bitmap, 0, 0, w, h);
  const dataUrl = canvas.toDataURL('image/jpeg', quality);
  const tscale = Math.min(1, 240 / Math.max(w, h));
  const tc = document.createElement('canvas');
  tc.width = Math.round(w * tscale);
  tc.height = Math.round(h * tscale);
  tc.getContext('2d')!.drawImage(canvas, 0, 0, tc.width, tc.height);
  return { data: dataUrl.split(',')[1]!, mediaType: 'image/jpeg', thumb: tc.toDataURL('image/jpeg', 0.7) };
}

export function ScannerClient({ aiReady }: { aiReady: boolean }) {
  const [mode, setMode] = useState<Mode>('photo');
  const [images, setImages] = useState<Array<{ data: string; mediaType: 'image/jpeg'; thumb: string; name: string }>>([]);
  const [url, setUrl] = useState('');
  const [text, setText] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<ScanResponse | null>(null);
  const [chosen, setChosen] = useState<string | null>(null);
  const fileRef = useRef<HTMLInputElement>(null);
  const camRef = useRef<HTMLInputElement>(null);

  const addFiles = useCallback(async (files: FileList | null) => {
    if (!files) return;
    const next = [...images];
    for (const f of Array.from(files).slice(0, 5 - next.length)) {
      if (!f.type.startsWith('image/')) continue;
      const d = await downscale(f);
      next.push({ ...d, name: f.name });
    }
    setImages(next.slice(0, 5));
  }, [images]);

  async function submit() {
    setBusy(true);
    setError(null);
    setResult(null);
    setChosen(null);
    try {
      const res = await fetch('/api/scanner', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({
          mode,
          images: mode === 'photo' ? images.map((i) => ({ data: i.data, mediaType: i.mediaType })) : undefined,
          thumbnails: mode === 'photo' ? images.slice(0, 3).map((i) => i.thumb) : undefined,
          url: mode === 'url' ? url.trim() : undefined,
          text: mode === 'text' ? text.trim() : undefined,
        }),
      });
      const json = (await res.json()) as ScanResponse;
      if (!res.ok) throw new Error(json.error ?? `HTTP ${res.status}`);
      setResult(json);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  }

  async function choose(assetId: string | null) {
    if (!result) return;
    setChosen(assetId);
    await fetch(`/api/scanner/${result.sessionId}/choose`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ assetId }) }).catch(() => {});
  }

  const canSubmit = !busy && aiReady !== false && ((mode === 'photo' && images.length > 0) || (mode === 'url' && /^https?:\/\//.test(url.trim())) || (mode === 'text' && text.trim().length > 3));

  return (
    <div className="grid gap-6 lg:grid-cols-[minmax(0,420px)_1fr]">
      <Card className="self-start">
        <div className="flex border-b border-border">
          {(
            [
              ['photo', 'Photos', Camera],
              ['url', 'URL', Link2],
              ['text', 'Describe', Type],
            ] as const
          ).map(([m, label, Icon]) => (
            <button key={m} type="button" onClick={() => setMode(m)} className={cn('flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-[13px] font-medium', mode === m ? 'border-b-2 border-accent text-fg' : 'text-muted hover:text-fg')}>
              <Icon className="h-3.5 w-3.5" /> {label}
            </button>
          ))}
        </div>
        <div className="space-y-3 p-4">
          {!aiReady ? <p className="rounded-md bg-alert-bg px-3 py-2 text-xs text-alert">AI provider not configured on this server. URL parsing still works; identification is disabled.</p> : null}
          {mode === 'photo' ? (
            <>
              <div
                className="flex min-h-[160px] flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border-strong bg-sunken p-4 text-center"
                onDragOver={(e) => e.preventDefault()}
                onDrop={(e) => {
                  e.preventDefault();
                  void addFiles(e.dataTransfer.files);
                }}
              >
                <button type="button" className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-accent px-4 text-sm font-semibold text-accent-fg active:opacity-90 md:hidden" onClick={() => camRef.current?.click()}>
                  <Camera className="h-5 w-5" /> Take a photo
                </button>
                <p className="text-xs text-muted"><span className="hidden md:inline">Drop up to 5 photos here: </span><span className="md:hidden">Up to 5 photos: </span>front, back, label, seal, serial.</p>
                <button type="button" className="inline-flex h-10 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-xs font-medium hover:bg-inset md:h-9" onClick={() => fileRef.current?.click()}>
                  <ImagePlus className="h-3.5 w-3.5" /> Upload from library
                </button>
                <input ref={fileRef} type="file" accept="image/*" multiple hidden onChange={(e) => void addFiles(e.target.files)} />
                <input ref={camRef} type="file" accept="image/*" capture="environment" hidden onChange={(e) => void addFiles(e.target.files)} />
              </div>
              {images.length ? (
                <ul className="grid grid-cols-5 gap-2">
                  {images.map((img, i) => (
                    <li key={i} className="relative aspect-square overflow-hidden rounded-sm border border-border bg-inset">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={img.thumb} alt={img.name} className="h-full w-full object-cover" />
                      <button type="button" aria-label="Remove" className="absolute right-0.5 top-0.5 rounded-sm bg-black/60 p-0.5 text-white" onClick={() => setImages(images.filter((_, j) => j !== i))}>
                        <X className="h-3 w-3" />
                      </button>
                    </li>
                  ))}
                </ul>
              ) : null}
            </>
          ) : mode === 'url' ? (
            <label className="block text-xs text-muted">
              Marketplace or auction URL
              <input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://…" className="mt-1 w-full rounded-md border border-border bg-sunken px-3 py-2 text-sm text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none" />
              <span className="mt-1 block text-[11px] text-subtle">Supported sources are those with a lookup-capable connector; others fall back to text identification.</span>
            </label>
          ) : (
            <label className="block text-xs text-muted">
              Describe the item
              <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} placeholder="e.g. 1999 Pokémon Base Set Charizard holo, 1st edition stamp, PSA 9 slab #12345678" className="mt-1 w-full rounded-md border border-border bg-sunken px-3 py-2 text-sm text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none" />
            </label>
          )}
          <button type="button" disabled={!canSubmit} onClick={() => void submit()} className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-accent px-3 text-sm font-semibold text-accent-fg disabled:opacity-50">
            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : null} {busy ? 'Identifying…' : 'Identify & price'}
          </button>
          {error ? <p className="rounded-md bg-loss-bg px-3 py-2 text-xs text-loss">{error}</p> : null}
          <p className="text-[11px] leading-relaxed text-subtle">Photos are downscaled in your browser before upload and are not stored; small thumbnails are kept for quality review. Valuations are estimates, not offers, appraisals or authentication.</p>
        </div>
      </Card>

      <div className="min-w-0 space-y-4">
        {!result && !busy ? <EmptyState title="Results appear here" description="Identification, the closest catalog matches, RareIndex Valuation, comparable sales and live listings." /> : null}
        {busy ? (
          <Card className="p-6">
            <div className="flex items-center gap-3 text-sm text-muted">
              <Loader2 className="h-4 w-4 animate-spin" /> Analysing{mode === 'photo' ? ' photos' : mode === 'url' ? ' the listing' : ' the description'} and searching the catalog…
            </div>
          </Card>
        ) : null}
        {result ? <ScanResults r={result} chosen={chosen} onChoose={choose} /> : null}
      </div>
    </div>
  );
}

function ScanResults({ r, chosen, onChoose }: { r: ScanResponse; chosen: string | null; onChoose: (id: string | null) => void }) {
  const g = r.guess;
  const best = r.best;
  return (
    <>
      {g ? (
        <Card>
          <CardHeader
            title="Identification"
            subtitle={r.model ? `Model ${r.model} · ${(r.durationMs / 1000).toFixed(1)} s` : undefined}
            action={<Badge tone={(g.confidence ?? 0) >= 0.75 ? 'gain' : (g.confidence ?? 0) >= 0.5 ? 'alert' : 'loss'}>Confidence {confidenceLabel(g.confidence)} · {Math.round((g.confidence ?? 0) * 100)}%</Badge>}
          />
          <div className="grid gap-x-6 gap-y-2 p-4 text-sm sm:grid-cols-2">
            {(
              [
                ['Category', g.categorySlug],
                ['Name', g.name],
                ['Brand / franchise', [g.brand, g.franchise].filter(Boolean).join(' · ')],
                ['Set', g.set],
                ['Number / reference', g.number],
                ['Year', g.year],
                ['Variant', g.variant],
                ['Language', g.language],
                ['Grade', g.grader ? `${String(g.grader).toUpperCase()} ${g.grade ?? ''}`.trim() : null],
                ['Certification #', g.certificationNumber],
                ['Likely grade range', g.likelyGradeRange],
                ['Condition notes', g.conditionNotes],
              ] as Array<[string, unknown]>
            ).map(([k, v]) => (
              <div key={k} className="flex justify-between gap-3 border-b border-border py-1 last:border-0">
                <span className="text-xs text-subtle">{k}</span>
                <span className="text-right">{v === null || v === undefined || v === '' ? <span className="text-subtle">—</span> : String(v)}</span>
              </div>
            ))}
          </div>
          {g.rationale ? <p className="border-t border-border px-4 py-3 text-xs text-muted">{g.rationale}</p> : null}
          {g.warnings?.length ? (
            <ul className="border-t border-border px-4 py-3 text-xs text-alert">
              {g.warnings.map((w) => (
                <li key={w}>⚠ {w}</li>
              ))}
            </ul>
          ) : null}
        </Card>
      ) : null}

      {r.listing ? (
        <Card>
          <CardHeader title="Parsed listing" subtitle={r.listing.sourceId} action={<a href={r.listing.sourceUrl} target="_blank" rel="noreferrer noopener" className="text-muted hover:text-fg">Open source ↗</a>} />
          <div className="grid gap-4 p-4 sm:grid-cols-3">
            <Stat label="Asking price" value={r.listing.price !== null ? fmtMoney(r.listing.price, r.listing.currency ?? 'USD') : '—'} sub={r.listing.rawTitle} />
            <Stat label="vs RareIndex Valuation" value={r.listing.verdict === 'anomaly' ? <span className="rounded-sm bg-alert-bg px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-alert">Data/identity anomaly</span> : r.listing.discountToRiv !== null ? <span className={r.listing.discountToRiv <= -0.1 ? 'text-gain' : r.listing.discountToRiv >= 0.1 ? 'text-loss' : 'text-flat'}>{fmtPct(r.listing.discountToRiv, 1)}</span> : '—'} sub={{ below_fair_value: 'Below fair value range', in_range: 'Within fair value range', above_fair_value: 'Above fair value range', anomaly: 'Implausible against the valuation — review the variant, lot, currency and identity', unknown: 'No valuation to compare' }[r.listing.verdict] ?? 'No valuation to compare'} />
            <Stat label="Grade on listing" value={r.listing.grader ? `${r.listing.grader.toUpperCase()} ${r.listing.grade ?? ''}` : 'Raw / unknown'} />
          </div>
        </Card>
      ) : null}

      {best ? (
        <Card>
          <CardHeader title="Best match" subtitle={`Match score ${Math.round(best.score * 100)}%`} action={<Link href={`/asset/${best.slug}`} className="font-medium text-fg hover:underline">Open asset →</Link>} />
          <div className="flex gap-4 p-4">
            {best.heroImageUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={best.heroImageUrl} alt="" className="h-28 w-20 shrink-0 rounded-sm object-cover" />
            ) : null}
            <div className="min-w-0 flex-1">
              <p className="text-sm font-semibold">{best.title}</p>
              <p className="text-xs text-muted">{[best.setName, best.number, best.year].filter(Boolean).join(' · ')}</p>
              <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
                <Stat label="RareIndex Valuation" value={best.rivUsd ? fmtMoney(best.rivUsd) : '—'} sub={best.rivUsd ? `${fmtMoney(best.rivLowUsd)} – ${fmtMoney(best.rivHighUsd)} · ${confidenceLabel(best.rivConfidence)} · ${best.rivSampleSize} sales` : 'Insufficient evidence'} />
                <Stat label="Latest sale" value={best.latestSaleUsd ? fmtMoney(best.latestSaleUsd) : '—'} sub={best.latestSaleAt ? fmtDate(best.latestSaleAt) : undefined} />
                <Stat label="Sales tracked" value={best.salesCount} />
                <Stat label="Active listings" value={best.activeListings} sub={best.minAskUsd ? `from ${fmtMoney(best.minAskUsd)}` : undefined} />
              </div>
            </div>
          </div>
          {best.context.sales.length ? (
            <div className="border-t border-border">
              <p className="px-4 pt-3 text-[11px] font-semibold uppercase tracking-wider text-subtle">Recent comparable sales</p>
              <ul className="divide-y divide-border px-4 pb-2 text-xs">
                {best.context.sales.map((s) => (
                  <li key={String(s.id)} className="flex items-center justify-between gap-3 py-1.5">
                    <span className="truncate text-muted">{fmtDate(String(s.saleDate))} · {String(s.sourceId)} {s.grader ? `· ${String(s.grader).toUpperCase()} ${String(s.grade ?? '')}` : ''}</span>
                    <a href={String(s.sourceUrl)} target="_blank" rel="noreferrer noopener" className="num font-medium hover:underline">{fmtMoney(Number(s.priceUsd))}</a>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}
          {best.context.listings.length ? (
            <div className="border-t border-border">
              <p className="px-4 pt-3 text-[11px] font-semibold uppercase tracking-wider text-subtle">Live listings (asks, not sales)</p>
              <ul className="divide-y divide-border px-4 pb-2 text-xs">
                {best.context.listings.map((l) => (
                  <li key={String(l.id)} className="flex items-center justify-between gap-3 py-1.5">
                    <span className="truncate text-muted">{String(l.sourceId)} · {String(l.rawTitle)}</span>
                    <a href={String(l.sourceUrl)} target="_blank" rel="noreferrer noopener" className="num font-medium hover:underline">{fmtMoney(Number(l.priceUsd))}</a>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}
          <div className="flex items-center justify-between border-t border-border px-4 py-2 text-xs">
            <span className="text-subtle">Is this the right item?</span>
            <div className="flex gap-2">
              <button type="button" onClick={() => onChoose(best.assetId)} className={cn('rounded-md border px-2 py-1', chosen === best.assetId ? 'border-gain bg-gain-bg text-gain' : 'border-border hover:bg-inset')}>Yes</button>
              <button type="button" onClick={() => onChoose(null)} className={cn('rounded-md border px-2 py-1', chosen === null && chosen !== undefined && r.candidates.length ? 'border-border hover:bg-inset' : 'border-border hover:bg-inset')}>Not this</button>
            </div>
          </div>
        </Card>
      ) : null}

      {r.candidates.length > (best ? 1 : 0) ? (
        <Card>
          <CardHeader title="Other candidates" subtitle="Pick the correct one to improve future identifications" />
          <ul className="divide-y divide-border">
            {r.candidates.filter((c) => c.assetId !== best?.assetId).map((c) => (
              <li key={c.assetId} className="flex items-center gap-3 px-4 py-2 text-sm">
                <Link href={`/asset/${c.slug}`} className="min-w-0 flex-1 truncate hover:underline">{c.title}</Link>
                <span className="num text-xs text-muted">{c.rivUsd ? fmtMoney(c.rivUsd) : '—'}</span>
                <span className="num text-xs text-subtle">{Math.round(c.score * 100)}%</span>
                <button type="button" onClick={() => onChoose(c.assetId)} className={cn('rounded-md border px-2 py-0.5 text-xs', chosen === c.assetId ? 'border-gain bg-gain-bg text-gain' : 'border-border hover:bg-inset')}>This one</button>
              </li>
            ))}
          </ul>
        </Card>
      ) : null}

      <ul className="space-y-1 text-[11px] leading-relaxed text-subtle">
        {r.notes.map((n) => (
          <li key={n}>· {n}</li>
        ))}
        <li>· Scans today: {r.quota.used}/{r.quota.limit}.</li>
      </ul>
    </>
  );
}