'use client';
import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Chip } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Note } from '@/components/ui/section';
import { clientIntel } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { fmtAgo, fmtInt, fmtTokens, fmtUsdPerM, hostOf, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CostContextPayload, CostPayload } from '@/lib/types';
import { CTRL_LG, Field, Methodology } from './bits';
import { ModelPicker } from './model-picker';

/*
  Cost calculator (client, same-origin API only). Two tabs:
  - Workload: `/cost?model=&provider=&input_tokens=&output_tokens=&requests_per_day=&cached_share=&batch=` → per request / daily /
    monthly / annual for EVERY current deployment side by side. The cheapest column is bold — that is a fact about this workload,
    not a verdict about the model.
  - Context cost: `/cost/context?tokens=` → "how much does a fully populated N-token context cost?" for every offer whose context ≥ N.
  All inputs live in the URL (shareable); every number and the methodology come from the API.
*/
const PRESETS_CTX = [
  { value: 128_000, label: '128K' },
  { value: 200_000, label: '200K' },
  { value: 1_000_000, label: '1M' },
  { value: 2_000_000, label: '2M' },
];
const fmtMoney = (v: unknown, digits?: number) => {
  const n = num(v);
  if (n === null) return '—';
  if (digits !== undefined) return `$${n.toFixed(digits)}`;
  if (n === 0) return '$0';
  if (n < 0.001) return `$${n.toFixed(6).replace(/0+$/, '')}`;
  if (n < 1) return `$${n.toFixed(4).replace(/0+$/, '').replace(/\.$/, '')}`;
  if (n < 1000) return `$${n.toFixed(2)}`;
  return `$${new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(n)}`;
};

type State = { model: string; modelName: string; provider: string; input_tokens: string; output_tokens: string; requests_per_day: string; cached: string; batch: boolean; tab: 'workload' | 'context'; tokens: string };

function read(sp: URLSearchParams): State {
  return {
    model: sp.get('model') ?? '',
    modelName: sp.get('name') ?? '',
    provider: sp.get('provider') ?? '',
    input_tokens: sp.get('input_tokens') ?? '1000',
    output_tokens: sp.get('output_tokens') ?? '500',
    requests_per_day: sp.get('requests_per_day') ?? '1000',
    cached: sp.get('cached') ?? '0',
    batch: sp.get('batch') === '1',
    tab: sp.get('tab') === 'context' ? 'context' : 'workload',
    tokens: sp.get('tokens') ?? '1000000',
  };
}

