"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import useSWR, { mutate } from "swr";
import { Plus, MessageSquare, FileText, Trash2, Download, Upload, Save, Eye, Pencil, ExternalLink, Brain, LayoutPanelLeft, ShieldCheck } from "lucide-react";
import { api, fetcher, relTime } from "@/lib/client/fetcher";
import type { ArtifactDTO, ConversationDTO, MemoryDTO, ProjectDTO } from "@/lib/client/types";
import { useModels } from "@/lib/client/use-models";
import { Button, Empty, Spinner, Tabs, Textarea, Toggle, toast, cn, Badge } from "../ui";
import { Markdown } from "../chat/markdown";
import { MemoryCard } from "../memory/memory-card";
import { AddMemoryDialog } from "../memory/add-memory-dialog";
import { fmtBytes } from "./project-shared";

export interface ProjectFile { id: string; filename: string; mime: string; size_bytes: number; page_count: number | null; created_at: string }
interface ToolInfo { name: string; description: string; permission: string; category: string }

export function ConversationsTab({ project }: { project: ProjectDTO }) {
  const router = useRouter();
  const { data } = useSWR<{ conversations: ConversationDTO[] }>(`/api/conversations?project=${project.id}`, fetcher);
  return (
    <div>
      <div className="mb-3 flex justify-end"><Button variant="primary" onClick={() => router.push(`/?project=${project.id}`)}><Plus className="h-4 w-4" /> Nouvelle conversation dans ce projet</Button></div>
      {!data && <Spinner />}
      {data && !data.conversations.length && <Empty icon={<MessageSquare className="h-8 w-8" />} title="Aucune conversation" hint="Les conversations démarrées depuis ce projet héritent de ses instructions, de son modèle et de sa mémoire." />}
      <div className="space-y-1.5">{data?.conversations.map(c => (
        <Link key={c.id} href={`/c/${c.id}`} className="flex items-center gap-3 rounded-xl border border-border bg-surface px-4 py-2.5 hover:border-border-strong hover:bg-surface-2">
          <MessageSquare className="h-4 w-4 shrink-0 text-muted" />
          <span className="min-w-0 flex-1"><span className="block truncate text-[14px]">{c.title}</span><span className="block text-[12px] text-muted">{c.message_count} messages · {Number(c.total_cost_usd).toFixed(3)} $ · {c.model_id ?? "auto"}</span></span>
          <span className="text-[12px] text-muted">{relTime(c.last_message_at ?? c.created_at)}</span>
        </Link>))}</div>
    </div>
  );
}

export function InstructionsTab({ project, onSaved }: { project: ProjectDTO; onSaved: () => void }) {
  const { chat } = useModels();
  const { data: settings } = useSWR<{ tools: ToolInfo[] }>("/api/settings", fetcher);
  const [instructions, setInstructions] = useState(project.instructions ?? ""); const [model, setModel] = useState(project.default_model ?? "");
  const [perms, setPerms] = useState<Record<string, boolean>>(() => Object.fromEntries(Object.entries(project.tool_permissions ?? {}).map(([k, v]) => [k, !!v]))); const [busy, setBusy] = useState(false);
  useEffect(() => { setInstructions(project.instructions ?? ""); setModel(project.default_model ?? ""); }, [project.id, project.instructions, project.default_model]);
  const tools = settings?.tools ?? [];
  const allowed = (name: string) => perms[name] ?? true;
  async function save() {
    setBusy(true);
    try { await api(`/api/projects/${project.id}`, { method: "PATCH", json: { instructions: instructions.trim() || null, defaultModel: model || null, toolPermissions: Object.fromEntries(tools.map(t => [t.name, allowed(t.name)])) } }); toast("Instructions enregistrées", "ok"); onSaved(); }
    catch (e) { toast((e as Error).message, "error"); } finally { setBusy(false); }
  }
  return (
    <div className="space-y-5">
      <div>
        <label className="mb-1 block text-xs font-medium text-fg-2">Instructions du projet</label>
        <Textarea value={instructions} onChange={e => setInstructions(e.target.value)} maxLength={20000} className="min-h-44 text-[14px]" placeholder="Contexte, ton, format de réponse attendu, sources à privilégier…" />
        <p className="mt-1.5 flex items-start gap-1.5 text-[12px] text-muted"><ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" /> Les instructions affinent le comportement du modèle dans ce projet. Elles ne peuvent pas contourner les principes de base ni les règles de sécurité de l'application.</p>
      </div>
      <div>
        <label className="mb-1 block text-xs font-medium text-fg-2">Modèle par défaut</label>
        <select value={model} onChange={e => setModel(e.target.value)} className="input"><option value="">— Suivre le choix du composeur —</option>{chat.map(m => <option key={m.id} value={m.id}>{m.displayName} ({m.provider})</option>)}</select>
      </div>
      <div>
        <label className="mb-1 block text-xs font-medium text-fg-2">Outils autorisés dans ce projet</label>
        {!tools.length && <Spinner />}
        <div className="grid gap-1.5 sm:grid-cols-2">{tools.map(t => (
          <label key={t.name} className="flex items-start gap-3 rounded-xl border border-border bg-surface px-3 py-2.5">
            <input type="checkbox" checked={allowed(t.name)} onChange={e => setPerms(p => ({ ...p, [t.name]: e.target.checked }))} className="mt-1 accent-[var(--accent)]" />
            <span className="min-w-0"><span className="flex items-center gap-1.5 text-[13px] font-medium"><code className="font-mono">{t.name}</code><Badge tone={t.permission === "auto" ? "neutral" : "warn"}>{t.permission === "auto" ? "auto" : "approbation"}</Badge></span><span className="block text-[12px] text-muted">{t.description}</span></span>
          </label>))}</div>
      </div>
      <div className="flex justify-end"><Button variant="primary" loading={busy} onClick={save}><Save className="h-4 w-4" /> Enregistrer</Button></div>
    </div>
  );
}

