import { useState } from 'react';
import { BookOpen, Calculator, ChevronDown, FileSearch, FileSpreadsheet, Globe, ListChecks, Loader2, TerminalSquare, AlertTriangle, Check } 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';

const META: Record<string, { label: string; icon: typeof Globe }> = {
  search_course_content: { label: 'Recherche dans le matériel du cours', icon: BookOpen },
  execute_python: { label: 'Exécution du calcul Python', icon: TerminalSquare },
  create_excel: { label: 'Création du fichier Excel', icon: FileSpreadsheet },
  web_search: { label: 'Recherche sur le web', icon: Globe },
  analyze_file: { label: 'Analyse du fichier déposé', icon: FileSearch },
  generate_quiz: { label: 'Préparation du quiz', icon: ListChecks },
  financial_calc: { label: 'Calcul financier', icon: Calculator },
};

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-1.5">
      {calls.map((c) => {
        const meta = META[c.name] || { label: c.name, icon: Calculator };
        const Icon = meta.icon;
        const running = c.status === 'running';
        const expanded = open[c.id] ?? (c.name !== 'financial_calc' && c.name !== 'search_course_content');
        return (
          <li key={c.id} className="rounded-xl border border-neutral-line bg-white shadow-card overflow-hidden animate-fadein">
            <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-[44px]"
              aria-expanded={expanded}
            >
              <span className={cn('h-8 w-8 rounded-lg inline-flex items-center justify-center shrink-0', running ? 'bg-uqo-blue-light text-uqo-blue' : c.status === 'error' ? 'bg-red-50 text-semantic-error' : 'bg-uqo-blue-light text-uqo-blue')}>
                {running ? <Loader2 size={16} className="animate-spin" /> : c.status === 'error' ? <AlertTriangle size={16} /> : <Icon size={16} />}
              </span>
              <span className="flex-1 min-w-0">
                <span className="block text-sm font-medium text-neutral-text truncate">{meta.label}</span>
                <span className="block text-xs text-neutral-muted truncate">
                  {running ? c.progress || 'En cours…' : c.summary || c.args_preview}
                </span>
              </span>
              <span className="text-xs text-neutral-muted inline-flex items-center gap-1 shrink-0">
                {!running && c.duration_ms > 0 && fmtDuration(c.duration_ms)}
                {!running && c.status === 'ok' && <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 px-3 py-3">
                <ToolCard call={c} conversationId={conversationId} />
              </div>
            )}
          </li>
        );
      })}
    </ol>
  );
}