import { useState } from 'react';
import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp, Paperclip, AlertTriangle } from 'lucide-react';
import type { Message } from '@/lib/types';
import { StreamingText } from './streaming-text';
import { ToolCallTimeline } from './tool-call-timeline';
import { cn } from '@/lib/cn';
import { fmtDate } from '@/lib/format';

function TutorAvatar() {
  return (
    <span className="h-8 w-8 rounded-full bg-uqo-gradient items-center justify-center shrink-0 mt-1 hidden sm:inline-flex shadow-soft" aria-hidden="true">
      <img src="/uqo-logo-white.png" alt="" className="h-3 w-auto" />
    </span>
  );
}

export function MessageBubble({ msg, conversationId, initials, onRegenerate, onFeedback, isLast }: {
  msg: Message;
  conversationId: string;
  initials: string;
  onRegenerate?: () => void;
  onFeedback?: (fb: 'up' | 'down' | null) => void;
  isLast: boolean;
}) {
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    await navigator.clipboard.writeText(msg.content);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  if (msg.role === 'user') {
    return (
      <div className="flex justify-end gap-2 animate-fadein">
        <div className="max-w-[86%] sm:max-w-[72%]">
          <div className="rounded-[20px] rounded-br-lg bg-uqo-gradient text-white px-4 py-3 text-[15px] leading-relaxed whitespace-pre-wrap break-words shadow-soft">{msg.content}</div>
          <div className="mt-1 flex items-center justify-end gap-2 text-[11px] text-neutral-muted">
            {msg.attachments && msg.attachments.length > 0 && <span className="inline-flex items-center gap-1"><Paperclip size={11} /> {msg.attachments.length} fichier(s)</span>}
            <span>{fmtDate(msg.created_at)}</span>
          </div>
        </div>
        <span className="hidden sm:inline-flex h-8 w-8 rounded-full bg-uqo-blue-light text-uqo-blue-dark items-center justify-center text-xs font-semibold shrink-0 mt-1">{initials}</span>
      </div>
    );
  }

  const empty = !msg.content && !(msg.tool_calls && msg.tool_calls.length);
  return (
    <div className="flex gap-2 sm:gap-3 animate-fadein group">
      <TutorAvatar />
      <div className="min-w-0 flex-1 max-w-[900px]">
        <div className="sm:hidden mb-1 flex items-center gap-1.5 text-[11px] font-semibold text-uqo-blue-dark"><img src="/uqo-logo.png" alt="" className="h-2.5 w-auto" /> Tuteur</div>
        {msg.tool_calls && msg.tool_calls.length > 0 && <ToolCallTimeline calls={msg.tool_calls} conversationId={conversationId} />}
        <div className={cn('rounded-[20px] rounded-tl-lg bg-white border border-neutral-line/80 shadow-soft px-4 py-3.5 text-[15px]', empty && msg.streaming && 'inline-block')}>
          {empty && msg.streaming ? (
            <span className="inline-flex gap-1 items-center h-5" aria-label="Le tuteur réfléchit">
              <i className="h-2 w-2 rounded-full bg-uqo-blue/60 animate-bounce [animation-delay:-0.2s]" />
              <i className="h-2 w-2 rounded-full bg-uqo-blue/60 animate-bounce [animation-delay:-0.1s]" />
              <i className="h-2 w-2 rounded-full bg-uqo-blue/60 animate-bounce" />
            </span>
          ) : (
            <StreamingText text={msg.content} streaming={msg.streaming} conversationId={conversationId} />
          )}
          {msg.error && (
            <div className="mt-2 rounded-lg bg-red-50 text-semantic-error text-sm px-3 py-2 inline-flex items-center gap-2"><AlertTriangle size={16} /> {msg.error}</div>
          )}
        </div>
        {!msg.streaming && (
          <div className="mt-1 flex items-center gap-0.5 text-neutral-muted">
            <button onClick={copy} className="h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-white active:scale-95 transition" aria-label="Copier">{copied ? <Check size={15} className="text-uqo-green" /> : <Copy size={15} />}</button>
            {onFeedback && (
              <>
                <button onClick={() => onFeedback(msg.feedback === 'up' ? null : 'up')} className={cn('h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-white active:scale-95 transition', msg.feedback === 'up' && 'text-uqo-green')} aria-label="Réponse utile"><ThumbsUp size={15} /></button>
                <button onClick={() => onFeedback(msg.feedback === 'down' ? null : 'down')} className={cn('h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-white active:scale-95 transition', msg.feedback === 'down' && 'text-semantic-error')} aria-label="Réponse à améliorer"><ThumbsDown size={15} /></button>
              </>
            )}
            {isLast && onRegenerate && (
              <button onClick={onRegenerate} className="h-9 px-2 inline-flex items-center gap-1 rounded-lg hover:bg-white text-xs" aria-label="Régénérer"><RefreshCw size={14} /> Régénérer</button>
            )}
            <span className="ml-auto text-[11px] truncate">{msg.model ? msg.model.split('/').pop() : ''} · {fmtDate(msg.created_at)}</span>
          </div>
        )}
      </div>
    </div>
  );
}