'use client';

import { useEffect, useRef, useState } from 'react';
import { ChevronDown, Loader2, Send, Sparkles } from 'lucide-react';
import { cn } from '@/lib/format';
import { Markdown } from './markdown';

interface ToolTrace {
  id: string;
  name: string;
  input: unknown;
  ok?: boolean;
  ms?: number;
  summary?: string;
  preview?: unknown;
}
interface Turn {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  tools: ToolTrace[];
  streaming?: boolean;
  error?: string;
  usdEst?: number;
}

export function ResearchClient({ aiReady, model, suggestions, prefill }: { aiReady: boolean; model: string | null; suggestions: string[]; prefill: string }) {
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [turns, setTurns] = useState<Turn[]>([]);
  const [input, setInput] = useState(prefill);
  const [busy, setBusy] = useState(false);
  const [sessions, setSessions] = useState<Array<{ id: string; title: string | null; updatedAt: string }>>([]);
  const bottom = useRef<HTMLDivElement>(null);
  const abort = useRef<AbortController | null>(null);

  useEffect(() => {
    fetch('/api/research').then((r) => r.json()).then((j) => setSessions(j.sessions ?? [])).catch(() => {});
  }, []);
  useEffect(() => {
    bottom.current?.scrollIntoView({ block: 'end' });
  }, [turns]);

  async function openSession(id: string) {
    const r = await fetch(`/api/research/${id}`);
    if (!r.ok) return;
    const j = (await r.json()) as { messages: Array<{ id: string; role: 'user' | 'assistant'; content: string; toolCalls: Array<{ name: string; input: unknown; ok: boolean; ms: number; summary?: string }> }> };
    setSessionId(id);
    setTurns(j.messages.map((m) => ({ id: m.id, role: m.role, content: m.content, tools: (m.toolCalls ?? []).map((t, i) => ({ id: `${m.id}-${i}`, ...t })) })));
  }

  async function send(text: string) {
    const message = text.trim();
    if (!message || busy) return;
    setInput('');
    setBusy(true);
    const userTurn: Turn = { id: `u-${Date.now()}`, role: 'user', content: message, tools: [] };
    const asst: Turn = { id: `a-${Date.now()}`, role: 'assistant', content: '', tools: [], streaming: true };
    setTurns((t) => [...t, userTurn, asst]);
    const update = (fn: (a: Turn) => Turn) => setTurns((t) => t.map((x) => (x.id === asst.id ? fn(x) : x)));
    abort.current = new AbortController();
    try {
      const res = await fetch('/api/research', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId, message }), signal: abort.current.signal });
      if (!res.ok || !res.body) {
        const j = await res.json().catch(() => ({}));
        throw new Error((j as { error?: string }).error ?? `HTTP ${res.status}`);
      }
      const reader = res.body.getReader();
      const dec = new TextDecoder();
      let buf = '';
      for (;;) {
        const { value, done } = await reader.read();
        if (done) break;
        buf += dec.decode(value, { stream: true });
        const parts = buf.split('\n\n');
        buf = parts.pop() ?? '';
        for (const p of parts) {
          const line = p.replace(/^data: /, '');
          if (line === '[DONE]') continue;
          let ev: Record<string, unknown>;
          try {
            ev = JSON.parse(line);
          } catch {
            continue;
          }
          switch (ev.type) {
            case 'session':
              setSessionId(ev.sessionId as string);
              break;
            case 'text':
              update((a) => ({ ...a, content: a.content + (ev.text as string) }));
              break;
            case 'tool_call':
              update((a) => ({ ...a, tools: [...a.tools, { id: ev.id as string, name: ev.name as string, input: ev.input }] }));
              break;
            case 'tool_result':
              update((a) => ({ ...a, tools: a.tools.map((t) => (t.id === ev.id ? { ...t, ok: ev.ok as boolean, ms: ev.ms as number, summary: ev.summary as string, preview: ev.preview } : t)) }));
              break;
            case 'error':
              update((a) => ({ ...a, error: ev.message as string }));
              break;
            case 'done':
              update((a) => ({ ...a, streaming: false, usdEst: ev.usdEst as number }));
              break;
          }
        }
      }
    } catch (err) {
      update((a) => ({ ...a, streaming: false, error: err instanceof Error ? err.message : String(err) }));
    } finally {
      setBusy(false);
      update((a) => ({ ...a, streaming: false }));
      fetch('/api/research').then((r) => r.json()).then((j) => setSessions(j.sessions ?? [])).catch(() => {});
    }
  }

  return (
    <div className="grid gap-4 lg:grid-cols-[220px_1fr]">
      <aside className="hidden lg:block">
        <button type="button" onClick={() => { setSessionId(null); setTurns([]); }} className="mb-2 w-full rounded-md border border-border px-3 py-1.5 text-left text-xs font-medium hover:bg-inset">+ New thread</button>
        <ul className="space-y-0.5">
          {sessions.map((s) => (
            <li key={s.id}>
              <button type="button" onClick={() => void openSession(s.id)} className={cn('w-full truncate rounded-md px-2 py-1.5 text-left text-xs', s.id === sessionId ? 'bg-inset text-fg' : 'text-muted hover:bg-inset hover:text-fg')} title={s.title ?? ''}>
                {s.title ?? 'Untitled'}
              </button>
            </li>
          ))}
        </ul>
      </aside>
      <section className="card flex h-[calc(100dvh-var(--ri-header-h,52px)-var(--ri-tabbar-h,56px)-7rem)] min-h-[420px] flex-col md:h-[calc(100dvh-var(--ri-header-h,52px)-9rem)]">
        <div className="flex items-center justify-between border-b border-border px-4 py-2 text-xs text-muted">
          <span className="inline-flex items-center gap-1.5"><Sparkles className="h-3.5 w-3.5" /> {aiReady ? `Grounded research · ${model}` : 'AI provider not configured'}</span>
          <span>Tool calls are shown inline</span>
        </div>
        <div className="flex-1 space-y-4 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 sm:py-4">
          {turns.length === 0 ? (
            <div>
              <p className="mb-3 text-sm text-muted">Try one of these:</p>
              <div className="grid gap-2 sm:grid-cols-2">
                {suggestions.map((s) => (
                  <button key={s} type="button" disabled={!aiReady || busy} onClick={() => void send(s)} className="rounded-md border border-border bg-sunken px-3 py-2 text-left text-[13px] hover:bg-inset disabled:opacity-50">
                    {s}
                  </button>
                ))}
              </div>
            </div>
          ) : null}
          {turns.map((t) => (
            <div key={t.id} className={cn('flex', t.role === 'user' ? 'justify-end' : 'justify-start')}>
              <div className={cn('max-w-[94%] overflow-x-auto rounded-lg px-3.5 py-2.5 text-sm sm:max-w-[88%]', t.role === 'user' ? 'bg-accent text-accent-fg' : 'bg-sunken')}>
                {t.tools.length ? (
                  <ul className="mb-2 space-y-1">
                    {t.tools.map((tool) => (
                      <ToolRow key={tool.id} tool={tool} />
                    ))}
                  </ul>
                ) : null}
                {t.role === 'assistant' ? <Markdown text={t.content} /> : <p className="whitespace-pre-wrap">{t.content}</p>}
                {t.streaming && !t.content ? <Loader2 className="mt-1 h-4 w-4 animate-spin text-muted" /> : null}
                {t.error ? <p className="mt-2 rounded-md bg-loss-bg px-2 py-1 text-xs text-loss">{t.error}</p> : null}
                {t.role === 'assistant' && !t.streaming && t.usdEst !== undefined ? <p className="mt-2 text-[10px] text-subtle">Grounded in {t.tools.length} quer{t.tools.length === 1 ? 'y' : 'ies'} · est. cost ${t.usdEst.toFixed(4)}</p> : null}
              </div>
            </div>
          ))}
          <div ref={bottom} />
        </div>
        <form
          className="sticky bottom-0 flex items-end gap-2 border-t border-border bg-elevated p-2 sm:p-3"
          onSubmit={(e) => {
            e.preventDefault();
            void send(input);
          }}
        >
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                void send(input);
              }
            }}
            rows={2}
            placeholder={aiReady ? 'Ask about an asset, a category, an index, movers or a screen…' : 'AI provider not configured'}
            disabled={!aiReady}
            className="max-h-40 min-h-[44px] flex-1 resize-none rounded-md border border-border bg-sunken px-3 py-2 text-base text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none md:text-sm"
          />
          <button type="submit" disabled={!aiReady || busy || !input.trim()} aria-label="Send" className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-accent text-accent-fg disabled:opacity-50">
            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
          </button>
        </form>
        <p className="border-t border-border px-4 py-2 text-[11px] text-subtle">Analytical data, not investment advice. Valuations are estimates with confidence; listing prices are not confirmed transactions.</p>
      </section>
    </div>
  );
}

