import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { BookOpen, Download, FileSpreadsheet, FileText, Image as ImageIcon, Pin, Wand2, X } from 'lucide-react';
import { useUI } from '@/stores/ui';
import { api, downloadFile } from '@/lib/api';
import type { UploadedFile } from '@/lib/types';
import { useChat } from '@/stores/chat';
import { fmtBytes } from '@/lib/format';

export function ArtifactsPanel({ conversationId, onClose }: { conversationId: string; onClose?: () => void }) {
  const { data: files, refetch } = useQuery({ queryKey: ['files', conversationId], queryFn: () => api<UploadedFile[]>(`/conversations/${conversationId}/files`) });
  const msgs = useChat((s) => s.messages[conversationId] || []);
  const sources = useMemo(() => {
    const seen = new Map<string, { module: string; section: string; url: string; course: string }>();
    for (const m of msgs) for (const t of m.tool_calls || []) if (t.name === 'search_course_content') {
      const list = (t.payload as { sources?: { module: string; section: string; url: string; course: string }[] }).sources || [];
      for (const s of list) seen.set(s.url || s.module + s.section, s);
    }
    return [...seen.values()];
  }, [msgs]);
  const setDraft = useUI((s) => s.setDraft);
  const setPanel = useUI((s) => s.setPanel);

  const icon = (t: string) => (t === 'xlsx' ? FileSpreadsheet : t === 'image' ? ImageIcon : FileText);
  const pin = async (f: UploadedFile) => {
    await api(`/files/${f.file_id}/pin`, { method: 'POST', body: JSON.stringify({ pinned: !f.pinned }) });
    refetch();
  };

  return (
    <div className="flex h-full max-h-[80dvh] md:max-h-none flex-col">
      <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-line">
        <h2 className="font-semibold text-uqo-blue-dark">Fichiers et sources</h2>
        {onClose && <button onClick={onClose} className="h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface" aria-label="Fermer"><X size={20} /></button>}
      </div>
      <div className="flex-1 overflow-y-auto scroll-thin p-4 space-y-5 pb-[calc(16px+var(--safe-bottom))]">
        <section>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-neutral-muted">Fichiers ({files?.length || 0})</h3>
          {!files?.length && <p className="mt-2 text-sm text-neutral-muted">Les fichiers déposés et les classeurs produits apparaîtront ici (conservés 7 jours, 30 si épinglés).</p>}
          <ul className="mt-2 space-y-1.5">
            {files?.map((f) => {
              const Icon = icon(f.type);
              return (
                <li key={f.file_id} className="flex items-center gap-2 rounded-xl border border-neutral-line p-2">
                  <Icon size={18} className="text-uqo-blue shrink-0" />
                  <span className="min-w-0 flex-1"><span className="block text-sm truncate">{f.filename}</span><span className="block text-[11px] text-neutral-muted">{f.kind === 'upload' ? 'déposé' : 'produit'} · {fmtBytes(f.size)}</span></span>
                  {(f.type === 'xlsx' || f.type === 'csv') && (
                    <button onClick={() => { setDraft(`Modifie le fichier « ${f.filename} » : `); if (window.innerWidth < 768) setPanel(false); onClose?.(); }} className="h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-neutral-surface text-uqo-blue" aria-label="Modifier avec le tuteur" title="Modifier avec le tuteur"><Wand2 size={15} /></button>
                  )}
                  <button onClick={() => pin(f)} className={`h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-neutral-surface ${f.pinned ? 'text-uqo-blue' : 'text-neutral-muted'}`} aria-label="Épingler"><Pin size={15} /></button>
                  <button onClick={() => downloadFile(f.file_id, f.filename)} className="h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-neutral-surface text-neutral-muted" aria-label="Télécharger"><Download size={15} /></button>
                </li>
              );
            })}
          </ul>
        </section>
        <section>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-neutral-muted">Sources du cours citées ({sources.length})</h3>
          <ul className="mt-2 space-y-1.5">
            {sources.map((s) => (
              <li key={s.url + s.section}>
                <a href={s.url || '#'} target="_blank" rel="noopener noreferrer" className="flex gap-2 rounded-xl border border-neutral-line p-2 hover:bg-neutral-surface">
                  <BookOpen size={16} className="text-uqo-blue shrink-0 mt-0.5" />
                  <span className="min-w-0"><span className="block text-sm truncate">{s.module}</span><span className="block text-[11px] text-neutral-muted truncate">{s.course} · {s.section}</span></span>
                </a>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}