import { useState } from 'react';
import { Download, FileEdit, FileSpreadsheet, Share2, Wand2 } from 'lucide-react';
import type { ToolCallView } from '@/lib/types';
import { downloadFile, shareFile } from '@/lib/api';
import { cellValue } from '@/lib/format';
import { Button } from '@/components/ui/button';
import { useUI } from '@/stores/ui';
import { cn } from '@/lib/cn';

interface SheetPreview { name: string; rows: unknown[][]; max_row?: number; max_col?: number }
interface Preview { sheet: string; rows: unknown[][]; sheets: string[]; all?: SheetPreview[] }

function colLetter(i: number): string {
  let s = '';
  let n = i;
  while (n >= 0) { s = String.fromCharCode(65 + (n % 26)) + s; n = Math.floor(n / 26) - 1; }
  return s;
}

export function ExcelCard({ call }: { call: ToolCallView }) {
  const p = call.payload as { filename?: string; file_id?: string; preview?: Preview; sheets?: { name: string; tables: number; inputs: number }[]; changes?: string[]; source?: string };
  const pv = p.preview;
  const all: SheetPreview[] = pv?.all?.length ? pv.all : pv ? [{ name: pv.sheet, rows: pv.rows }] : [];
  const visible = all.filter((s) => s.name !== 'Lisez-moi').concat(all.filter((s) => s.name === 'Lisez-moi'));
  const [active, setActive] = useState(0);
  const setDraft = useUI((s) => s.setDraft);
  const fileId = p.file_id || call.artifacts?.[0]?.file_id;
  const filename = p.filename || call.artifacts?.[0]?.filename || 'classeur.xlsx';
  const sheet = visible[Math.min(active, Math.max(0, visible.length - 1))];
  const isInspect = call.name === 'inspect_excel';
  const isEdit = call.name === 'edit_excel';
  const modify = () => setDraft(`Modifie le classeur « ${filename} » : `);
  const ncols = sheet ? Math.max(...sheet.rows.map((r) => r.length), 1) : 0;

  return (
    <div className="space-y-3">
      <div className="flex items-start gap-3">
        <span className="h-10 w-10 rounded-xl bg-[#e3f3e0] text-[#217346] inline-flex items-center justify-center shrink-0">{isEdit ? <FileEdit size={20} /> : <FileSpreadsheet size={20} />}</span>
        <div className="min-w-0 flex-1">
          <div className="font-semibold truncate">{filename}</div>
          <div className="text-xs text-neutral-muted">
            {isEdit && p.source ? <>Nouvelle version de <b>{p.source}</b> · </> : null}
            {visible.length ? `${visible.length} feuille${visible.length > 1 ? 's' : ''}` : 'Classeur Excel'} · formules vivantes
          </div>
        </div>
      </div>

      {isEdit && p.changes?.length ? (
        <ul className="rounded-xl bg-[#f2f9ef] border border-[#cfe9c3] px-3 py-2 text-xs text-[#1f4d13] space-y-0.5">
          {p.changes.map((c, i) => <li key={i}>✓ {c.replace(/^\d+\.\s*/, '')}</li>)}
        </ul>
      ) : null}

      {visible.length > 1 && (
        <div className="flex gap-1 overflow-x-auto scroll-thin" role="tablist">
          {visible.map((s, i) => (
            <button key={s.name} role="tab" aria-selected={i === active} onClick={() => setActive(i)}
              className={cn('h-8 px-3 rounded-lg text-xs font-medium whitespace-nowrap border', i === active ? 'bg-[#217346] text-white border-[#217346]' : 'border-neutral-line text-neutral-muted hover:bg-neutral-surface')}>
              {s.name}
            </button>
          ))}
        </div>
      )}

      {sheet && sheet.rows.length > 0 && (
        <div className="rounded-xl border border-neutral-line overflow-auto scroll-thin bg-white max-h-[380px]">
          <table className="text-xs border-collapse min-w-full">
            <thead>
              <tr className="bg-neutral-surface text-neutral-muted">
                <th className="sticky left-0 bg-neutral-surface w-8 px-1 py-1 text-[10px] font-medium border-b border-r border-neutral-line" />
                {Array.from({ length: ncols }).map((_, j) => <th key={j} className="px-2 py-1 text-[10px] font-medium border-b border-neutral-line text-center">{colLetter(j)}</th>)}
              </tr>
            </thead>
            <tbody>
              {sheet.rows.map((row, i) => (
                <tr key={i} className="border-b border-neutral-line/60 last:border-0">
                  <td className="sticky left-0 bg-neutral-surface text-neutral-muted text-[10px] text-center px-1 border-r border-neutral-line tabular-nums">{i + 1}</td>
                  {Array.from({ length: ncols }).map((_, j) => {
                    const c = row[j];
                    const isFormula = typeof c === 'string' && c.startsWith('=');
                    const isNum = typeof c === 'number';
                    return (
                      <td key={j} title={isFormula ? String(c) : undefined}
                        className={cn('px-2 py-1 whitespace-nowrap max-w-[220px] truncate', isFormula && 'font-mono text-[11px] text-[#217346] bg-[#f6fbf4]', isNum && 'text-right tabular-nums', i === 0 && 'font-semibold text-uqo-blue-dark')}>
                        {isFormula ? 'ƒ ' + String(c) : cellValue(c)}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
          {sheet.max_row && sheet.max_row > sheet.rows.length && <div className="px-2 py-1 text-[11px] text-neutral-muted bg-neutral-surface">… {sheet.max_row - sheet.rows.length} ligne(s) de plus dans le fichier</div>}
        </div>
      )}

      {fileId && (
        <div className="flex gap-2 flex-wrap">
          {!isInspect && <Button size="sm" onClick={() => downloadFile(fileId, filename)}><Download size={16} /> Télécharger</Button>}
          <Button size="sm" variant="secondary" onClick={modify}><Wand2 size={16} /> Modifier avec le tuteur</Button>
          {typeof navigator !== 'undefined' && !!navigator.share && !isInspect && (
            <Button size="sm" variant="ghost" onClick={() => shareFile(fileId, filename)}><Share2 size={16} /> Partager</Button>
          )}
        </div>
      )}
      <p className="text-[11px] text-neutral-muted">Aperçu statique : les formules (ƒ) sont calculées à l'ouverture dans Excel, Numbers ou LibreOffice.</p>
    </div>
  );
}