import { useState } from 'react';
import {
  AlertTriangle, BarChart3, BookOpen, Calculator, Check, ChevronDown, FileEdit, FileSearch, FileSpreadsheet,
  FileText, Globe, ListChecks, Loader2, Ruler, Sigma, TerminalSquare,
} from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { fmtDuration } from '@/lib/format';
import { cn } from '@/lib/cn';
import { ToolCard } from '@/components/tools/tool-card';

export const TOOL_META: Record<string, { label: string; icon: typeof Globe; tint: string }> = {
  search_course_content: { label: 'Matériel du cours', icon: BookOpen, tint: 'bg-uqo-blue-light text-uqo-blue' },
  execute_python: { label: 'Calcul Python', icon: TerminalSquare, tint: 'bg-[#e8f1ff] text-[#1d4ed8]' },
  create_excel: { label: 'Classeur Excel', icon: FileSpreadsheet, tint: 'bg-[#e3f3e0] text-[#217346]' },
  edit_excel: { label: 'Modification du classeur Excel', icon: FileEdit, tint: 'bg-[#e3f3e0] text-[#217346]' },
  inspect_excel: { label: 'Lecture du classeur Excel', icon: FileSearch, tint: 'bg-[#e3f3e0] text-[#217346]' },
  web_search: { label: 'Recherche web', icon: Globe, tint: 'bg-[#fff4e0] text-[#b45309]' },
  analyze_file: { label: 'Analyse du fichier déposé', icon: FileSearch, tint: 'bg-uqo-blue-light text-uqo-blue' },
  generate_quiz: { label: 'Quiz', icon: ListChecks, tint: 'bg-[#f3e8ff] text-[#7e22ce]' },
  financial_calc: { label: 'Calcul financier', icon: Calculator, tint: 'bg-neutral-surface text-neutral-text' },
  appraisal_calc: { label: "Calcul d'évaluation", icon: Sigma, tint: 'bg-neutral-surface text-neutral-text' },
  unit_convert: { label: "Conversion d'unités", icon: Ruler, tint: 'bg-neutral-surface text-neutral-text' },
  make_chart: { label: 'Graphique', icon: BarChart3, tint: 'bg-[#e8f1ff] text-[#1d4ed8]' },
  create_docx: { label: 'Document Word', icon: FileText, tint: 'bg-[#e6ecfb] text-[#2b579a]' },
};

const COLLAPSED_BY_DEFAULT = new Set(['financial_calc', 'search_course_content', 'unit_convert', 'inspect_excel']);

export function ToolCallTimeline({ calls, conversationId }: { calls: ToolCallView[]; conversationId: string }) {
  const [open, setOpen] = useState<Record<string, boolean>>({});
  if (!calls.length) return null;
  return (
    <ol className="my-2 space-y-2">
      {calls.map((c) => {
        const meta = TOOL_META[c.name] || { label: c.name, icon: Calculator, tint: 'bg-neutral-surface text-neutral-text' };
        const Icon = meta.icon;
        const running = c.status === 'running';
        const error = c.status === 'error';
        const expanded = open[c.id] ?? !COLLAPSED_BY_DEFAULT.has(c.name);
        return (
          <li key={c.id} className={cn('rounded-2xl border bg-white shadow-card overflow-hidden animate-fadein', error ? 'border-semantic-error/40' : 'border-neutral-line')}>
            <button
              onClick={() => setOpen((o) => ({ ...o, [c.id]: !expanded }))}
              className="w-full flex items-center gap-3 px-3 py-2.5 text-left min-h-[52px]"
              aria-expanded={expanded}
            >
              <span className={cn('h-9 w-9 rounded-xl inline-flex items-center justify-center shrink-0', error ? 'bg-red-50 text-semantic-error' : meta.tint)}>
                {running ? <Loader2 size={17} className="animate-spin" /> : error ? <AlertTriangle size={17} /> : <Icon size={17} />}
              </span>
              <span className="flex-1 min-w-0">
                <span className="flex items-center gap-2">
                  <span className="text-sm font-semibold text-neutral-text truncate">{meta.label}</span>
                  {running && <span className="text-[10px] uppercase tracking-wide rounded-md bg-uqo-blue-light text-uqo-blue px-1.5 py-0.5">en cours</span>}
                  {error && <span className="text-[10px] uppercase tracking-wide rounded-md bg-red-50 text-semantic-error px-1.5 py-0.5">échec, corrigé par le tuteur</span>}
                </span>
                <span className="block text-xs text-neutral-muted truncate">
                  {running ? c.progress || 'En cours…' : error ? 'Voir le détail' : c.summary || c.args_preview}
                </span>
              </span>
              <span className="text-xs text-neutral-muted inline-flex items-center gap-1.5 shrink-0">
                {!running && c.duration_ms > 0 && <span className="tabular-nums">{fmtDuration(c.duration_ms)}</span>}
                {!running && !error && <Check size={14} className="text-uqo-green" />}
                <ChevronDown size={16} className={cn('transition-transform', expanded && 'rotate-180')} />
              </span>
            </button>
            {expanded && !running && (
              <div className="border-t border-neutral-line/80 px-3 py-3 bg-[#fbfcfe]">
                <ToolCard call={c} conversationId={conversationId} />
              </div>
            )}
          </li>
        );
      })}
    </ol>
  );
}