import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { MessageSquare, ArrowLeft, Send, Image as ImageIcon, X } from 'lucide-react';
import DOMPurify from 'dompurify';
import useSWR from 'swr';
import axios from 'axios';
import { postFetcher } from '../../lib/fetcher';
import { useAuth } from '../../contexts/AuthContext';

export const ClientTicketDetail = () => {
  const formatDate = (val: any) => {
    if (!val) return '';
    if (val.seconds) return new Date(val.seconds * 1000).toLocaleDateString();
    const d = new Date(val);
    return isNaN(d.getTime()) ? String(val) : d.toLocaleDateString();
  };
  const formatTime = (val: any) => {
    if (!val) return '';
    if (val.seconds) return new Date(val.seconds * 1000).toLocaleTimeString();
    const d = new Date(val);
    return isNaN(d.getTime()) ? String(val) : d.toLocaleTimeString();
  };
  const { id } = useParams();
  const navigate = useNavigate();
  const { currentUser } = useAuth();

  const [responseMessage, setResponseMessage] = useState('');
  const [attachedImages, setAttachedImages] = useState<string[]>([]);
  const [isSendingResponse, setIsSendingResponse] = useState(false);
  const [previewImage, setPreviewImage] = useState<string | null>(null);

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    Array.from(files).forEach(file => {
      const reader = new FileReader();
      reader.onloadend = () => {
        setAttachedImages(prev => [...prev, reader.result as string]);
      };
      reader.readAsDataURL(file);
    });
  };

  const removeImage = (index: number) => {
    setAttachedImages(prev => prev.filter((_, i) => i !== index));
  };

  const { data: ticketsData, mutate: mutateTickets, isLoading } = useSWR(
    currentUser ? ['/api/db/query', { collection: 'tickets', conditions: [{ field: 'userId', op: '==', value: currentUser.uid }] }] : null,
    postFetcher
  );

  const selectedTicket = ticketsData?.find((t: any) => t.id === id);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="w-12 h-12 border-4 border-blue-600/30 border-t-blue-600 rounded-full animate-spin" />
      </div>
    );
  }

  if (!selectedTicket) {
    return (
      <div className="bg-white dark:bg-slate-900 rounded-[3rem] p-12 text-center border border-slate-100 dark:border-slate-800">
        <h3 className="text-2xl font-black text-slate-900 dark:text-white">Ticket non trouvé</h3>
        <button onClick={() => navigate('/client/support')} className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-xl font-bold">Retour au support</button>
      </div>
    );
  }

  const handleSendResponse = async () => {
    const stripped = responseMessage.trim();
    if (!stripped && attachedImages.length === 0) return;
    setIsSendingResponse(true);
    try {
      let finalHtml = stripped.replace(/\n/g, '<br/>');
      attachedImages.forEach(img => {
        finalHtml += `<br/><img src="${img}" />`;
      });

      const newMessage = {
        sender: 'client',
        text: finalHtml,
        date: new Date().toISOString()
      };
      const currentMessages = selectedTicket.messages || (selectedTicket.messagesJson ? JSON.parse(selectedTicket.messagesJson) : []);
      const updatedMessages = [...currentMessages, newMessage];

      await axios.patch('/api/db', {
        collection: 'tickets',
        id: selectedTicket.id,
        data: {
          messages: updatedMessages,
          updatedAt: new Date().toISOString(),
          status: 'Ouvert'
        }
      });

      setResponseMessage('');
      setAttachedImages([]);
      mutateTickets();
    } catch (err: any) {
      console.error("Error sending response:", err);
      alert("Erreur lors de l'envoi de la réponse.");
    } finally {
      setIsSendingResponse(false);
    }
  };

  const messages = selectedTicket.messages || (selectedTicket.messagesJson ? JSON.parse(selectedTicket.messagesJson) : []);

  const handleContentClick = (e: React.MouseEvent<HTMLDivElement>) => {
    const target = e.target as HTMLElement;
    if (target.tagName === 'IMG') {
      setPreviewImage((target as HTMLImageElement).src);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white dark:bg-slate-900 rounded-[3rem] shadow-sm flex flex-col min-h-[80vh] border border-slate-100 dark:border-slate-800 overflow-hidden"
    >
      <div className="p-8 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-slate-50 dark:bg-slate-900/50">
        <div>
          <button 
            onClick={() => navigate('/client/support')}
            className="flex items-center gap-2 text-slate-400 hover:text-blue-600 font-bold mb-4 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" /> Retour au support
          </button>
          <h3 className="text-3xl font-black text-slate-900 dark:text-white uppercase tracking-tight">{selectedTicket.title}</h3>
          <div className="flex items-center gap-4 mt-4">
            <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
              {formatDate(selectedTicket.date)}
            </span>
            <span className={`px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest ${
              selectedTicket.status === 'Ouvert' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'
            }`}>
              {selectedTicket.status}
            </span>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-8 bg-white dark:bg-slate-950">
        <div className="max-w-4xl mx-auto space-y-8">
          {messages.map((msg: any, idx: number) => (
            <div key={idx} className="flex gap-6 pb-8 border-b border-slate-100 dark:border-slate-800 last:border-0">
              <div className={`w-12 h-12 rounded-2xl flex-shrink-0 flex items-center justify-center font-black text-lg text-white shadow-sm ${msg.sender === 'support' ? 'bg-blue-600' : 'bg-slate-800 dark:bg-slate-700'}`}>
                {msg.sender === 'support' ? 'SA' : 'MOI'}
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-black text-slate-900 dark:text-white">
                    {msg.sender === 'support' ? 'Support Agendivo' : 'Moi (Client)'}
                  </h4>
                  <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
                    {formatDate(msg.date)} à {formatTime(msg.date)}
                  </span>
                </div>
                <div 
                  onClick={handleContentClick}
                  className="text-base font-medium text-slate-700 dark:text-slate-300 leading-relaxed max-w-none [&_p]:mb-4 last:[&_p]:mb-0 [&_a]:text-blue-600 [&_a]:underline [&_ul]:list-disc [&_ul]:ml-6 [&_ol]:list-decimal [&_ol]:ml-6 [&_img]:max-h-32 [&_img]:w-auto [&_img]:cursor-pointer [&_img]:rounded-xl [&_img]:border-2 [&_img]:border-slate-100 dark:[&_img]:border-slate-800 [&_img]:shadow-sm [&_img]:transition-all hover:[&_img]:scale-[1.02] [&_img]:inline-block"
                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(msg.text) }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      {selectedTicket.status !== 'Fermé' && (
        <div className="p-8 border-t border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex justify-center">
          <div className="relative group w-full max-w-4xl">
            {attachedImages.length > 0 && (
              <div className="flex flex-wrap gap-4 mb-4">
                {attachedImages.map((img, i) => (
                  <div key={i} className="relative w-20 h-20 rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700">
                    <img src={img} alt="attached" className="w-full h-full object-cover" />
                    <button 
                      onClick={() => removeImage(i)}
                      className="absolute top-1 right-1 bg-slate-900/50 text-white rounded-full p-1 hover:bg-red-500 transition-colors"
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}
            <div className="bg-white dark:bg-slate-950 rounded-3xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm flex flex-col">
              <textarea 
                value={responseMessage}
                onChange={(e) => setResponseMessage(e.target.value.slice(0, 700))}
                placeholder="Tapez votre message ici..."
                className="w-full h-32 p-6 text-slate-900 dark:text-white bg-transparent resize-none focus:outline-none"
              />
              <div className="flex items-center justify-between px-6 py-3 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
                <span className={`text-xs font-bold ${responseMessage.length >= 700 ? 'text-red-500' : 'text-slate-400'}`}>
                  {responseMessage.length} / 700
                </span>
                <div className="flex items-center gap-3">
                  <label className="cursor-pointer p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-xl transition-colors">
                    <ImageIcon className="w-5 h-5" />
                    <input type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} />
                  </label>
                  <button 
                    onClick={handleSendResponse}
                    disabled={isSendingResponse || (!responseMessage.trim() && attachedImages.length === 0)}
                    className="px-6 py-2.5 bg-blue-600 text-white rounded-xl font-black text-sm hover:bg-blue-700 transition-all shadow-xl shadow-blue-600/20 disabled:opacity-50 flex items-center gap-2"
                  >
                    Envoyer <Send className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* IMAGE PREVIEW MODAL */}
      <AnimatePresence>
      {previewImage && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-900/90 backdrop-blur-sm" onClick={() => setPreviewImage(null)}>
          <motion.img 
            initial={{ opacity: 0, scale: 0.9 }} 
            animate={{ opacity: 1, scale: 1 }} 
            exit={{ opacity: 0, scale: 0.9 }}
            src={previewImage} 
            alt="Preview" 
            className="max-w-full max-h-[90vh] rounded-2xl shadow-2xl"
          />
          <button 
            onClick={() => setPreviewImage(null)}
            className="absolute top-6 right-6 p-3 bg-white/10 text-white hover:bg-white/20 rounded-full transition-colors"
          >
            <span className="sr-only">Fermer</span>
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
      )}
      </AnimatePresence>
    </motion.div>
  );
};