import { useEffect, useState } from 'react';
import { Check, Copy, Pencil, Play, Square } from 'lucide-react';
import { api } from '@/lib/api';
import { fmtDuration } from '@/lib/format';
import { Button } from '@/components/ui/button';

let highlighterPromise: Promise<{ codeToHtml: (code: string, o: { lang: string; theme: string }) => string }> | null = null;
/** Fine-grained shiki bundle: only the languages students actually meet (keeps the PWA small). */
async function getHighlighter() {
  if (!highlighterPromise) {
    highlighterPromise = (async () => {
      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
        import('shiki/core'),
        import('shiki/engine/javascript'),
      ]);
      const hl = await createHighlighterCore({
        themes: [import('shiki/themes/github-dark.mjs')],
        langs: [import('shiki/langs/python.mjs'), import('shiki/langs/json.mjs'), import('shiki/langs/bash.mjs'), import('shiki/langs/sql.mjs'), import('shiki/langs/javascript.mjs')],
        engine: createJavaScriptRegexEngine(),
      });
      const loaded = new Set(hl.getLoadedLanguages());
      return { codeToHtml: (code: string, o: { lang: string; theme: string }) => hl.codeToHtml(code, { lang: loaded.has(o.lang) ? o.lang : 'text', theme: o.theme }) };
    })();
  }
  return highlighterPromise;
}

interface RunOut { stdout?: string; stderr?: string; exit_code?: number; duration_ms?: number; artifacts?: { file_id: string; filename: string; type: string }[] }

export function CodeBlock({ code, lang, conversationId, streaming }: { code: string; lang: string; conversationId?: string; streaming?: boolean }) {
  const [html, setHtml] = useState<string>('');
  const [copied, setCopied] = useState(false);
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(code);
  const [running, setRunning] = useState(false);
  const [out, setOut] = useState<RunOut | null>(null);
  const runnable = lang === 'python' || lang === 'py';

  useEffect(() => {
    if (streaming) return;
    let alive = true;
    getHighlighter().then((h) => alive && setHtml(h.codeToHtml(editing ? draft : code, { lang: lang || 'text', theme: 'github-dark' }))).catch(() => undefined);
    return () => {
      alive = false;
    };
  }, [code, draft, editing, lang, streaming]);

  const copy = async () => {
    await navigator.clipboard.writeText(editing ? draft : code);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  const run = async () => {
    setRunning(true);
    setOut(null);
    try {
      const r = await api<RunOut>('/tools/python/run', { method: 'POST', body: JSON.stringify({ code: editing ? draft : code, conversation_id: conversationId }) });
      setOut(r);
    } catch (e) {
      setOut({ stderr: e instanceof Error ? e.message : 'Erreur', exit_code: 1 });
    } finally {
      setRunning(false);
    }
  };

  return (
    <div className="my-2 rounded-lg overflow-hidden border border-[#1f2d3d] bg-[#0f1b2a] text-[13px]">
      <div className="flex items-center justify-between px-3 py-1.5 bg-[#16233a] text-[#b7c4d1]">
        <span className="font-mono text-xs uppercase tracking-wide">{lang || 'code'}</span>
        <div className="flex items-center gap-1">
          {runnable && !streaming && (
            <>
              <button onClick={() => setEditing((v) => !v)} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1" title="Modifier">
                <Pencil size={14} /> <span className="hidden sm:inline">Modifier</span>
              </button>
              <button onClick={run} disabled={running} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1 text-uqo-green" title="Exécuter">
                {running ? <Square size={14} className="animate-pulse" /> : <Play size={14} />} <span className="hidden sm:inline">Exécuter</span>
              </button>
            </>
          )}
          <button onClick={copy} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1" title="Copier">
            {copied ? <Check size={14} className="text-uqo-green" /> : <Copy size={14} />} <span className="hidden sm:inline">{copied ? 'Copié' : 'Copier'}</span>
          </button>
        </div>
      </div>
      {editing ? (
        <textarea value={draft} onChange={(e) => setDraft(e.target.value)} spellCheck={false}
          className="w-full min-h-[160px] bg-[#0f1b2a] text-[#e6edf3] font-mono text-[13px] p-3 outline-none resize-y" />
      ) : html ? (
        <div className="overflow-x-auto scroll-thin [&_pre]:!bg-transparent [&_pre]:p-3 [&_pre]:m-0" dangerouslySetInnerHTML={{ __html: html }} />
      ) : (
        <pre className="p-3 m-0 text-[#e6edf3] font-mono overflow-x-auto scroll-thin"><code>{code}</code></pre>
      )}
      {out && (
        <div className="border-t border-[#1f2d3d] bg-[#0b1522] p-3 font-mono text-xs text-[#d5dde5] space-y-2">
          <div className="text-[#8aa0b5]">Sortie {out.exit_code === 0 ? '✓' : `(code ${out.exit_code})`} {out.duration_ms ? `· ${fmtDuration(out.duration_ms)}` : ''}</div>
          {out.stdout && <pre className="whitespace-pre-wrap">{out.stdout}</pre>}
          {out.stderr && <pre className="whitespace-pre-wrap text-[#ff9aa2]">{out.stderr}</pre>}
          {out.artifacts?.filter((a) => a.type === 'image').map((a) => (
            <img key={a.file_id} src={`/api/v1/files/${a.file_id}`} alt={a.filename} className="rounded-md max-h-[360px] bg-white" />
          ))}
          {out.artifacts?.filter((a) => a.type !== 'image').map((a) => (
            <Button key={a.file_id} size="sm" variant="secondary" onClick={() => window.open(`/api/v1/files/${a.file_id}?download=1`, '_blank')}>{a.filename}</Button>
          ))}
        </div>
      )}
    </div>
  );
}