export function Calculator() {
  const sp = useSearchParams();
  const pathname = usePathname();
  const [s, setS] = useState<State>(() => read(new URLSearchParams(sp.toString())));
  const [cost, setCost] = useState<CostPayload | null>(null);
  const [ctx, setCtx] = useState<CostContextPayload | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // URL ← state (debounced, replace)
  useEffect(() => {
    const t = setTimeout(() => {
      const p = new URLSearchParams();
      if (s.model) p.set('model', s.model);
      if (s.modelName && s.modelName !== s.model) p.set('name', s.modelName);
      if (s.provider) p.set('provider', s.provider);
      if (s.input_tokens !== '1000') p.set('input_tokens', s.input_tokens);
      if (s.output_tokens !== '500') p.set('output_tokens', s.output_tokens);
      if (s.requests_per_day !== '1000') p.set('requests_per_day', s.requests_per_day);
      if (s.cached !== '0') p.set('cached', s.cached);
      if (s.batch) p.set('batch', '1');
      if (s.tab === 'context') p.set('tab', 'context');
      if (s.tokens !== '1000000') p.set('tokens', s.tokens);
      const q = p.toString();
      const next = q ? `${pathname}?${q}` : pathname;
      const current = `${window.location.pathname}${window.location.search}`;
      // replaceState (not router.replace): the URL mirrors the inputs without a server round trip on every keystroke
      if (next !== current) window.history.replaceState(null, '', next);
    }, 250);
    return () => clearTimeout(t);
  }, [s, pathname]);

  const costQs = useMemo(() => {
    if (!s.model) return null;
    const p = new URLSearchParams({ model: s.model });
    if (s.provider) p.set('provider', s.provider);
    p.set('input_tokens', String(Math.max(0, Math.round(num(s.input_tokens) ?? 0))));
    p.set('output_tokens', String(Math.max(0, Math.round(num(s.output_tokens) ?? 0))));
    p.set('requests_per_day', String(Math.max(0, num(s.requests_per_day) ?? 0)));
    p.set('cached_share', String(Math.min(1, Math.max(0, (num(s.cached) ?? 0) / 100))));
    p.set('batch', s.batch ? '1' : '0');
    return p.toString();
  }, [s.model, s.provider, s.input_tokens, s.output_tokens, s.requests_per_day, s.cached, s.batch]);

  useEffect(() => {
    if (s.tab !== 'workload' || !costQs) return;
    const ctrl = new AbortController();
    setBusy(true);
    setError(null);
    const t = setTimeout(() => {
      clientIntel
        .cost(costQs, ctrl.signal)
        .then((r) => {
          setCost(r);
          setBusy(false);
        })
        .catch((e) => {
          if (ctrl.signal.aborted) return;
          setError(e instanceof Error ? e.message : 'unavailable');
          setBusy(false);
        });
    }, 200);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [costQs, s.tab]);

  const ctxQs = useMemo(() => {
    const t = Math.max(1, Math.round(num(s.tokens) ?? 0));
    const p = new URLSearchParams({ tokens: String(t), limit: '60' });
    if (s.model) p.set('model', s.model);
    return p.toString();
  }, [s.tokens, s.model]);
  useEffect(() => {
    if (s.tab !== 'context') return;
    const ctrl = new AbortController();
    setBusy(true);
    setError(null);
    const t = setTimeout(() => {
      clientIntel
        .costContext(ctxQs, ctrl.signal)
        .then((r) => {
          setCtx(r);
          setBusy(false);
        })
        .catch((e) => {
          if (ctrl.signal.aborted) return;
          setError(e instanceof Error ? e.message : 'unavailable');
          setBusy(false);
        });
    }, 200);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [ctxQs, s.tab]);

  const set = useCallback(<K extends keyof State>(k: K, v: State[K]) => setS((p) => ({ ...p, [k]: v })), []);
  const providers = useMemo(() => {
    const m = new Map<string, string>();
    for (const it of cost?.items ?? []) m.set(it.deployment.provider.slug, it.deployment.provider.name);
    return [...m.entries()];
  }, [cost]);
  const cheapest = useMemo(() => {
    const vals = (cost?.items ?? []).map((it) => num(it.cost.monthly)).filter((v): v is number => v !== null);
    return vals.length ? Math.min(...vals) : null;
  }, [cost]);

  const tabBtn = (id: State['tab'], label: string) => (
    <button type="button" role="tab" aria-selected={s.tab === id} onClick={() => set('tab', id)} className={cn('-mb-px flex h-11 items-center border-b-2 px-3 text-sm whitespace-nowrap', s.tab === id ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink')} data-calc-tab={id}>
      {label}
    </button>
  );

  return (
    <div data-calculator>
      <div role="tablist" aria-label="Calculator mode" className="no-scrollbar -mx-4 flex overflow-x-auto border-b border-rule px-4 md:mx-0 md:px-0">
        {tabBtn('workload', 'Workload cost')}
        {tabBtn('context', 'Context cost')}
      </div>

      {/* --------------------------------------------------------------------------------------------------- inputs */}
      <div className="grid gap-4 py-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]">
        <Field label="Model" className="lg:col-span-2" hint={s.model ? <span className="mono">{s.model}</span> : 'Any canonical model; suggestions from the atlas.'}>
          <ModelPicker value={s.model} label={s.modelName || null} onSelect={(slug, name) => setS((p) => ({ ...p, model: slug, modelName: name, provider: '' }))} />
        </Field>
        {s.tab === 'workload' ? (
          <>
            <Field label="Provider (optional)">
              <select value={s.provider} onChange={(e) => set('provider', e.target.value)} className={CTRL_LG} disabled={!providers.length && !s.provider}>
                <option value="">All providers</option>
                {providers.map(([slug, name]) => (
                  <option key={slug} value={slug}>
                    {name}
                  </option>
                ))}
                {s.provider && !providers.some(([slug]) => slug === s.provider) && <option value={s.provider}>{s.provider}</option>}
              </select>
            </Field>
            <Field label="Requests / day">
              <input inputMode="numeric" value={s.requests_per_day} onChange={(e) => set('requests_per_day', e.target.value.replace(/[^\d.]/g, ''))} className={CTRL_LG} />
            </Field>
            <Field label="Input tokens / request">
              <input inputMode="numeric" value={s.input_tokens} onChange={(e) => set('input_tokens', e.target.value.replace(/[^\d]/g, ''))} className={CTRL_LG} />
            </Field>
            <Field label="Output tokens / request">
              <input inputMode="numeric" value={s.output_tokens} onChange={(e) => set('output_tokens', e.target.value.replace(/[^\d]/g, ''))} className={CTRL_LG} />
            </Field>
            <Field label="Cached input share" hint="Share of input tokens served from a prompt cache (used only when the provider publishes a cached price).">
              <span className="flex items-center gap-3">
                <input type="range" min={0} max={100} step={5} value={s.cached} onChange={(e) => set('cached', e.target.value)} className="h-11 w-full accent-[var(--accent)]" aria-label="Cached input share (%)" />
                <span className="tnum w-12 shrink-0 text-right text-sm text-ink">{s.cached}%</span>
              </span>
            </Field>
            <Field label="Batch API">
              <span className="flex h-11 items-center">
                <label className="inline-flex min-h-11 cursor-pointer items-center gap-2 text-sm text-ink-2">
                  <input type="checkbox" checked={s.batch} onChange={(e) => set('batch', e.target.checked)} className="size-4 accent-[var(--accent)]" /> Use batch prices when published
                </label>
              </span>
            </Field>
          </>
        ) : (
          <Field label="Context to fill (tokens)" className="lg:col-span-2" hint="How much does one fully populated context cost, at the input price? Presets or any number.">
            <span className="flex flex-wrap items-center gap-1.5">
              {PRESETS_CTX.map((p) => (
                <button key={p.value} type="button" onClick={() => set('tokens', String(p.value))} aria-pressed={num(s.tokens) === p.value} className={cn('h-11 border px-3 text-sm font-medium', num(s.tokens) === p.value ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
                  {p.label}
                </button>
              ))}
              <input inputMode="numeric" value={s.tokens} onChange={(e) => set('tokens', e.target.value.replace(/[^\d]/g, ''))} className={cn(CTRL_LG, 'w-40 flex-none')} aria-label="Custom token count" />
            </span>
          </Field>
        )}
      </div>

      {/* --------------------------------------------------------------------------------------------------- results */}
      {s.tab === 'workload' ? (
        !s.model ? (
          <p className="border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3">Pick a model to price this workload across every provider that currently serves it.</p>
        ) : error ? (
          <p className="border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3">Cost unavailable ({error}). The slug must be a canonical model — try the suggestions.</p>
        ) : !cost ? (
          <p className="py-8 text-center text-sm text-ink-3" aria-busy="true">
            Computing…
          </p>
        ) : (
          <div aria-busy={busy}>
            <p className="tnum mb-3 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-ink-2">
              {cost.model && <EntityLink e={cost.model} className="text-[15px] font-medium" />}
              <span>
                {fmtInt(cost.inputs.input_tokens)} in + {fmtInt(cost.inputs.output_tokens)} out tokens × {fmtInt(cost.inputs.requests_per_day)} req/day · cached {Math.round((num(cost.inputs.cached_share) ?? 0) * 100)}% · batch {cost.inputs.batch ? 'on' : 'off'}
              </span>
              <span className="text-ink-3">{fmtInt(cost.total)} current deployment{cost.total === 1 ? '' : 's'}</span>
            </p>
            <DataTable scroll compact>
              <thead>
                <tr>
                  <Th>Provider</Th>
                  <Th num>Eff. input / 1M</Th>
                  <Th num>Eff. output / 1M</Th>
                  <Th num>Per request</Th>
                  <Th num>Daily</Th>
                  <Th num>Monthly</Th>
                  <Th num>Annual</Th>
                  <Th>Price rows used</Th>
                  <Th>Source</Th>
                </tr>
              </thead>
              <tbody>
                {cost.items.length === 0 && <EmptyRow cols={9}>No current deployment for this model{s.provider ? ' at this provider' : ''}. Without a published price there is nothing to compute.</EmptyRow>}
                {cost.items.map((it) => {
                  const d = it.deployment;
                  const c = it.cost;
                  const best = cheapest !== null && num(c.monthly) === cheapest && cost.items.length > 1;
                  return (
                    <tr key={d.id} className={best ? 'bg-accent-2-soft/40' : undefined} data-cost-row>
                      <Td primary>
                        <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                          <EntityLink e={d.provider} />
                          {best && <Chip tone="accent">cheapest here</Chip>}
                          {d.status !== 'active' && <Chip>{d.status}</Chip>}
                        </span>
                        {d.provider_model_id && <span className="mono block text-[11px] text-ink-3">{d.provider_model_id}</span>}
                        {c.notes.length > 0 && (
                          <ul className="mt-0.5 space-y-0.5 text-[11px] text-ink-3">
                            {c.notes.map((n) => (
                              <li key={n}>{n}</li>
                            ))}
                          </ul>
                        )}
                      </Td>
                      <Td num label="Eff. input" className="tnum text-accent-2">{fmtUsdPerM(c.effective_input_per_mtok)}</Td>
                      <Td num label="Eff. output" className="tnum text-accent-2">{fmtUsdPerM(c.effective_output_per_mtok)}</Td>
                      <Td num label="Per request" className="tnum">{fmtMoney(c.per_request)}</Td>
                      <Td num label="Daily" className="tnum">{fmtMoney(c.daily)}</Td>
                      <Td num label="Monthly" className={cn('tnum', best && 'font-semibold text-accent-2')}>{fmtMoney(c.monthly)}</Td>
                      <Td num label="Annual" className="tnum">{fmtMoney(c.annual)}</Td>
                      <Td label="Price rows used" className="tnum text-xs text-ink-2">
                        in {fmtUsdPerM(d.prices.input)} · out {fmtUsdPerM(d.prices.output)}
                        {num(d.prices.cached_input) !== null && <> · cached {fmtUsdPerM(d.prices.cached_input)}</>}
                        {num(d.prices.batch_input) !== null && <> · batch in {fmtUsdPerM(d.prices.batch_input)}</>}
                        {num(d.prices.batch_output) !== null && <> · batch out {fmtUsdPerM(d.prices.batch_output)}</>}
                        {num(d.prices.per_request) !== null && <> · fee {fmtMoney(d.prices.per_request)}/req</>}
                        {num(d.context_length) !== null && <span className="block text-ink-3">context {fmtTokens(d.context_length)} · observed {fmtAgo(d.observed_at)}</span>}
                      </Td>
                      <Td label="Source">
                        {d.source_url ? (
                          <a href={d.source_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs text-ink-2 hover:text-accent">
                            {hostOf(d.source_url) ?? 'source'} <span className="mono">T{d.tier}</span> <ExternalLink className="size-3" aria-hidden />
                          </a>
                        ) : (
                          <span className="text-xs text-ink-3">—</span>
                        )}
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable>
            <Note className="mt-3">
              Bold = lowest monthly cost <em>for this workload</em> among the deployments listed — not a verdict about the model or the provider. Prices are the current published rows; cached/batch prices apply only when published (otherwise the standard price is used and a note says so).
            </Note>
            <Methodology text={cost.methodology} />
            {cost.note && <Note className="mt-1">{cost.note}</Note>}
          </div>
        )
      ) : error ? (
        <p className="border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3">Context cost unavailable ({error}).</p>
      ) : !ctx ? (
        <p className="py-8 text-center text-sm text-ink-3" aria-busy="true">
          Computing…
        </p>
      ) : (
        <div aria-busy={busy}>
          <h2 className="mb-3 text-base font-semibold tracking-tight md:text-lg">
            How much does a fully populated {fmtTokens(ctx.tokens)}-token context cost? <span className="tnum text-sm font-normal text-ink-3">{fmtInt(ctx.total)} offers with context ≥ {fmtTokens(ctx.tokens)}</span>
          </h2>
          <DataTable scroll compact>
            <thead>
              <tr>
                <Th>Model</Th>
                <Th>Provider</Th>
                <Th num>Context</Th>
                <Th num>Input / 1M</Th>
                <Th num>Cost per fill</Th>
                <Th>Source</Th>
              </tr>
            </thead>
            <tbody>
              {ctx.items.length === 0 && <EmptyRow cols={6}>No current offer advertises a context window of at least {fmtTokens(ctx.tokens)} tokens{s.model ? ' for this model' : ''}.</EmptyRow>}
              {ctx.items.map((it, i) => {
                const d = it.deployment;
                return (
                  <tr key={`${d.id}-${i}`} data-context-row>
                    <Td primary>
                      <EntityLink e={d.model} />
                      {d.model.organization && <span className="ml-2 text-xs text-ink-3">{d.model.organization.name}</span>}
                    </Td>
                    <Td label="Provider" className="text-ink-2">
                      <Link href={routes.entity(d.provider)} className="hover:text-accent">
                        {d.provider.name}
                      </Link>
                    </Td>
                    <Td num label="Context" className="tnum">
                      {fmtTokens(it.context_length)} <span className="text-[10px] text-ink-3">{it.context_source}</span>
                    </Td>
                    <Td num label="Input / 1M" className="tnum text-accent-2">{fmtUsdPerM(d.prices.input)}</Td>
                    <Td num label="Cost per fill" className={cn('tnum', i === 0 && ctx.items.length > 1 && 'font-semibold text-accent-2')}>{fmtMoney(it.cost_usd)}</Td>
                    <Td label="Source">
                      {d.source_url ? (
                        <a href={d.source_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs text-ink-2 hover:text-accent">
                          {hostOf(d.source_url) ?? 'source'} <span className="mono">T{d.tier}</span> <ExternalLink className="size-3" aria-hidden />
                        </a>
                      ) : (
                        <span className="text-xs text-ink-3">—</span>
                      )}
                    </Td>
                  </tr>
                );
              })}
            </tbody>
          </DataTable>
          <Note className="mt-3">Cheapest first (API order). Bold marks the lowest cost among the offers shown — a fact about the input price, not a quality judgement.</Note>
          <Methodology text={ctx.methodology} />
        </div>
      )}
    </div>
  );
}