import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Plus, X, Send, LifeBuoy, Image as ImageIcon } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';

import useSWR from 'swr';
import axios from 'axios';
import { postFetcher } from '../../lib/fetcher';
import { useNavigate } from 'react-router-dom';
import { PaginationControls } from '../../components/PaginationControls';

export const Support = () => {
  const { currentUser } = useAuth();
  const [tickets, setTickets] = useState<any[]>([]);
  const [isTicketModalOpen, setIsTicketModalOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const ITEMS_PER_PAGE = 5;

  // New ticket form
  const [ticketTitle, setTicketTitle] = useState('');
  const [ticketPriority, setTicketPriority] = useState('Normale');
  const [ticketContent, setTicketContent] = useState('');
  const [attachedImages, setAttachedImages] = useState<string[]>([]);
  const [isCreatingTicket, setIsCreatingTicket] = useState(false);

  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 } = useSWR(
    currentUser ? ['/api/db/query', { collection: 'tickets', conditions: [{ field: 'userId', op: '==', value: currentUser.uid }] }] : null,
    postFetcher
  );

  const navigate = useNavigate();

  const totalItems = tickets.length;
  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);

  useEffect(() => {
    if (currentPage > totalPages && totalPages > 0) {
      setCurrentPage(totalPages);
    }
  }, [totalPages, currentPage]);

  const paginatedTickets = tickets.slice(
    (currentPage - 1) * ITEMS_PER_PAGE,
    currentPage * ITEMS_PER_PAGE
  );

  useEffect(() => {
    if (ticketsData) {
      const fetchedTickets = [...ticketsData];
      setTickets(fetchedTickets.sort((a, b) => {
        const dateA = a.updatedAt?.seconds || 0;
        const dateB = b.updatedAt?.seconds || 0;
        return dateB - dateA;
      }));
    }
  }, [ticketsData]);

  const handleCreateTicket = async (e: React.FormEvent) => {
    e.preventDefault();
    const strippedContent = ticketContent.trim();
    if (!currentUser || !ticketTitle.trim() || (!strippedContent && attachedImages.length === 0)) return;
    setIsCreatingTicket(true);

    let finalHtml = strippedContent.replace(/\n/g, '<br/>');
    attachedImages.forEach(img => {
      finalHtml += `<br/><img src="${img}" />`;
    });

    const ticketId = `TKT-${Math.floor(Math.random() * 10000)}`;
    const newTicket = {
      id: ticketId,
      userId: currentUser.uid,
      title: ticketTitle,
      priority: ticketPriority,
      status: 'Ouvert',
      date: new Date().toLocaleDateString('fr-FR'),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      messages: [{ sender: 'client', text: finalHtml, date: new Date().toISOString() }]
    };

    try {
      await axios.post('/api/db', { collection: 'tickets', data: newTicket });
      mutateTickets();
    } catch (error) {
      console.error("Error creating ticket:", error);
      // Optimization: handle permissions or fallback
    }

    setIsTicketModalOpen(false);
    setTicketTitle('');
    setTicketContent('');
    setTicketPriority('Normale');
    setAttachedImages([]);
    setIsCreatingTicket(false);
  };

  return (
    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
        <div className="flex items-center gap-4">
          <div className="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-2xl">
            <LifeBuoy className="w-6 h-6 text-blue-600" />
          </div>
          <div>
            <h2 className="text-2xl font-black text-slate-900 dark:text-white">Tickets Support</h2>
            <p className="text-slate-500 font-medium">Une question ou un problème ? Notre équipe est là.</p>
          </div>
        </div>
        <button
          onClick={() => setIsTicketModalOpen(true)}
          className="px-6 py-3 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold rounded-2xl flex items-center gap-2 hover:scale-[1.02] transition-transform"
        >
          <Plus className="w-5 h-5" /> Créer un ticket
        </button>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-slate-200 dark:border-slate-800">
              <th className="pb-4 font-bold text-slate-400 text-sm uppercase tracking-widest w-1/3">Titre</th>
              <th className="pb-4 font-bold text-slate-400 text-sm uppercase tracking-widest hidden md:table-cell">ID</th>
              <th className="pb-4 font-bold text-slate-400 text-sm uppercase tracking-widest">Date</th>
              <th className="pb-4 font-bold text-slate-400 text-sm uppercase tracking-widest">Priorité</th>
              <th className="pb-4 font-bold text-slate-400 text-sm uppercase tracking-widest">Statut</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
            {(paginatedTickets || []).map((t: any) => (
              <tr key={t.id} onClick={() => navigate(`/client/support/${t.id}`)} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer">
                <td className="py-5 font-bold text-slate-900 dark:text-white pr-4">{t.title}</td>
                <td className="py-5 font-mono text-sm text-slate-500 hidden md:table-cell">{t.id}</td>
                <td className="py-5 font-medium text-slate-700 dark:text-slate-300">
                  {t.date?.seconds ? new Date(t.date.seconds * 1000).toLocaleDateString() : (t.date ? new Date(t.date).toLocaleDateString() : '')}
                </td>
                <td className="py-5">
                  <span className={`px-2 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ${t.priority === 'Urgente' ? 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400'
                      : t.priority === 'Haute' ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
                        : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
                    }`}>{t.priority}</span>
                </td>
                <td className="py-5">
                  <span className={`px-2 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ${t.status === 'Ouvert' ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
                      : t.status === 'Résolu' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400'
                        : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
                    }`}>{t.status}</span>
                </td>
              </tr>
            ))}
            {tickets.length === 0 && (
              <tr>
                <td colSpan={5} className="py-8 text-center text-slate-500">Aucun ticket ouvert.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <PaginationControls
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        totalItems={totalItems}
        itemsPerPage={ITEMS_PER_PAGE}
      />



      {/* CREATE TICKET MODAL */}
      <AnimatePresence>
        {isTicketModalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setIsTicketModalOpen(false)} className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" />
            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }}
              className="relative w-full max-w-2xl bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl p-8 lg:p-10"
            >
              <div className="flex justify-between items-center mb-8">
                <h2 className="text-2xl font-black text-slate-900 dark:text-white">Nouveau Ticket de Support</h2>
                <button onClick={() => setIsTicketModalOpen(false)} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-colors">
                  <X className="w-5 h-5 text-slate-500" />
                </button>
              </div>

              <form onSubmit={handleCreateTicket} className="space-y-6">
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-2">Titre du problème</label>
                  <input type="text" value={ticketTitle} onChange={(e) => setTicketTitle(e.target.value)} required placeholder="Ex: Impossible de lier mon contrat..." className="w-full bg-slate-50 dark:bg-slate-950 border-2 border-slate-100 dark:border-slate-800 rounded-2xl px-5 py-3 focus:outline-none focus:border-blue-500 font-medium text-slate-900 dark:text-white" />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-2">Priorité</label>
                  <select value={ticketPriority} onChange={(e) => setTicketPriority(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-950 border-2 border-slate-100 dark:border-slate-800 rounded-2xl px-5 py-3 focus:outline-none focus:border-blue-500 font-medium text-slate-900 dark:text-white appearance-none cursor-pointer">
                    <option value="Basse">Basse</option>
                    <option value="Normale">Normale</option>
                    <option value="Haute">Haute</option>
                    <option value="Urgente">Urgente</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest pl-1 mb-2">Message Description</label>
                  {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 type="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-2xl border-2 border-slate-100 dark:border-slate-800 overflow-hidden flex flex-col focus-within:border-blue-500 transition-colors">
                    <textarea
                      value={ticketContent}
                      onChange={(e) => setTicketContent(e.target.value.slice(0, 700))}
                      placeholder="Veuillez décrire votre problème en détail..."
                      className="w-full h-32 p-5 font-medium text-slate-900 dark:text-white bg-transparent resize-none focus:outline-none"
                    />
                    <div className="flex items-center justify-between px-5 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 ${ticketContent.length >= 700 ? 'text-red-500' : 'text-slate-400'}`}>
                        {ticketContent.length} / 700
                      </span>
                      <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 flex items-center gap-2">
                        <ImageIcon className="w-5 h-5" />
                        <span className="text-xs font-bold uppercase tracking-widest hidden sm:inline-block">Joindre</span>
                        <input type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} />
                      </label>
                    </div>
                  </div>
                </div>
                <div className="pt-2">
                  <button
                    type="submit"
                    disabled={isCreatingTicket || (!ticketContent.trim() && attachedImages.length === 0)}
                    className="w-full py-4 bg-blue-600 text-white rounded-2xl font-black hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all flex justify-center items-center gap-2 disabled:opacity-50"
                  >
                    Envoyer <Send className="w-4 h-4" />
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};