import { useEffect, useMemo, useRef, useState } from 'react';
import { Check, Copy, Download, Loader2, Play, RotateCcw, Send } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { api } from '@/lib/api';
import { fmtDuration } from '@/lib/format';
import { cn } from '@/lib/cn';
import { useUI } from '@/stores/ui';
import { ArtifactChips } from './artifact-chips';

interface RunOut { stdout?: string; stderr?: string; exit_code?: number; duration_ms?: number; artifacts?: { file_id: string; filename: string; type: string }[] }
type Tab = 'code' | 'output' | 'figures';

let hlPromise: Promise<(code: string) => string> | null = null;
function highlighter() {
  if (!hlPromise) {
    hlPromise = (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')], engine: createJavaScriptRegexEngine() });
      return (code: string) => hl.codeToHtml(code, { lang: 'python', theme: 'github-dark' });
    })();
  }
  return hlPromise;
}

export function PythonExecCard({ call, conversationId }: { call: ToolCallView; conversationId: string }) {
  const p = call.payload as { code?: string; description?: string; stdout?: string; stderr?: string; exit_code?: number; duration_ms?: number; artifacts?: ToolCallView['artifacts'] };
  const initialArtifacts = (p.artifacts || call.artifacts || []) as NonNullable<ToolCallView['artifacts']>;
  const [tab, setTab] = useState<Tab>(initialArtifacts.some((a) => a.type === 'image') ? 'figures' : p.stdout || p.stderr ? 'output' : 'code');
  const [code, setCode] = useState(p.code || '');
  const [editing, setEditing] = useState(false);
  const [html, setHtml] = useState('');
  const [running, setRunning] = useState(false);
  const [out, setOut] = useState<RunOut>({ stdout: p.stdout, stderr: p.stderr, exit_code: p.exit_code, duration_ms: p.duration_ms, artifacts: initialArtifacts.filter((a) => a.file_id).map((a) => ({ file_id: a.file_id!, filename: a.filename || '', type: a.type })) });
  const [copied, setCopied] = useState(false);
  const taRef = useRef<HTMLTextAreaElement>(null);
  const setDraft = useUI((s) => s.setDraft);
  const dirty = code !== (p.code || '');

  useEffect(() => {
    let alive = true;
    highlighter().then((f) => alive && setHtml(f(code))).catch(() => undefined);
    return () => { alive = false; };
  }, [code]);

  const lines = useMemo(() => code.split('\n').length, [code]);
  const images = (out.artifacts || []).filter((a) => a.type === 'image');
  const others = (out.artifacts || []).filter((a) => a.type !== 'image');

  const run = async () => {
    setRunning(true);
    try {
      const r = await api<RunOut>('/tools/python/run', { method: 'POST', body: JSON.stringify({ code, conversation_id: conversationId }) });
      setOut(r);
      setTab(r.artifacts?.some((a) => a.type === 'image') ? 'figures' : 'output');
    } catch (e) {
      setOut({ stderr: e instanceof Error ? e.message : 'Erreur', exit_code: 1 });
      setTab('output');
    } finally {
      setRunning(false);
    }
  };
  const copy = async () => { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1200); };
  const download = () => {
    const blob = new Blob([code], { type: 'text/x-python' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'calcul.py'; a.click(); URL.revokeObjectURL(a.href);
  };
  const askTutor = () => setDraft(`À propos du code Python ci-dessus (${p.description || 'calcul'}) : `);

  const TabBtn = ({ id, label, count }: { id: Tab; label: string; count?: number }) => (
    <button onClick={() => setTab(id)} className={cn('h-9 px-3 rounded-lg text-sm font-medium inline-flex items-center gap-1.5', tab === id ? 'bg-white text-uqo-blue-dark shadow-card' : 'text-neutral-muted hover:text-neutral-text')} role="tab" aria-selected={tab === id}>
      {label}{count ? <span className="text-[10px] rounded-full bg-uqo-blue-light text-uqo-blue px-1.5">{count}</span> : null}
    </button>
  );

  return (
    <div className="space-y-2">
      {p.description && <p className="text-sm text-neutral-text">{p.description}</p>}
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <div className="inline-flex gap-1 rounded-xl bg-neutral-surface p-1" role="tablist">
          <TabBtn id="code" label="Code" />
          <TabBtn id="output" label="Sortie" />
          <TabBtn id="figures" label="Graphiques" count={images.length} />
        </div>
        <div className="flex items-center gap-1">
          <button onClick={() => setEditing((v) => !v)} className={cn('h-9 px-2.5 rounded-lg text-xs font-medium inline-flex items-center gap-1 border', editing ? 'bg-uqo-blue text-white border-uqo-blue' : 'border-neutral-line text-neutral-text hover:bg-neutral-surface')}>
            {editing ? 'Terminer' : 'Modifier'}
          </button>
          {dirty && <button onClick={() => setCode(p.code || '')} className="h-9 w-9 inline-flex items-center justify-center rounded-lg border border-neutral-line text-neutral-muted hover:bg-neutral-surface" title="Rétablir le code original"><RotateCcw size={14} /></button>}
          <button onClick={run} disabled={running} className="h-9 px-3 rounded-lg text-xs font-semibold inline-flex items-center gap-1.5 bg-uqo-green text-white hover:bg-[#67a51b] disabled:opacity-60">
            {running ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />} {running ? 'Exécution…' : dirty ? 'Exécuter ma version' : 'Ré-exécuter'}
          </button>
        </div>
      </div>

      {tab === 'code' && (
        <div className="rounded-xl overflow-hidden border border-[#1f2d3d] bg-[#0f1b2a]">
          <div className="flex items-center justify-between px-3 py-1.5 bg-[#16233a] text-[#b7c4d1] text-xs">
            <span className="font-mono">python · {lines} lignes{dirty ? ' · modifié' : ''}</span>
            <div className="flex gap-1">
              <button onClick={copy} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1">{copied ? <Check size={13} className="text-uqo-green" /> : <Copy size={13} />} Copier</button>
              <button onClick={download} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1"><Download size={13} /> .py</button>
              <button onClick={askTutor} className="h-8 px-2 rounded-md hover:bg-white/10 inline-flex items-center gap-1 text-uqo-green"><Send size={13} /> Demander au tuteur</button>
            </div>
          </div>
          {editing ? (
            <textarea ref={taRef} value={code} onChange={(e) => setCode(e.target.value)} spellCheck={false}
              onKeyDown={(e) => { if (e.key === 'Tab') { e.preventDefault(); const t = e.currentTarget; const s = t.selectionStart; setCode(code.slice(0, s) + '    ' + code.slice(t.selectionEnd)); requestAnimationFrame(() => t.setSelectionRange(s + 4, s + 4)); } }}
              className="w-full min-h-[220px] max-h-[520px] bg-[#0f1b2a] text-[#e6edf3] font-mono text-[13px] leading-relaxed p-3 outline-none resize-y scroll-thin" />
          ) : html ? (
            <div className="overflow-auto max-h-[520px] scroll-thin text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:p-3 [&_pre]:m-0" dangerouslySetInnerHTML={{ __html: html }} />
          ) : (
            <pre className="p-3 m-0 text-[#e6edf3] font-mono text-[13px] overflow-auto max-h-[520px] scroll-thin"><code>{code}</code></pre>
          )}
        </div>
      )}

      {tab === 'output' && (
        <div className="rounded-xl border border-neutral-line bg-[#0b1522] text-[#d5dde5] font-mono text-xs">
          <div className="flex items-center justify-between px-3 py-1.5 border-b border-[#1f2d3d] text-[#8aa0b5]">
            <span>{out.exit_code === 0 || out.exit_code === undefined ? '✓ terminé' : `✗ code de sortie ${out.exit_code}`}</span>
            {out.duration_ms ? <span>{fmtDuration(out.duration_ms)}</span> : null}
          </div>
          <div className="p-3 max-h-[420px] overflow-auto scroll-thin">
            {out.stdout ? <pre className="whitespace-pre-wrap">{out.stdout}</pre> : !out.stderr && <span className="text-[#8aa0b5]">(aucune sortie texte)</span>}
            {out.stderr && <pre className="whitespace-pre-wrap text-[#ff9aa2] mt-2">{out.stderr}</pre>}
          </div>
          {others.length > 0 && <div className="p-3 border-t border-[#1f2d3d] bg-white"><ArtifactChips artifacts={others.map((a) => ({ ...a, preview: undefined }))} /></div>}
        </div>
      )}

      {tab === 'figures' && (
        <div className="grid gap-3 sm:grid-cols-2">
          {images.length === 0 && <p className="text-sm text-neutral-muted">Aucun graphique produit par ce code.</p>}
          {images.map((a) => (
            <figure key={a.file_id} className="rounded-xl border border-neutral-line overflow-hidden bg-white sm:col-span-2">
              <img src={`/api/v1/files/${a.file_id}`} alt={a.filename || 'graphique'} className="w-full max-h-[480px] object-contain" loading="lazy" />
              <figcaption className="flex items-center justify-between px-3 py-2 text-xs text-neutral-muted border-t border-neutral-line">
                <span className="truncate">{a.filename}</span>
                <a href={`/api/v1/files/${a.file_id}?download=1`} className="inline-flex items-center gap-1 text-uqo-blue"><Download size={13} /> PNG</a>
              </figcaption>
            </figure>
          ))}
        </div>
      )}
    </div>
  );
}