"use client";
import { useEffect, useRef, useState, type KeyboardEvent } from "react";
import { ArrowUp, Square, Paperclip, Mic, MicOff, Wrench, X, FileText, Image as ImageIcon, SlidersHorizontal } from "lucide-react";
import { ModelPicker } from "./model-picker";
import type { AttachmentDTO, RoutingMode } from "@/lib/client/types";
import { usePrefs, setPrefs } from "@/lib/client/prefs";
import { api } from "@/lib/client/fetcher";
import { cn, toast, Toggle } from "../ui";
import { useModels } from "@/lib/client/use-models";

export interface ComposerSubmit { text: string; attachments: AttachmentDTO[]; modelId: string | null; routingMode: RoutingMode; effort?: "low" | "medium" | "high" | "xhigh" | "max"; toolsEnabled: boolean }

export function Composer({ onSubmit, onStop, streaming, conversationId, projectId, placeholder, initialModel, autoFocus = true }: { onSubmit: (s: ComposerSubmit) => void; onStop: () => void; streaming: boolean; conversationId: string | null; projectId?: string | null; placeholder?: string; initialModel?: string | null; autoFocus?: boolean }) {
  const prefs = usePrefs(); const { chat, defaultModel, byId } = useModels();
  const [text, setText] = useState(""); const [atts, setAtts] = useState<AttachmentDTO[]>([]); const [uploading, setUploading] = useState(false); const [rec, setRec] = useState<MediaRecorder | null>(null); const [transcribing, setTranscribing] = useState(false); const [opts, setOpts] = useState(false);
  const ta = useRef<HTMLTextAreaElement>(null); const fileRef = useRef<HTMLInputElement>(null);
  const modelId = prefs.modelId && byId(prefs.modelId)?.available ? prefs.modelId : (initialModel && byId(initialModel)?.available ? initialModel : defaultModel && byId(defaultModel)?.available ? defaultModel : chat[0]?.id ?? null);
  const model = byId(modelId);
  const supportsEffort = model && (/^(gpt-5|gpt-6|o\d)/.test(model.id) && !/chat-latest$/.test(model.id) || /-4-6|-4-7|-4-8|opus-5|sonnet-5|haiku-5|fable/.test(model.id));

  useEffect(() => { const el = ta.current; if (!el) return; el.style.height = "0px"; el.style.height = Math.min(el.scrollHeight, 260) + "px"; }, [text]);
  useEffect(() => { if (autoFocus && window.innerWidth > 768) ta.current?.focus(); }, [autoFocus, conversationId]);

  function submit() {
    if (streaming) return;
    if (!text.trim() && !atts.length) return;
    if (prefs.routingMode === "manual" && !modelId) { toast("Choisis un modèle", "error"); return; }
    onSubmit({ text, attachments: atts, modelId, routingMode: prefs.routingMode, effort: prefs.effort, toolsEnabled: prefs.toolsEnabled });
    setText(""); setAtts([]);
  }
  function onKey(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && prefs.sendWithEnter && window.innerWidth > 768) { e.preventDefault(); submit(); }
    else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); submit(); }
  }
  async function upload(files: FileList | File[]) {
    const list = Array.from(files); if (!list.length) return;
    setUploading(true);
    try {
      const fd = new FormData(); for (const f of list) fd.append("file", f); if (conversationId) fd.append("conversationId", conversationId); if (projectId) fd.append("projectId", projectId);
      const r = await api<{ attachments: AttachmentDTO[] }>("/api/attachments", { method: "POST", body: fd });
      setAtts(a => [...a, ...r.attachments]);
    } catch (e) { toast((e as Error).message, "error"); } finally { setUploading(false); }
  }
  async function toggleMic() {
    if (rec) { rec.stop(); return; }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mime = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
      const r = new MediaRecorder(stream, { mimeType: mime }); const chunks: Blob[] = []; const t0 = Date.now();
      r.ondataavailable = e => chunks.push(e.data);
      r.onstop = async () => {
        stream.getTracks().forEach(t => t.stop()); setRec(null); setTranscribing(true);
        try { const fd = new FormData(); fd.append("audio", new File(chunks, `voice.${mime.includes("webm") ? "webm" : "m4a"}`, { type: mime })); fd.append("durationSec", String((Date.now() - t0) / 1000)); const res = await api<{ text: string }>("/api/stt", { method: "POST", body: fd }); setText(t => (t ? t + " " : "") + res.text); ta.current?.focus(); }
        catch (e) { toast((e as Error).message, "error"); } finally { setTranscribing(false); }
      };
      r.start(); setRec(r);
    } catch { toast("Micro indisponible", "error"); }
  }
  return (
    <div className="mx-auto w-full max-w-[var(--reading-w)] px-3 pb-3 md:px-6 md:pb-5">
      <div onDragOver={e => e.preventDefault()} onDrop={e => { e.preventDefault(); void upload(e.dataTransfer.files); }} className={cn("rounded-2xl border bg-surface shadow-soft transition-colors focus-within:border-border-strong", streaming ? "border-border" : "border-border")}>
        {atts.length > 0 && <div className="flex flex-wrap gap-2 px-3 pt-3">{atts.map(a => <span key={a.id} className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2 py-1 text-[12px]">{a.mime.startsWith("image/") ? <ImageIcon className="h-3.5 w-3.5 text-accent" /> : <FileText className="h-3.5 w-3.5 text-accent-2" />}<span className="max-w-40 truncate">{a.filename}</span>{a.pages ? <span className="text-muted">{a.pages} p.</span> : null}<button onClick={() => setAtts(x => x.filter(y => y.id !== a.id))} className="text-muted hover:text-fg"><X className="h-3 w-3" /></button></span>)}</div>}
        <textarea ref={ta} value={text} onChange={e => setText(e.target.value)} onKeyDown={onKey} onPaste={e => { const files = Array.from(e.clipboardData.files); if (files.length) { e.preventDefault(); void upload(files); } }} rows={1} placeholder={placeholder ?? "Pose une question, colle un document, décris une tâche…"} className="block w-full resize-none bg-transparent px-4 pt-3.5 pb-2 text-[15px] leading-relaxed outline-none placeholder:text-muted" style={{ maxHeight: 260 }} />
        <div className="flex items-center gap-1 px-2 pb-2">
          <input ref={fileRef} type="file" multiple hidden accept="image/*,.pdf,.docx,.xlsx,.csv,.txt,.md,.json,audio/*" onChange={e => { if (e.target.files) void upload(e.target.files); e.target.value = ""; }} />
          <button type="button" onClick={() => fileRef.current?.click()} disabled={uploading} title="Joindre (images, PDF, DOCX, XLSX, CSV, TXT)" className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-fg-2 hover:bg-surface-2 hover:text-fg disabled:opacity-50"><Paperclip className={cn("h-4 w-4", uploading && "animate-pulse")} /></button>
          <ModelPicker compact value={modelId} mode={prefs.routingMode} onChange={v => setPrefs({ modelId: v.modelId, routingMode: v.mode })} />
          <button type="button" onClick={() => setPrefs({ toolsEnabled: !prefs.toolsEnabled })} title={prefs.toolsEnabled ? "Outils activés (web, Python, documents, images, mémoire)" : "Outils désactivés"} className={cn("inline-flex h-8 items-center gap-1 rounded-lg px-2 text-[12px] transition-colors", prefs.toolsEnabled ? "text-accent bg-accent/10" : "text-muted hover:bg-surface-2")}><Wrench className="h-3.5 w-3.5" /><span className="hidden sm:inline">Outils</span></button>
          <button type="button" onClick={() => setOpts(o => !o)} title="Options du modèle" className={cn("inline-flex h-8 w-8 items-center justify-center rounded-lg transition-colors", opts ? "bg-surface-2 text-fg" : "text-fg-2 hover:bg-surface-2 hover:text-fg")}><SlidersHorizontal className="h-4 w-4" /></button>
          <div className="flex-1" />
          <button type="button" onClick={toggleMic} disabled={transcribing} title="Dictée vocale" className={cn("inline-flex h-8 w-8 items-center justify-center rounded-lg transition-colors", rec ? "bg-danger/15 text-danger animate-pulse" : "text-fg-2 hover:bg-surface-2 hover:text-fg", transcribing && "opacity-50")}>{rec ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}</button>
          {streaming ? <button type="button" onClick={onStop} className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-fg text-bg hover:opacity-90" title="Arrêter"><Square className="h-3.5 w-3.5 fill-current" /></button>
            : <button type="button" onClick={submit} disabled={!text.trim() && !atts.length} className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-accent-ink transition-opacity hover:brightness-110 disabled:opacity-30" title="Envoyer"><ArrowUp className="h-4 w-4" /></button>}
        </div>
        {opts && <div className="flex flex-wrap items-center gap-4 border-t border-border px-4 py-2.5 text-[12px] text-fg-2">
          <label className="flex items-center gap-2">Effort {supportsEffort ? <select value={prefs.effort ?? ""} onChange={e => setPrefs({ effort: (e.target.value || undefined) as never })} className="input !w-auto !py-0.5 !px-2 text-[12px]"><option value="">par défaut</option><option value="low">faible</option><option value="medium">moyen</option><option value="high">élevé</option><option value="xhigh">très élevé</option><option value="max">maximal</option></select> : <span className="text-muted">non pris en charge par ce modèle</span>}</label>
          <label className="flex items-center gap-2">Afficher le raisonnement <Toggle checked={prefs.showReasoning} onChange={v => setPrefs({ showReasoning: v })} /></label>
          <label className="flex items-center gap-2">Entrée envoie <Toggle checked={prefs.sendWithEnter} onChange={v => setPrefs({ sendWithEnter: v })} /></label>
        </div>}
      </div>
      <div className="mt-1.5 hidden text-center text-[11px] text-muted md:block">Les réponses peuvent contenir des erreurs ; vérifie les faits importants. {model?.pricing?.input != null ? `${model.displayName} · ${model.pricing.input} $ / ${model.pricing.output} $ par M jetons` : ""}</div>
    </div>
  );
}