function ToolRow({ tool }: { tool: ToolTrace }) {
  const [open, setOpen] = useState(false);
  const args = tool.input && typeof tool.input === 'object' ? Object.entries(tool.input as Record<string, unknown>).filter(([, v]) => v !== null && v !== undefined && v !== '').map(([k, v]) => `${k}=${typeof v === 'string' ? v : JSON.stringify(v)}`).join(', ') : '';
  return (
    <li className="rounded-md border border-border bg-elevated text-[11px]">
      <button type="button" onClick={() => setOpen(!open)} className="flex w-full items-center gap-2 px-2 py-1 text-left font-mono">
        <span className={cn('h-1.5 w-1.5 rounded-full', tool.ok === undefined ? 'animate-pulse bg-subtle' : tool.ok ? 'bg-gain' : 'bg-loss')} />
        <span className="truncate">Queried: {tool.name}({args})</span>
        <span className="ml-auto shrink-0 text-subtle">{tool.summary ?? (tool.ok === undefined ? '…' : '')}{tool.ms !== undefined ? ` · ${tool.ms} ms` : ''}</span>
        <ChevronDown className={cn('h-3 w-3 shrink-0 text-subtle transition-transform', open && 'rotate-180')} />
      </button>
      {open && tool.preview !== undefined ? <pre className="max-h-48 overflow-auto border-t border-border px-2 py-1 font-mono text-[10px] text-muted">{JSON.stringify(tool.preview, null, 1)}</pre> : null}
    </li>
  );
}