import React from 'react';
import { motion } from 'framer-motion';
import { PaginationControls } from '../../components/PaginationControls';
import { useOutletContext } from 'react-router-dom';

import { useNavigate } from 'react-router-dom';

export const Tickets = () => {
  const { tickets, paginate, currentPage, setCurrentPage } = useOutletContext<any>();
  const navigate = useNavigate();

  return (
    <motion.div
      key="tickets"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="bg-white dark:bg-slate-900 rounded-[3rem] border border-slate-100 dark:border-slate-800 shadow-sm p-8 overflow-hidden"
    >
      <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-8">
        Tous les Tickets Support
      </h3>
      
      <div className="overflow-x-auto">
        <table className="w-full text-left">
          <thead>
            <tr className="border-b border-slate-100 dark:border-slate-800 text-[10px] font-black text-slate-400 uppercase tracking-widest">
              <th className="pb-4 px-4">Titre/Client</th>
              <th className="pb-4 px-4">Priorité</th>
              <th className="pb-4 px-4">Statut</th>
              <th className="pb-4 px-4">Date / User ID</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
            {paginate(tickets).map((ticket: any) => (
              <tr key={ticket.id} className="group hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors text-sm">
                <td className="py-6 px-4 font-bold">
                  <button onClick={() => navigate(`/admin/tickets/${ticket.id}`)} className="text-left hover:text-blue-600 transition-all">
                    {ticket.title}
                    <p className="text-[10px] text-slate-400 font-medium">UID: {ticket.userId}</p>
                  </button>
                </td>
                <td className="py-6 px-4">
                  <span className={`px-2 py-0.5 rounded-md text-[10px] font-bold ${
                    ticket.priority === 'Urgente' ? 'bg-red-100 text-red-600' : 
                    ticket.priority === 'Haute' ? 'bg-orange-100 text-orange-600' : 'bg-blue-100 text-blue-600'
                  }`}>
                    {ticket.priority}
                  </span>
                </td>
                <td className="py-6 px-4">
                  <span className="font-black text-[10px] text-blue-600 uppercase tracking-widest">{ticket.status}</span>
                </td>
                <td className="py-6 px-4 flex items-center justify-between">
                  <span className="text-xs font-medium text-slate-500">
                    {ticket.date?.seconds ? new Date(ticket.date.seconds * 1000).toLocaleDateString() : (ticket.date ? new Date(ticket.date).toLocaleDateString() : '')}
                  </span>
                  <button 
                    onClick={() => navigate(`/admin/tickets/${ticket.id}`)}
                    className="px-3 py-1.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 rounded-lg text-[9px] font-black uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all shadow-sm"
                  >
                    Répondre
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <PaginationControls 
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        totalItems={tickets.length} 
      />
    </motion.div>
  );
};