export function FilesTab({ project, files, onChanged }: { project: ProjectDTO; files: ProjectFile[]; onChanged: () => void }) {
  const [uploading, setUploading] = useState(false); const [drag, setDrag] = useState(false); const input = useRef<HTMLInputElement>(null);
  async function upload(list: FileList | File[]) {
    const arr = Array.from(list); if (!arr.length) return; setUploading(true);
    try { const fd = new FormData(); for (const f of arr) fd.append("file", f); fd.append("projectId", project.id); await api("/api/attachments", { method: "POST", body: fd }); toast(`${arr.length} fichier(s) ajouté(s)`, "ok"); onChanged(); }
    catch (e) { toast((e as Error).message, "error"); } finally { setUploading(false); }
  }
  async function del(f: ProjectFile) { if (!confirm(`Supprimer « ${f.filename} » ?`)) return; await api(`/api/attachments/${f.id}`, { method: "DELETE" }); onChanged(); }
  return (
    <div>
      <div onDragOver={e => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={e => { e.preventDefault(); setDrag(false); void upload(e.dataTransfer.files); }} onClick={() => input.current?.click()} className={cn("mb-4 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-4 py-8 text-center transition-colors", drag ? "border-accent bg-accent/5" : "border-border hover:border-border-strong hover:bg-surface")}>
        <input ref={input} type="file" multiple hidden accept="image/*,.pdf,.docx,.xlsx,.csv,.txt,.md,.json" onChange={e => { if (e.target.files) void upload(e.target.files); e.target.value = ""; }} />
        {uploading ? <Spinner className="h-5 w-5" /> : <Upload className="h-5 w-5 text-accent" />}
        <div className="text-[14px] font-medium">{uploading ? "Téléversement…" : "Dépose des fichiers ici ou clique pour choisir"}</div>
        <div className="text-[12px] text-muted">PDF, DOCX, XLSX, CSV, TXT, Markdown, images · texte extrait et indexé pour l'outil <code className="font-mono">search_documents</code></div>
      </div>
      {!files.length && <Empty icon={<FileText className="h-8 w-8" />} title="Aucun fichier" hint="Les documents du projet sont consultables par le modèle dans toutes les conversations du projet." />}
      <div className="space-y-1.5">{files.map(f => (
        <div key={f.id} className="flex items-center gap-3 rounded-xl border border-border bg-surface px-4 py-2.5">
          <FileText className="h-4 w-4 shrink-0 text-accent-2" />
          <span className="min-w-0 flex-1"><span className="block truncate text-[14px]">{f.filename}</span><span className="block text-[12px] text-muted">{fmtBytes(f.size_bytes)}{f.page_count ? ` · ${f.page_count} p.` : ""} · {relTime(f.created_at)}</span></span>
          <a href={`/api/attachments/${f.id}?download=1`} className="rounded-lg p-1.5 text-fg-2 hover:bg-surface-2 hover:text-fg" title="Télécharger"><Download className="h-4 w-4" /></a>
          <button onClick={() => del(f)} className="rounded-lg p-1.5 text-fg-2 hover:bg-surface-2 hover:text-danger" title="Supprimer"><Trash2 className="h-4 w-4" /></button>
        </div>))}</div>
    </div>
  );
}

export function MemoryTab({ project, memories, onChanged }: { project: ProjectDTO; memories: MemoryDTO[]; onChanged: () => void }) {
  const [add, setAdd] = useState(false);
  return (
    <div>
      <div className="mb-3 flex items-center justify-between gap-3"><p className="text-[13px] text-muted">Souvenirs propres à ce projet : injectés seulement dans ses conversations, en plus de la mémoire globale.</p><Button variant="primary" onClick={() => setAdd(true)}><Plus className="h-4 w-4" /> Ajouter</Button></div>
      {!memories.length && <Empty icon={<Brain className="h-8 w-8" />} title="Aucun souvenir de projet" />}
      <div className="space-y-2">{memories.map(m => <MemoryCard key={m.id} m={m} candidate={m.status === "candidate"} onChanged={onChanged} />)}</div>
      <AddMemoryDialog open={add} onClose={() => setAdd(false)} onAdded={onChanged} projectId={project.id} />
    </div>
  );
}

export function NotesTab({ project }: { project: ProjectDTO }) {
  const [notes, setNotes] = useState(project.notes ?? ""); const [preview, setPreview] = useState(false); const [state, setState] = useState<"idle" | "saving" | "saved">("idle"); const first = useRef(true);
  useEffect(() => { setNotes(project.notes ?? ""); first.current = true; }, [project.id]);
  useEffect(() => {
    if (first.current) { first.current = false; return; }
    setState("saving");
    const t = setTimeout(async () => { try { await api(`/api/projects/${project.id}`, { method: "PATCH", json: { notes } }); setState("saved"); void mutate("/api/projects"); } catch { setState("idle"); toast("Échec de la sauvegarde des notes", "error"); } }, 900);
    return () => clearTimeout(t);
  }, [notes, project.id]);
  return (
    <div>
      <div className="mb-2 flex items-center gap-2"><Tabs value={preview ? "preview" : "edit"} onChange={v => setPreview(v === "preview")} items={[{ value: "edit", label: <span className="flex items-center gap-1"><Pencil className="h-3.5 w-3.5" /> Éditer</span> }, { value: "preview", label: <span className="flex items-center gap-1"><Eye className="h-3.5 w-3.5" /> Aperçu</span> }]} /><span className="ml-auto text-[12px] text-muted">{state === "saving" ? "Enregistrement…" : state === "saved" ? "Enregistré" : "Sauvegarde automatique"}</span></div>
      {preview ? <div className="card min-h-64 p-5">{notes.trim() ? <Markdown text={notes} /> : <span className="text-muted">Rien à afficher.</span>}</div>
        : <Textarea value={notes} onChange={e => setNotes(e.target.value)} className="min-h-72 font-mono text-[13px]" placeholder="Notes de recherche, liens, listes… en Markdown." />}
    </div>
  );
}

export function ArtifactsTab({ artifacts }: { artifacts: ArtifactDTO[] }) {
  if (!artifacts.length) return <Empty icon={<LayoutPanelLeft className="h-8 w-8" />} title="Aucun artefact sauvegardé" hint="Depuis une conversation, ouvre un artefact (HTML, React, SVG, Mermaid…) puis « Sauver au projet »." />;
  return <div className="space-y-1.5">{artifacts.map(a => (
    <a key={a.id} href={`/api/artifacts/${a.id}?raw=1`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 rounded-xl border border-border bg-surface px-4 py-2.5 hover:border-border-strong hover:bg-surface-2">
      <LayoutPanelLeft className="h-4 w-4 shrink-0 text-accent" />
      <span className="min-w-0 flex-1"><span className="block truncate text-[14px]">{a.title}</span><span className="block text-[12px] text-muted">{a.type}{a.language ? ` · ${a.language}` : ""} · v{a.version} · {relTime(a.created_at)}</span></span>
      <ExternalLink className="h-4 w-4 text-muted" />
    </a>))}</div>;
}

export function ToggleRow({ label, hint, checked, onChange }: { label: string; hint?: string; checked: boolean; onChange: (v: boolean) => void }) {
  return <label className="flex items-center justify-between gap-3 rounded-xl border border-border bg-surface px-3.5 py-3"><span><span className="block text-[13px] font-medium">{label}</span>{hint && <span className="block text-[12px] text-muted">{hint}</span>}</span><Toggle checked={checked} onChange={onChange} label={label} /></label>;
}