import { API_BASE_URL } from '../../lib/config';
import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  History, 
  Search, 
  Calendar, 
  MapPin, 
  CheckCircle2, 
  XCircle, 
  Clock, 
  Download,
  Filter,
  AlertTriangle,
  ChevronRight,
  User,
  Heart,
  FileText,
  X,
  Building2,
  Users,
  Wallet,
  Ticket,
  Layers
} from 'lucide-react';
import { cn } from '../../lib/utils';
import { format } from 'date-fns';
import { Pagination } from './Pagination';

interface Event {
  id: number;
  title: string;
  startDate: string;
  endDate: string;
  type: string;
  status: string;
  department: string;
  location: string;
  budget: number;
  conflictMessage?: string;
  rejectionReason?: string;
  institution: string;
  category: string;
  academicYears: string[];
  targetDepartments?: string[];
  targetedSections?: string[];
  proposer?: {
    fullName: string;
    email?: string;
    department?: string;
    role?: string;
  };
  description?: string;
  sponsors?: string[];
  hasRegistrationFee: boolean;
  registrationFee: number;
  maxParticipants?: number | null;
  requirements?: string[];
  refreshment_expense?: number;
  transportation_expense?: number;
  session_coverage_fee?: number;
  total_expense?: number;
  paymentLink?: string;
  isClubEvent?: boolean;
  eventScope?: string;
}

