import { useEffect, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent } from 'react';
import { ArrowUp, Brain, Mic, MicOff, Paperclip, Square, X, FileText } from 'lucide-react';
import { api } from '@/lib/api';
import type { UploadedFile } from '@/lib/types';
import { cn } from '@/lib/cn';
import { fmtBytes } from '@/lib/format';
import { useUI } from '@/stores/ui';

interface SpeechRecognitionLike { start(): void; stop(): void; lang: string; interimResults: boolean; continuous: boolean; onresult: ((e: { results: ArrayLike<ArrayLike<{ transcript: string }>> }) => void) | null; onend: (() => void) | null }
declare global { interface Window { webkitSpeechRecognition?: new () => SpeechRecognitionLike; SpeechRecognition?: new () => SpeechRecognitionLike } }

export function Composer({ conversationId, streaming, onSend, onStop, deep, onToggleDeep, course, onCourseChange, courses, disabled }: {
  conversationId: string | null;
  streaming: boolean;
  onSend: (text: string, attachments: string[]) => void;
  onStop: () => void;
  deep: boolean;
  onToggleDeep: () => void;
  course: string;
  onCourseChange: (c: string) => void;
  courses: string[];
  disabled?: boolean;
}) {
  const [text, setText] = useState('');
  const [files, setFiles] = useState<UploadedFile[]>([]);
  const [uploading, setUploading] = useState(false);
  const [drag, setDrag] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [listening, setListening] = useState(false);
  const taRef = useRef<HTMLTextAreaElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);
  const recRef = useRef<SpeechRecognitionLike | null>(null);
  const speechOk = typeof window !== 'undefined' && !!(window.SpeechRecognition || window.webkitSpeechRecognition);
  const draft = useUI((st) => st.draft);
  const setDraft = useUI((st) => st.setDraft);
  useEffect(() => {
    if (draft) {
      setText(draft);
      setDraft('');
      setTimeout(() => { taRef.current?.focus(); taRef.current?.setSelectionRange(taRef.current.value.length, taRef.current.value.length); }, 50);
    }
  }, [draft, setDraft]);

  useEffect(() => {
    const ta = taRef.current;
    if (!ta) return;
    ta.style.height = 'auto';
    ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
  }, [text]);

  const upload = async (list: FileList | File[]) => {
    setError(null);
    setUploading(true);
    try {
      for (const f of Array.from(list)) {
        const fd = new FormData();
        fd.append('file', f);
        if (conversationId) fd.append('conversation_id', conversationId);
        const up = await api<UploadedFile>('/files', { method: 'POST', body: fd });
        setFiles((prev) => [...prev, up]);
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Téléversement impossible.');
    } finally {
      setUploading(false);
    }
  };

  const send = () => {
    const t = text.trim();
    if (!t || streaming || disabled) return;
    onSend(t, files.map((f) => f.file_id));
    setText('');
    setFiles([]);
  };

  const onKey = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
      e.preventDefault();
      send();
    }
  };

  const onDrop = (e: DragEvent) => {
    e.preventDefault();
    setDrag(false);
    if (e.dataTransfer.files?.length) void upload(e.dataTransfer.files);
  };

  const toggleMic = () => {
    if (listening) {
      recRef.current?.stop();
      setListening(false);
      return;
    }
    const Ctor = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!Ctor) return;
    const rec = new Ctor();
    rec.lang = 'fr-CA';
    rec.interimResults = false;
    rec.continuous = true;
    rec.onresult = (ev) => {
      const parts: string[] = [];
      for (let i = 0; i < ev.results.length; i++) parts.push(ev.results[i][0].transcript);
      setText((t) => (t ? t + ' ' : '') + parts.join(' ').trim());
    };
    rec.onend = () => setListening(false);
    recRef.current = rec;
    rec.start();
    setListening(true);
  };

  return (
    <div className="px-2.5 sm:px-6 pb-[calc(6px+var(--safe-bottom))] pt-2 bg-gradient-to-t from-[#f4f7f9] via-[#f4f7f9]/95 to-transparent">
      <div
        onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={onDrop}
        className={cn('mx-auto max-w-[900px] rounded-[22px] border bg-white shadow-float transition-colors focus-within:border-uqo-blue/60', drag ? 'border-uqo-green ring-2 ring-uqo-green/30' : 'border-neutral-line')}
      >
        {(files.length > 0 || error) && (
          <div className="flex flex-wrap gap-2 px-3 pt-3">
            {files.map((f) => (
              <span key={f.file_id} className="inline-flex items-center gap-1.5 rounded-lg bg-uqo-blue-light text-uqo-blue-dark text-xs px-2 py-1.5">
                <FileText size={13} /> <span className="max-w-[160px] truncate">{f.filename}</span> <span className="text-neutral-muted">{fmtBytes(f.size)}</span>
                <button onClick={() => setFiles((p) => p.filter((x) => x.file_id !== f.file_id))} aria-label="Retirer" className="h-6 w-6 inline-flex items-center justify-center rounded hover:bg-white/60"><X size={12} /></button>
              </span>
            ))}
            {error && <span className="text-xs text-semantic-error self-center">{error}</span>}
          </div>
        )}
        <textarea
          ref={taRef}
          value={text}
          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
          onKeyDown={onKey}
          rows={1}
          placeholder={disabled ? 'Connexion requise' : window.innerWidth < 640 ? 'Pose ta question au tuteur…' : 'Pose ta question… (Entrée pour envoyer, Maj+Entrée pour une nouvelle ligne)'}
          aria-label="Message"
          disabled={disabled}
          className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-[16px] leading-relaxed outline-none placeholder:text-neutral-muted/70 max-h-[200px] scroll-thin"
        />
        <div className="flex items-center gap-1 px-2 pb-2">
          <input ref={fileRef} type="file" multiple hidden accept=".xlsx,.xls,.csv,.pdf,.png,.jpg,.jpeg,.webp,.txt,.md,.docx,.json" onChange={(e) => e.target.files && upload(e.target.files)} />
          <button onClick={() => fileRef.current?.click()} disabled={uploading || disabled} className="h-11 w-11 inline-flex items-center justify-center rounded-xl text-neutral-muted hover:bg-neutral-surface" aria-label="Joindre un fichier" title="Joindre un fichier (xlsx, csv, pdf, image)">
            <Paperclip size={19} className={uploading ? 'animate-pulse' : ''} />
          </button>
          {speechOk && (
            <button onClick={toggleMic} disabled={disabled} className={cn('h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface', listening ? 'text-semantic-error' : 'text-neutral-muted')} aria-label="Dictée vocale">
              {listening ? <MicOff size={19} /> : <Mic size={19} />}
            </button>
          )}
          <select value={course} onChange={(e) => onCourseChange(e.target.value)} aria-label="Cours" disabled={!!conversationId}
            className="h-9 rounded-full border border-neutral-line bg-neutral-surface px-2.5 text-xs font-semibold text-uqo-blue-dark disabled:opacity-70">
            {courses.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
          <button onClick={onToggleDeep} className={cn('h-9 px-2.5 rounded-full text-xs font-semibold inline-flex items-center gap-1 border transition', deep ? 'bg-uqo-blue text-white border-uqo-blue' : 'border-neutral-line bg-neutral-surface text-neutral-muted hover:bg-white')} title="Réflexion approfondie : modèle plus puissant, plus lent" aria-pressed={deep}>
            <Brain size={14} /> <span className="hidden sm:inline">Réflexion approfondie</span><span className="sm:hidden">Approfondi</span>
          </button>
          <div className="flex-1" />
          {streaming ? (
            <button onClick={onStop} className="h-11 w-11 inline-flex items-center justify-center rounded-full bg-neutral-text text-white shadow-soft active:scale-95 transition" aria-label="Arrêter"><Square size={16} /></button>
          ) : (
            <button onClick={send} disabled={!text.trim() || disabled} className="h-11 w-11 inline-flex items-center justify-center rounded-full bg-uqo-gradient text-white shadow-soft active:scale-95 transition disabled:bg-none disabled:bg-neutral-line disabled:text-neutral-muted disabled:shadow-none" aria-label="Envoyer"><ArrowUp size={19} /></button>
          )}
        </div>
      </div>
      <p className="mx-auto max-w-[900px] mt-1.5 text-center text-[10.5px] leading-tight text-neutral-muted px-2"><span className="sm:hidden">Outil pédagogique — vérifie les calculs importants.</span><span className="hidden sm:inline">Outil pédagogique. UQO-Chat peut se tromper : vérifie les calculs importants. Ne constitue pas une évaluation professionnelle.</span></p>
    </div>
  );
}