export const EventHistory: React.FC = () => {
  const [events, setEvents] = useState<Event[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  useEffect(() => {
    fetch(API_BASE_URL + '/api/events')
      .then(res => res.json())
      .then(data => setEvents(data))
      .catch(err => console.error('History fetch failed:', err));
  }, []);

  const getStatusStyle = (status: string, hasConflict: boolean) => {
    if (hasConflict && status !== 'APPROVED') return { 
      bg: 'bg-red-50', 
      text: 'text-red-600', 
      border: 'border-red-100',
      icon: AlertTriangle,
      label: 'CONFLICT'
    };

    switch (status) {
      case 'APPROVED': return { bg: 'bg-emerald-50', text: 'text-emerald-600', border: 'border-emerald-100', icon: CheckCircle2, label: 'APPROVED' };
      case 'REQUESTED': return { bg: 'bg-blue-50', text: 'text-blue-600', border: 'border-blue-100', icon: Clock, label: 'REQUESTED' };
      case 'PENDING_PR': return { bg: 'bg-purple-50', text: 'text-purple-600', border: 'border-purple-100', icon: ShieldCheck, label: 'PENDING PRINCIPAL' };
      case 'HOD_REJECTED':
      case 'PRINCIPAL_REJECTED': return { bg: 'bg-red-50', text: 'text-red-600', border: 'border-red-100', icon: XCircle, label: 'REJECTED' };
      default: return { bg: 'bg-slate-50', text: 'text-slate-600', border: 'border-slate-100', icon: Clock, label: status };
    }
  };

  const filteredEvents = events
    .filter(e => {
      const matchesSearch = e.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                           e.department.toLowerCase().includes(searchQuery.toLowerCase());
      
      if (statusFilter === 'ALL') return matchesSearch;
      if (statusFilter === 'PENDING') return matchesSearch && (e.status === 'REQUESTED' || e.status === 'PENDING_PR');
      if (statusFilter === 'REJECTED') return matchesSearch && e.status.includes('REJECTED');
      return matchesSearch && e.status === statusFilter;
    })
    .sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());

  const currentEvents = filteredEvents.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div className="space-y-8 pb-10">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div className="flex items-center gap-5">
          <div className="w-12 h-12 bg-brand-navy rounded-2xl flex items-center justify-center text-white premium-shadow">
            <History className="w-6 h-6" />
          </div>
          <div>
            <h2 className="text-2xl font-black text-text-dark tracking-tight">Institutional Event History</h2>
            <p className="text-[10px] font-black uppercase tracking-widest text-text-muted">Audit-ready comprehensive event ledger</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest text-text-muted hover:bg-slate-50 transition-all">
            <Download className="w-4 h-4" />
            Export CSV
          </button>
        </div>
      </div>

      {/* Filters Bar */}
      <div className="flex flex-col lg:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
          <input 
            type="text" 
            placeholder="Search by event title or department..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full h-16 pl-16 pr-8 bg-white border border-slate-100 rounded-3xl text-sm font-bold text-text-dark focus:outline-none focus:ring-4 focus:ring-brand-indigo/5 focus:border-brand-indigo transition-all"
          />
        </div>
        
        <div className="flex items-center gap-2 bg-white p-2 rounded-3xl border border-slate-100">
          {['ALL', 'APPROVED', 'PENDING', 'REJECTED'].map(status => (
            <button
              key={status}
              onClick={() => setStatusFilter(status)}
              className={cn(
                "px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all",
                statusFilter === status 
                  ? "bg-brand-indigo text-white premium-shadow-sm" 
                  : "text-text-muted hover:bg-slate-50"
              )}
            >
              {status}
            </button>
          ))}
        </div>
      </div>

      {/* Events Ledger */}
      <div className="bg-white rounded-[2.5rem] border border-slate-100 premium-shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr className="border-b border-slate-50">
                <th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Event Details</th>
                <th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Logistics</th>
                <th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Status</th>
                <th className="px-8 py-6 text-right text-[10px] font-black uppercase tracking-widest text-text-muted">Budget</th>
                <th className="px-8 py-6 text-right text-[10px] font-black uppercase tracking-widest text-text-muted"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              <AnimatePresence mode="popLayout">
                {currentEvents.map((event, idx) => {
                  const statusStyle = getStatusStyle(event.status, !!event.conflictMessage);
                  const StatusIcon = statusStyle.icon;

                  return (
                    <motion.tr 
                      key={event.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: idx * 0.03 }}
                      onClick={() => setSelectedEvent(event)}
                      className="group hover:bg-slate-50/50 transition-colors cursor-pointer"
                    >
                      <td className="px-8 py-6">
                        <div className="flex items-center gap-4">
                          <div className={cn(
                            "w-10 h-10 rounded-xl flex items-center justify-center font-black text-[10px]",
                            event.conflictMessage ? "bg-red-50 text-red-500" : "bg-brand-indigo/5 text-brand-indigo"
                          )}>
                            {event.department?.slice(0, 3).toUpperCase()}
                          </div>
                          <div>
                            <p className="text-sm font-black text-text-dark group-hover:text-brand-indigo transition-colors">{event.title}</p>
                            <p className="text-[10px] font-bold text-text-muted uppercase tracking-widest mt-0.5">{event.type}</p>
                          </div>
                        </div>
                      </td>
                      <td className="px-8 py-6">
                        <div className="space-y-2">
                          <div className="flex items-center gap-2 text-text-muted">
                            <Calendar className="w-3.5 h-3.5" />
                            <span className="text-[10px] font-bold">{format(new Date(event.startDate), 'MMM d, yyyy')}</span>
                          </div>
                          <div className="flex items-center gap-2 text-text-muted">
                            <MapPin className="w-3.5 h-3.5" />
                            <span className="text-[10px] font-bold">{event.location}</span>
                          </div>
                        </div>
                      </td>
                      <td className="px-8 py-6">
                        <div className={cn(
                          "inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[9px] font-black uppercase tracking-widest",
                          statusStyle.bg, statusStyle.text, statusStyle.border
                        )}>
                          <StatusIcon className="w-3.5 h-3.5" />
                          {statusStyle.label}
                        </div>
                      </td>
                      <td className="px-8 py-6 text-right">
                        <span className="text-sm font-black text-text-dark">₹{event.budget?.toLocaleString() || '0'}</span>
                      </td>
                      <td className="px-8 py-6 text-right">
                        <button className="p-2 hover:bg-white hover:premium-shadow-sm rounded-lg transition-all text-slate-300 group-hover:text-brand-indigo">
                          <ChevronRight className="w-5 h-5" />
                        </button>
                      </td>
                    </motion.tr>
                  );
                })}
              </AnimatePresence>
            </tbody>
          </table>
        </div>
        
        <Pagination 
          currentPage={currentPage}
          totalItems={filteredEvents.length}
          itemsPerPage={itemsPerPage}
          onPageChange={setCurrentPage}
          onItemsPerPageChange={(val) => {
            setItemsPerPage(val);
            setCurrentPage(1);
          }}
          itemsPerPageOptions={[5, 10, 20, 50]}
        />
      </div>

      {/* Detail Modal */}
      <AnimatePresence>
        {selectedEvent && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setSelectedEvent(null)}
              className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative w-full max-w-2xl bg-white rounded-[2.5rem] premium-shadow overflow-hidden max-h-[90vh] overflow-y-auto"
            >
              <div className="p-8 bg-brand-navy text-white flex justify-between items-start">
                <div>
                  <div className="flex items-center gap-2 mb-2">
                    <span className="text-[10px] font-black uppercase tracking-[0.2em] text-white/60">Event History</span>
                    <span className="w-1 h-1 bg-white/30 rounded-full" />
                    <span className="text-[10px] font-black uppercase tracking-[0.2em] text-white/60">{selectedEvent.institution}</span>
                  </div>
                  <h3 className="text-2xl font-black tracking-tight">{selectedEvent.title}</h3>
                </div>
                <button 
                  onClick={() => setSelectedEvent(null)}
                  className="p-2 hover:bg-white/10 rounded-xl transition-all"
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              <div className="p-8 space-y-8">
                {/* Description */}
                {selectedEvent.description && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <FileText className="w-3.5 h-3.5" />
                      Description
                    </div>
                    <p className="text-sm font-medium text-text-dark leading-relaxed bg-slate-50 p-4 rounded-2xl border border-slate-100">
                      {selectedEvent.description}
                    </p>
                  </div>
                )}

                {/* Event Classification */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <FileText className="w-3.5 h-3.5" />
                      Event Type
                    </div>
                    <p className="text-sm font-bold text-text-dark">{selectedEvent.type || 'N/A'}</p>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Layers className="w-3.5 h-3.5" />
                      Hub Category
                    </div>
                    <p className="text-sm font-bold text-text-dark capitalize">
                      {selectedEvent.category === 'TECHNICAL' ? 'Technical' 
                        : selectedEvent.category === 'NON-TECHNICAL' ? 'Non-Technical'
                        : selectedEvent.category === 'WORKSHOP' ? 'Workshop'
                        : selectedEvent.category === 'CENTRE-ACTIVITY' ? 'Centre Based Activity'
                        : selectedEvent.category || 'N/A'}
                    </p>
                  </div>
                </div>

                {/* Dates */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Calendar className="w-3.5 h-3.5" />
                      Start Date &amp; Time
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {selectedEvent.startDate 
                        ? new Date(selectedEvent.startDate).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }) + ' IST'
                        : 'N/A'}
                    </p>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Calendar className="w-3.5 h-3.5" />
                      End Date &amp; Time
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {selectedEvent.endDate 
                        ? new Date(selectedEvent.endDate).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }) + ' IST'
                        : 'N/A'}
                    </p>
                  </div>
                </div>

                {/* Location & Capacity */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <MapPin className="w-3.5 h-3.5" />
                      Location
                    </div>
                    <p className="text-sm font-bold text-text-dark">{selectedEvent.location || 'N/A'}</p>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Users className="w-3.5 h-3.5" />
                      Total Capacity
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {selectedEvent.maxParticipants ? selectedEvent.maxParticipants.toLocaleString() : 'Unlimited'}
                    </p>
                  </div>
                </div>

                {/* Scope */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Building2 className="w-3.5 h-3.5" />
                      Event Scope
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {selectedEvent.department === 'Institutional' ? 'Institutional Event' : 'Departmental Event'}
                    </p>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Building2 className="w-3.5 h-3.5" />
                      Proposing Department
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {(selectedEvent.proposer?.department && selectedEvent.proposer?.department !== 'N/A')
                        ? selectedEvent.proposer.department
                        : (selectedEvent.proposer?.role === 'ADMIN' ? 'System Administrator' : selectedEvent.department) 
                        || 'N/A'}
                    </p>
                  </div>
                </div>

                {/* Target Departments & Batches */}
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                    <Users className="w-3.5 h-3.5" />
                    Target Audience
                  </div>
                  <div className="grid grid-cols-3 gap-3">
                    <div className="p-3 bg-slate-50 rounded-xl">
                      <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Departments</p>
                      <p className="text-xs font-bold text-text-dark">
                        {(selectedEvent.targetDepartments && selectedEvent.targetDepartments.length > 0)
                          ? selectedEvent.targetDepartments.join(', ')
                          : selectedEvent.department || 'N/A'}
                      </p>
                    </div>
                    <div className="p-3 bg-slate-50 rounded-xl">
                      <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Batches</p>
                      <p className="text-xs font-bold text-text-dark">
                        {selectedEvent.academicYears?.length > 0 ? selectedEvent.academicYears.join(', ') : 'All'}
                      </p>
                    </div>
                    <div className="p-3 bg-slate-50 rounded-xl">
                      <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Sections</p>
                      <p className="text-xs font-bold text-text-dark">
                        {(selectedEvent.targetedSections && selectedEvent.targetedSections.length > 0)
                          ? selectedEvent.targetedSections.join(', ')
                          : 'All Sections'}
                      </p>
                    </div>
                  </div>
                </div>

                {/* Sponsors */}
                {selectedEvent.sponsors && selectedEvent.sponsors.length > 0 && (
                  <div className="space-y-3">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Heart className="w-3.5 h-3.5 text-brand-indigo" />
                      Event Sponsors
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {selectedEvent.sponsors.map((sponsor, idx) => (
                        <span key={idx} className="px-3 py-1 bg-brand-glow text-brand-indigo rounded-lg text-[10px] font-black uppercase tracking-widest border border-brand-indigo/10">
                          {sponsor}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {/* Event Amenities / Requirements */}
                {selectedEvent.requirements && selectedEvent.requirements.length > 0 && (
                  <div className="space-y-3">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
                      Event Amenities
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {selectedEvent.requirements.map((req, idx) => (
                        <span key={idx} className="px-3 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-[10px] font-black uppercase tracking-widest border border-emerald-100">
                          {req}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {/* Financial Details */}
                <div className="space-y-3 border-t border-slate-50 pt-4">
                  <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                    <Wallet className="w-3.5 h-3.5" />
                    Financial Details
                  </div>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                    <div className="p-3 bg-slate-50 rounded-xl">
                      <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Budget</p>
                      <p className="text-sm font-black text-text-dark">₹{selectedEvent.budget?.toLocaleString() || '0'}</p>
                    </div>
                    {(selectedEvent.refreshment_expense || 0) > 0 && (
                      <div className="p-3 bg-slate-50 rounded-xl">
                        <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Refreshments</p>
                        <p className="text-sm font-black text-text-dark">₹{selectedEvent.refreshment_expense?.toLocaleString()}</p>
                      </div>
                    )}
                    {(selectedEvent.transportation_expense || 0) > 0 && (
                      <div className="p-3 bg-slate-50 rounded-xl">
                        <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Transportation</p>
                        <p className="text-sm font-black text-text-dark">₹{selectedEvent.transportation_expense?.toLocaleString()}</p>
                      </div>
                    )}
                    {(selectedEvent.session_coverage_fee || 0) > 0 && (
                      <div className="p-3 bg-slate-50 rounded-xl">
                        <p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Session Coverage</p>
                        <p className="text-sm font-black text-text-dark">₹{selectedEvent.session_coverage_fee?.toLocaleString()}</p>
                      </div>
                    )}
                    <div className="p-3 bg-brand-navy rounded-xl">
                      <p className="text-[9px] font-black uppercase tracking-widest text-white/60 mb-1">Total Expense</p>
                      <p className="text-sm font-black text-white">₹{(selectedEvent.total_expense || selectedEvent.budget || 0).toLocaleString()}</p>
                    </div>
                  </div>
                </div>

                {/* Registration / Free Event */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Ticket className="w-3.5 h-3.5" />
                      Registration
                    </div>
                    <p className="text-sm font-bold text-text-dark">
                      {selectedEvent.hasRegistrationFee
                        ? `Paid — ₹${selectedEvent.registrationFee?.toLocaleString()}`
                        : 'Free Event'}
                    </p>
                    {selectedEvent.hasRegistrationFee && selectedEvent.paymentLink && (
                      <a href={selectedEvent.paymentLink} target="_blank" rel="noopener noreferrer" className="text-[10px] text-brand-indigo font-bold underline">Payment Link ↗</a>
                    )}
                  </div>
                  <div className="p-4 bg-slate-50 rounded-2xl space-y-1">
                    <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
                      <Ticket className="w-3.5 h-3.5" />
                      Status
                    </div>
                    <p className="text-xs font-black text-brand-indigo uppercase">{selectedEvent.status}</p>
                  </div>
                </div>

                {selectedEvent.rejectionReason && (
                  <div className="p-4 bg-red-50 border border-red-100 rounded-2xl">
                    <p className="text-[10px] font-black uppercase text-red-500 mb-1">Rejection Reason</p>
                    <p className="text-xs font-bold text-red-700">{selectedEvent.rejectionReason}</p>
                  </div>
                )}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
};

const ShieldCheck = (props: any) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
    <path d="m9 12 2 2 4-4" />
  </svg>
);