import React, { useState, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import { generateEventDetailsPDF } from '../utils/pdfGenerator';
import CreateEventForm from './CreateEventForm';
import AdminStatusTrackerView from './AdminStatusTrackerView';
import AdminEventStatusView from './AdminEventStatusView';
import FacultyParticipantsView from './FacultyParticipantsView';
import FacultyAttendanceView from './FacultyAttendanceView';
import FacultyProfileView from './FacultyProfileView';
import CreateSpecialEventsView from './CreateSpecialEventsView';
import CreateDomainView from './CreateDomainView';
import { Event, Announcement } from '../types';

interface AdminLandingPageProps {
  onBack: () => void;
  onAddEvent: (event: Event) => void;
  onUpdateEvent: (event: Event) => void;
  onDeleteEvent: (id: string) => void;
  events: Event[];
  announcements: Announcement[];
  onAddAnnouncement: (ann: Announcement) => Promise<void>;
  onUpdateAnnouncement?: (ann: Announcement) => Promise<void>;
  onDeleteAnnouncement: (id: string) => Promise<void>;
  studentDocuments: Record<string, string>;
  onSupabaseError?: () => void;
  onApproveCertificate: (regId: string) => Promise<void>;
  localRegistrations?: any[];
  onViewStudentHub?: () => void;
  currentUserName?: string;
  currentUserDept?: string;
  currentUserEmail?: string;
  currentUserPhone?: string;
  currentUserPhoto?: string;
  currentUserId?: string;
  domains?: any[];
  currentUserFacultyRole?: string;
}

const SuccessPopup: React.FC<{ onClose: () => void }> = ({ onClose }) => (
  <div className="fixed inset-0 z-[10001] flex items-center justify-center p-6 bg-black/80 backdrop-blur-xl animate-in fade-in duration-300">
    <div className="bg-white rounded-[3rem] w-full max-w-sm p-12 shadow-2xl flex flex-col items-center text-center animate-in zoom-in-95 duration-500">
      <div className="w-24 h-24 bg-emerald-100 text-emerald-500 rounded-full flex items-center justify-center text-4xl mb-8 shadow-inner">
        <i className="fas fa-check"></i>
      </div>
      <h3 className="text-2xl font-black text-slate-900 mb-2 uppercase tracking-tight">Success!</h3>
      <p className="text-gray-500 font-bold text-[10px] uppercase tracking-[0.3em] mb-10">Event successfully created</p>
      <button
        onClick={onClose}
        className="w-full py-5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-[11px] hover:bg-black transition-all shadow-xl shadow-slate-200 active:scale-95"
      >
        View Creations
      </button>
    </div>
  </div>
);

const Toast: React.FC<{ message: string; type: 'success' | 'delete'; onClose: () => void }> = ({ message, type, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return createPortal(
    <div className={`fixed bottom-10 left-1/2 -translate-x-1/2 z-[10000] ${type === 'delete' ? 'bg-rose-600' : 'bg-emerald-600'} text-white px-8 py-4 rounded-2xl shadow-2xl font-black text-xs uppercase tracking-widest flex items-center gap-3 animate-in slide-in-from-bottom-10`}>
      <i className={`fas ${type === 'delete' ? 'fa-trash-alt' : 'fa-check-circle'}`}></i>
      {message}
    </div>,
    document.body
  );
};

const AdminLandingPage: React.FC<AdminLandingPageProps> = ({
  onBack,
  onAddEvent,
  onUpdateEvent,
  onDeleteEvent,
  events,
  announcements,
  onAddAnnouncement,
  onUpdateAnnouncement,
  onDeleteAnnouncement,
  studentDocuments,
  onSupabaseError,
  onApproveCertificate,
  localRegistrations = [],
  onViewStudentHub,
  currentUserName,
  currentUserDept,
  currentUserEmail,
  currentUserPhone,
  currentUserPhoto,
  currentUserId,
  domains = [],
  currentUserFacultyRole
}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [view, setView] = useState<'OVERVIEW' | 'CREATE' | 'CREATIONS' | 'EDIT' | 'STATUS_TRACKER' | 'EVENT_STATUS' | 'PARTICIPANTS' | 'ATTENDANCE' | 'PROFILE' | 'VERIFICATION'>('OVERVIEW');
  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
  const [inspectedEvent, setInspectedEvent] = useState<Event | null>(null);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'delete' } | null>(null);
  const [showSuccessPopup, setShowSuccessPopup] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [selectionType, setSelectionType] = useState<'NONE' | 'NORMAL' | 'SPECIAL' | 'DOMAIN'>('NONE');
  const [isDownloading, setIsDownloading] = useState(false);

  const downloadPDF = async () => {
    if (!inspectedEvent) return;
    setIsDownloading(true);
    try {
      generateEventDetailsPDF(inspectedEvent);
    } catch (error) {
      console.error("Failed to generate PDF", error);
      alert("Failed to download PDF. Please try again.");
    } finally {
      setIsDownloading(false);
    }
  };

  useEffect(() => {
    if (view !== 'CREATE' && view !== 'EDIT') {
      setSelectionType('NONE');
    }
  }, [view]);

  useEffect(() => {
    setIsLoaded(true);
    const mainElement = document.querySelector('main');
    if (!mainElement) return;
    
    const handleScroll = () => {
      setIsScrolled(mainElement.scrollTop > 20);
    };
    mainElement.addEventListener('scroll', handleScroll);
    return () => {
      mainElement.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const handleCloseToast = useCallback(() => setToast(null), []);

  const handleEditClick = (event: Event) => {
    setSelectedEvent(event);
    setView('EDIT');
  };

  const handleDelete = (id: string, title: string) => {
    onDeleteEvent(id);
    setToast({ message: `"${title}" has been deleted.`, type: 'delete' });
  };

  const handleCreateSuccess = (event: Event) => {
    if (view === 'EDIT') {
      onUpdateEvent(event);
      setToast({ message: "Event updated successfully!", type: 'success' });
      setView('CREATIONS');
    } else {
      onAddEvent(event);
      setShowSuccessPopup(true);
    }
    setSelectedEvent(null);
  };

  const closeSuccessPopup = () => {
    setShowSuccessPopup(false);
    setView('CREATIONS');
  };

  const navLinks = [
    { label: 'HOME', active: view === 'OVERVIEW', onClick: () => setView('OVERVIEW') },
    { label: 'CREATE EVENTS', active: view === 'CREATE' || view === 'EDIT', onClick: () => { setSelectedEvent(null); setView('CREATE'); } },
    { label: 'CREATIONS', active: view === 'CREATIONS', onClick: () => setView('CREATIONS') },
    ...(currentUserFacultyRole === 'HOD' ? [
      { label: 'VERIFICATION', active: view === 'VERIFICATION', onClick: () => setView('VERIFICATION') }
    ] : []),
    { label: 'STATUS TRACKER', active: view === 'STATUS_TRACKER', onClick: () => setView('STATUS_TRACKER') },
    { label: 'EVENT STATUS', active: view === 'EVENT_STATUS', onClick: () => setView('EVENT_STATUS') },
    { label: 'PARTICIPANTS', active: view === 'PARTICIPANTS', onClick: () => setView('PARTICIPANTS') },
    { label: 'ATTENDANCE', active: view === 'ATTENDANCE', onClick: () => setView('ATTENDANCE') },
    { label: 'PROFILE', active: view === 'PROFILE', onClick: () => setView('PROFILE') },
  ];

  return (
    <div className="min-h-screen w-full relative overflow-x-hidden font-inter">
      {showSuccessPopup && <SuccessPopup onClose={closeSuccessPopup} />}

      <div className="fixed inset-0 z-0 overflow-hidden">
        <div 
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: 'url("https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/3425/2021/6/16/DSC08602.JPG")' }}
        ></div>
        <div className="absolute inset-0 bg-white/80 backdrop-blur-sm"></div>
      </div>

      <header className={`fixed top-0 left-0 w-full z-[1000] transition-all duration-500 px-8 py-4 flex items-center justify-between ${isScrolled ? 'bg-white shadow-[0_4px_30px_rgba(0,0,0,0.05)] border-b border-slate-100' : 'bg-transparent'}`}>
        <div className="flex items-center gap-12">
          <div
            className="flex items-center cursor-pointer group transition-transform hover:scale-105"
            onClick={() => setView('OVERVIEW')}
          >
            <img
              src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png"
              alt="RIT Logo"
              className="h-12 w-auto object-contain transition-all duration-300"
            />
          </div>

          <nav className="hidden lg:flex items-center gap-8">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={link.onClick}
                className={`text-[10px] font-black tracking-[0.3em] transition-all relative py-1 group ${link.active ? 'text-[#004a99]' : 'text-slate-500 hover:text-[#004a99]'
                  }`}
              >
                {link.label}
                <span className={`absolute bottom-0 left-1/2 -translate-x-1/2 h-[2px] bg-orange-500 transition-all duration-500 ${link.active ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
              </button>
            ))}
          </nav>
        </div>

        <div className="flex items-center gap-8 md:gap-12">
          <button
            onClick={onBack}
            className={`text-[10px] font-black tracking-[0.2em] px-6 py-2 rounded-full transition-all border ${isScrolled ? 'text-slate-700 bg-white border-transparent hover:bg-slate-100' : 'text-slate-700 border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}
          >
            LOG OUT
          </button>
        </div>
      </header>

      <main className="relative z-10 w-full pt-28 pb-20 px-6 overflow-y-auto h-[calc(100vh)]">
        {view === 'OVERVIEW' && (
          <div className="max-w-6xl mx-auto h-full flex flex-col items-center justify-center text-center animate-in fade-in zoom-in-95 duration-700 p-10">
            <div className="relative z-10">
              <h1 className="text-5xl md:text-7xl font-black tracking-tighter mb-8 text-slate-900 uppercase leading-[0.9] drop-shadow-sm pointer-events-none">
                EVENT <br />
                COORDINATOR <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#004a99] to-orange-500">HUB</span>
              </h1>

              <p className="max-w-2xl mx-auto text-lg md:text-xl font-medium mb-12 text-slate-600 leading-relaxed uppercase tracking-[0.2em]">
                Orchestrate prestigious campus events within <br /> an innovative digital environment.
              </p>

              <div className="flex flex-col sm:flex-row items-center justify-center gap-6 pt-4 mb-16">
                <button
                  onClick={() => { setSelectedEvent(null); setView('CREATE'); }}
                  className="px-12 py-5 bg-white border border-slate-200 text-orange-500 font-black uppercase tracking-[0.2em] text-[11px] hover:bg-slate-50 transition-all rounded-2xl shadow-sm flex items-center justify-center gap-3 hover:-translate-y-1 active:translate-y-0"
                >
                  GENERATE NEW <i className="fas fa-sparkles text-sm"></i>
                </button>

                {onViewStudentHub && (
                  <button
                    onClick={onViewStudentHub}
                    className="px-12 py-5 bg-slate-900 text-white font-black uppercase tracking-[0.2em] text-[11px] hover:bg-black transition-all rounded-2xl shadow-xl flex items-center justify-center gap-3 hover:-translate-y-1 active:translate-y-0"
                  >
                    VIEW STUDENT HUB <i className="fas fa-external-link-alt text-sm"></i>
                  </button>
                )}
              </div>
            </div>
          </div>
        )}

        {(view === 'CREATE' || view === 'EDIT') && (
          <div className="max-w-7xl mx-auto px-4 py-20 min-h-screen">
            {selectionType === 'NONE' && view === 'CREATE' ? (
              <div className="animate-in fade-in slide-in-from-bottom-10 duration-700">
                <div className="text-center mb-20">
                  <h2 className="text-6xl font-black text-slate-900 tracking-tighter uppercase mb-4">Generate Event</h2>
                  <p className="text-[#004a99] font-bold text-xs tracking-[0.4em] uppercase flex items-center justify-center gap-3">
                    <span className="w-1.5 h-1.5 bg-[#004a99] rounded-full animate-pulse"></span>
                    Choose Verification Category
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-7xl mx-auto">
                  {/* Normal Events Bar */}
                  <div 
                    onClick={() => setSelectionType('NORMAL')}
                    className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-[#004a99]/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
                  >
                    <div className="absolute top-0 right-0 w-40 h-40 bg-blue-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-blue-100/50 transition-colors"></div>
                    <div className="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
                      <i className="fas fa-calendar-check text-3xl text-[#004a99]"></i>
                    </div>
                    <h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Normal Events</h3>
                    <p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
                      Standard campus activities, workshops, and departmental seminars.
                    </p>
                    <div className="mt-10 flex items-center gap-3 text-[#004a99] font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
                      Explore Registry <i className="fas fa-arrow-right text-[8px]"></i>
                    </div>
                  </div>

                  {/* Special Events Bar */}
                  <div 
                    onClick={() => setSelectionType('SPECIAL')}
                    className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-orange-500/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
                  >
                    <div className="absolute top-0 right-0 w-40 h-40 bg-orange-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-orange-100/50 transition-colors"></div>
                    <div className="w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
                      <i className="fas fa-star text-3xl text-orange-500"></i>
                    </div>
                    <h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Special Events</h3>
                    <p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
                      Prestigious summits, symposiums, and high-impact institutional celebrations.
                    </p>
                    <div className="mt-10 flex items-center gap-3 text-orange-500 font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
                      Explore Registry <i className="fas fa-arrow-right text-[8px]"></i>
                    </div>
                  </div>

                  {/* Domains Bar */}
                  <div 
                    onClick={() => setSelectionType('DOMAIN')}
                    className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-emerald-500/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
                  >
                    <div className="absolute top-0 right-0 w-40 h-40 bg-emerald-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-emerald-100/50 transition-colors"></div>
                    <div className="w-24 h-24 bg-emerald-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
                      <i className="fas fa-layer-group text-3xl text-emerald-500"></i>
                    </div>
                    <h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Create Domains</h3>
                    <p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
                      Propose new domains for Technical, Non-Technical, and Workshop categories.
                    </p>
                    <div className="mt-10 flex items-center gap-3 text-emerald-500 font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
                      Create Registry <i className="fas fa-arrow-right text-[8px]"></i>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="animate-in fade-in slide-in-from-bottom-10 duration-500">
                <button 
                  onClick={() => { setSelectionType('NONE'); setSelectedEvent(null); }}
                  className="mb-8 flex items-center gap-2 text-slate-500 font-black text-[10px] uppercase tracking-widest hover:text-[#004a99] transition-colors"
                >
                  <i className="fas fa-arrow-left"></i> Back to Categories
                </button>
                
                {(selectionType === 'NORMAL' || view === 'EDIT') && (
                  <div className="w-full flex justify-center">
                    <CreateEventForm
                      eventToEdit={selectedEvent || undefined}
                      onCancel={() => { setView('CREATIONS'); setSelectionType('NONE'); }}
                      onSuccess={handleCreateSuccess}
                      onSupabaseError={onSupabaseError}
                    />
                  </div>
                )}
                
                {selectionType === 'SPECIAL' && (
                  <div className="w-full">
                    <CreateSpecialEventsView onShowToast={(msg, type) => setToast({ message: msg, type: type })} />
                  </div>
                )}
                
                {selectionType === 'DOMAIN' && (
                  <div className="w-full relative z-20">
                    <CreateDomainView onBack={() => { setSelectionType('NONE'); }} onShowToast={(msg, type) => setToast({ message: msg, type: type })} />
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {view === 'CREATIONS' && (
          <div className="max-w-7xl mx-auto px-4 md:px-10 py-10 animate-in fade-in slide-in-from-bottom-10 duration-500">
            <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16 px-4 border-b border-slate-200 pb-8">
              <div>
                <h2 className="text-6xl font-black text-slate-900 tracking-tighter uppercase mb-2">Creations</h2>
                <p className="text-[#004a99] font-bold text-xs tracking-[0.4em] uppercase flex items-center gap-3">
                  <span className="w-1.5 h-1.5 bg-[#004a99] rounded-full"></span>
                  Synchronized Digital Hub
                </p>
              </div>
              <div className="flex items-center gap-4">
                <button
                  onClick={() => { setSelectedEvent(null); setView('CREATE'); }}
                  className="bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:border-[#004a99] hover:text-[#004a99] transition-all shadow-sm active:scale-95"
                >
                  + Generate Event
                </button>
                <button
                  onClick={() => setView('EVENT_STATUS')}
                  className="bg-orange-500 text-white px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-orange-600 transition-all shadow-xl shadow-orange-500/20 active:scale-95"
                >
                  Hub Analytics
                </button>
              </div>
            </div>

            <h3 className="text-xl font-black text-slate-900 uppercase tracking-tight mb-8 px-4 flex items-center gap-3">
              <i className="fas fa-calendar-check text-[#004a99]"></i>
              Event Creations
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
              {events.length > 0 ? events.map((event) => (
                <div key={event.id} className="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden group transition-all duration-500 hover:border-[#004a99]/30 hover:-translate-y-2 shadow-sm hover:shadow-2xl hover:shadow-[#004a99]/10">
                  <div className="h-64 relative overflow-hidden bg-slate-100">
                    <img src={event.image} alt={event.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                    <div className="absolute top-6 right-6 bg-white/90 backdrop-blur-md px-6 py-2 rounded-full text-[9px] font-black uppercase tracking-widest text-slate-900 shadow-sm">{event.category}</div>

                    <div className="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl flex items-center justify-between shadow-sm">
                      <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Enrollment Status</span>
                      <span className="text-[10px] font-black text-[#004a99]">
                        {event.currentParticipants || 0} / {event.maxParticipants || (event.deptLimits && Object.keys(event.deptLimits).length > 0 ? Object.values(event.deptLimits).map(Number).reduce((a, b) => a + b, 0) : '∞')}
                      </span>
                    </div>
                  </div>
                  <div className="p-8">
                    <div className="flex items-center justify-between mb-6">
                      <div className="flex items-center gap-2">
                        {event.verificationStatus === 'APPROVED' ? (
                          <>
                            <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
                            <span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">Active / Approved</span>
                          </>
                        ) : event.verificationStatus === 'REJECTED' ? (
                          <>
                            <span className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.5)]"></span>
                            <span className="text-[10px] font-black text-rose-600 uppercase tracking-widest">Rejected</span>
                          </>
                        ) : event.verificationStatus === 'PENDING_HOD' ? (
                          <>
                            <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]"></span>
                            <span className="text-[10px] font-black text-amber-600 uppercase tracking-widest">Awaiting HOD Approval</span>
                          </>
                        ) : (
                          <>
                            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse shadow-[0_0_8px_rgba(59,130,246,0.5)]"></span>
                            <span className="text-[10px] font-black text-blue-600 uppercase tracking-widest">Awaiting Admin Approval</span>
                          </>
                        )}
                      </div>
                      <div className={`px-4 py-1.5 rounded-full text-[9px] font-black uppercase tracking-widest border transition-all ${event.pricingType === 'PAID' ? 'bg-rose-50 border-rose-200 text-rose-600' : 'bg-emerald-50 border-emerald-200 text-emerald-600'}`}>{event.pricingType}</div>
                    </div>
                    <div className="flex items-center justify-between mb-2">
                       <h3 className="text-2xl font-black text-slate-900 tracking-tight line-clamp-1 group-hover:text-[#004a99] transition-colors duration-300">{event.title}</h3>
                       <button 
                        onClick={() => setInspectedEvent(event)}
                        className="w-10 h-10 rounded-full bg-slate-50 text-[#004a99] flex items-center justify-center hover:bg-[#004a99] hover:text-white transition-all shadow-sm active:scale-95"
                        title="Inspect Details"
                       >
                         <i className="fas fa-eye text-sm"></i>
                       </button>
                    </div>
                    <p className="text-xs text-slate-500 line-clamp-2 mb-4 italic">
                      {event.event_summary || "No summary provided."}
                    </p>
                    <div className="space-y-4 text-slate-500 font-bold text-[10px] uppercase tracking-[0.2em] mb-6">
                      <div className="flex items-center gap-3"><i className="far fa-calendar text-[#004a99]"></i><span>{event.date}{event.schedule?.[0]?.start_time ? ` • ${event.schedule[0].start_time}` : ''}</span></div>
                      <div className="flex items-center gap-3"><i className="fas fa-location-dot text-[#004a99]"></i><span>{event.location}</span></div>
                      {event.conducting_dept && <div className="flex items-center gap-3"><i className="fas fa-building text-[#004a99]"></i><span>{event.conducting_dept}</span></div>}
                    </div>
                    {/* Financial Summary */}
                    {(event.total_expense || 0) > 0 && (
                      <div className="bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6 space-y-1.5">
                        <p className="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-2">Financial Projections</p>
                        {(event.refreshment_expense || 0) > 0 && (
                          <div className="flex justify-between text-[9px]">
                            <span className="font-bold text-slate-500 uppercase">Refreshment</span>
                            <span className="font-black text-slate-700">₹{event.refreshment_expense}</span>
                          </div>
                        )}
                        {(event.transportation_expense || 0) > 0 && (
                          <div className="flex justify-between text-[9px]">
                            <span className="font-bold text-slate-500 uppercase">Transportation</span>
                            <span className="font-black text-slate-700">₹{event.transportation_expense}</span>
                          </div>
                        )}
                        {((event as any).session_coverage_fee || 0) > 0 && (
                          <div className="flex justify-between text-[9px]">
                            <span className="font-bold text-slate-500 uppercase">Session Coverage</span>
                            <span className="font-black text-slate-700">₹{(event as any).session_coverage_fee}</span>
                          </div>
                        )}
                        <div className="flex justify-between text-[9px] pt-1.5 border-t border-slate-200">
                          <span className="font-black text-emerald-600 uppercase">Total</span>
                          <span className="font-black text-emerald-700">₹{event.total_expense}</span>
                        </div>
                      </div>
                    )}
                    <div className="flex gap-4">
                      {event.created_by === currentUserId ? (
                        <>
                          <button onClick={() => handleEditClick(event)} className="flex-1 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-[10px] font-black text-slate-700 uppercase tracking-widest hover:bg-blue-50 hover:text-[#004a99] hover:border-blue-200 transition-all active:scale-95">Update</button>
                          <button onClick={() => handleDelete(event.id, event.title)} className="w-14 h-14 bg-rose-50 border border-rose-100 text-rose-500 rounded-2xl flex items-center justify-center hover:bg-rose-500 hover:text-white transition-all active:scale-95"><i className="fas fa-trash-alt"></i></button>
                        </>
                      ) : (
                        <div className="flex-1 py-4 bg-slate-100 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest text-center border border-slate-200">
                          <i className="fas fa-lock mr-2"></i> View Only
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )) : (
                <div className="col-span-full py-40 flex flex-col items-center justify-center bg-white border border-dashed border-slate-300 rounded-[3rem] text-center px-10 shadow-sm">
                  <div className="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mb-8">
                    <i className="fas fa-plus text-3xl text-[#004a99]"></i>
                  </div>
                  <h4 className="text-slate-900 font-black uppercase tracking-[0.3em] text-sm mb-4">Awaiting New Sessions</h4>
                  <p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] max-w-sm">Start your curation by generating a new prestigious event for the community.</p>
                </div>
              )}
            </div>

            {/* Domains Subsection — moved to end for UX clarity */}
            {domains.length > 0 && (
              <div className="mt-20">
                <h3 className="text-xl font-black text-slate-900 uppercase tracking-tight mb-8 px-4 flex items-center gap-3">
                  <i className="fas fa-layer-group text-emerald-500"></i>
                  Proposed Domains
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
                  {domains.map((domain) => (
                    <div key={domain.id} className="bg-white/50 backdrop-blur-md border border-slate-200 rounded-3xl p-6 transition-all hover:border-emerald-500/30 hover:shadow-xl hover:shadow-emerald-500/5 group">
                      <div className="flex items-center justify-between mb-4">
                        <span className="text-[8px] font-black text-slate-400 uppercase tracking-[0.2em]">{domain.category}</span>
                        {domain.status === 'APPROVED' ? (
                          <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
                        ) : domain.status === 'REJECTED' ? (
                          <span className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.5)]"></span>
                        ) : (
                          <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]"></span>
                        )}
                      </div>
                      <h4 className="text-lg font-black text-slate-900 uppercase tracking-tight group-hover:text-emerald-600 transition-colors mb-2">{domain.name}</h4>
                      <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest italic">{domain.status || 'PENDING'}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {view === 'STATUS_TRACKER' && <AdminStatusTrackerView events={events} onShowToast={(msg) => setToast({ message: msg, type: 'success' })} studentDocuments={studentDocuments} onApproveCertificate={onApproveCertificate} localRegistrations={localRegistrations} currentUserId={currentUserId} />}

        {view === 'EVENT_STATUS' && (
          <AdminEventStatusView
            events={events}
            announcements={announcements}
            onAddAnnouncement={onAddAnnouncement}
            onUpdateAnnouncement={onUpdateAnnouncement}
            onDeleteAnnouncement={onDeleteAnnouncement}
            onBack={() => setView('CREATIONS')}
            onUpdateEvent={onUpdateEvent}
            currentUserId={currentUserId}
            localRegistrations={localRegistrations}
          />
        )}

        {view === 'PARTICIPANTS' && <FacultyParticipantsView events={events} localRegistrations={localRegistrations} currentUserId={currentUserId} />}

        {view === 'ATTENDANCE' && <FacultyAttendanceView events={events} onShowToast={(msg) => setToast({ message: msg, type: 'success' })} localRegistrations={localRegistrations} currentUserId={currentUserId} />}

        {view === 'PROFILE' && (
          <FacultyProfileView 
            onLogout={onBack} 
            name={currentUserName} 
            dept={currentUserDept} 
            email={currentUserEmail} 
            phone={currentUserPhone}
            photo={currentUserPhoto}
          />
        )}

        {view === 'VERIFICATION' && currentUserFacultyRole === 'HOD' && (
          <div className="animate-in fade-in slide-in-from-bottom-10 duration-500 max-w-6xl mx-auto pb-20">
            <div className="mb-10 text-left">
              <h2 className="text-4xl font-black text-slate-900 uppercase tracking-tighter mb-2">
                HOD Event <span className="text-[#004a99]">Verification</span>
              </h2>
              <p className="text-slate-400 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
                <span className="w-2 h-2 bg-[#004a99] rounded-full"></span>
                Review and approve/decline event creation requests for the {currentUserDept || 'your'} department
              </p>
            </div>

            {(() => {
              const pendingEvents = events.filter(
                e => e.verificationStatus === 'PENDING_HOD' && 
                e.conducting_dept === currentUserDept
              );

              if (pendingEvents.length === 0) {
                return (
                  <div className="bg-white/50 border border-dashed border-slate-200 rounded-[2.5rem] p-16 text-center shadow-sm">
                    <div className="w-20 h-20 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl shadow-inner">
                      <i className="fas fa-shield-check"></i>
                    </div>
                    <h4 className="text-slate-900 font-black uppercase tracking-[0.2em] text-sm mb-2">Clear Queue</h4>
                    <p className="text-slate-400 text-xs font-bold uppercase tracking-wider">No pending verification requests found for your department.</p>
                  </div>
                );
              }

              return (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  {pendingEvents.map((event) => (
                    <div key={event.id} className="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-md hover:shadow-xl transition-all duration-300 relative overflow-hidden group">
                      <div className="absolute top-0 right-0 w-24 h-24 bg-[#004a99]/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                      <div className="flex justify-between items-start mb-6">
                        <div>
                          <span className="bg-[#004a99]/10 text-[#004a99] px-4 py-1.5 rounded-full text-[8px] font-black uppercase tracking-widest">{event.category}</span>
                          <h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight mt-3 mb-1">{event.title}</h3>
                          <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
                            <i className="fas fa-user-tie text-orange-500"></i>
                            Created by: <span className="text-slate-700">{event.coordinator}</span>
                          </p>
                        </div>
                      </div>
                      
                      <div className="grid grid-cols-2 gap-4 bg-slate-50 p-5 rounded-2xl mb-8 text-left text-[10px] font-bold text-slate-500 uppercase tracking-wider">
                        <div>
                          <span className="block text-[8px] text-slate-400 mb-0.5">Domain</span>
                          <span className="text-slate-800 font-black">{event.domain}</span>
                        </div>
                        <div>
                          <span className="block text-[8px] text-slate-400 mb-0.5">Venue</span>
                          <span className="text-slate-800 font-black">{event.location}</span>
                        </div>
                        <div>
                          <span className="block text-[8px] text-slate-400 mb-0.5">Date</span>
                          <span className="text-slate-800 font-black">{event.date}</span>
                        </div>
                        <div>
                          <span className="block text-[8px] text-slate-400 mb-0.5">Type</span>
                          <span className="text-slate-800 font-black">{event.pricingType}</span>
                        </div>
                      </div>

                      <div className="flex gap-4">
                        <button
                          onClick={() => setInspectedEvent(event)}
                          className="w-14 h-14 bg-blue-50 text-[#004a99] rounded-2xl flex items-center justify-center hover:bg-[#004a99] hover:text-white transition-all shadow-sm active:scale-95 shrink-0"
                          title="Inspect Details"
                        >
                          <i className="fas fa-eye text-lg"></i>
                        </button>
                        <button
                          onClick={async () => {
                            try {
                              await onUpdateEvent({ 
                                ...event, 
                                verificationStatus: 'PENDING_ADMIN',
                                request_by_HOD: new Date().toISOString()
                              });
                              setToast({ message: `"${event.title}" approved and sent to Admin.`, type: 'success' });
                            } catch (err) {
                              alert("Failed to approve event.");
                            }
                          }}
                          className="flex-1 py-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-lg shadow-emerald-200 transition-all active:scale-95 flex items-center justify-center gap-2"
                        >
                          <i className="fas fa-check-circle"></i> Accept Request
                        </button>
                        <button
                          onClick={async () => {
                            if (window.confirm(`Are you sure you want to decline "${event.title}"?`)) {
                              try {
                                await onUpdateEvent({ ...event, verificationStatus: 'REJECTED' });
                                setToast({ message: `"${event.title}" has been declined.`, type: 'delete' });
                              } catch (err) {
                                alert("Failed to decline event.");
                              }
                            }
                          }}
                          className="px-6 py-4 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all active:scale-95 flex items-center justify-center"
                          title="Decline"
                        >
                          <i className="fas fa-times-circle text-lg"></i>
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              );
            })()}
          </div>
        )}
      </main>

      {toast && <Toast message={toast.message} type={toast.type} onClose={handleCloseToast} />}
      
      {inspectedEvent && (
        <div className="fixed inset-0 z-[10002] flex items-center justify-center p-4 md:p-10 bg-gradient-to-br from-[#0a0f1a]/95 via-[#001e3d]/95 to-[#050a14]/95 backdrop-blur-xl animate-in fade-in duration-300">
          <div id="inspection-modal-content" className="bg-white rounded-[3rem] w-full max-w-5xl max-h-[90vh] overflow-y-auto shadow-2xl relative animate-in zoom-in-95 duration-500 custom-scrollbar">
            <button 
              onClick={() => setInspectedEvent(null)}
              data-html2canvas-ignore="true"
              className="absolute top-6 right-6 z-20 w-12 h-12 bg-black/10 backdrop-blur-md rounded-full flex items-center justify-center text-slate-900 hover:bg-black/20 transition-all active:scale-95"
            >
              <i className="fas fa-times text-xl"></i>
            </button>
            <button
              onClick={downloadPDF}
              disabled={isDownloading}
              data-html2canvas-ignore="true"
              className="absolute top-6 right-20 z-20 px-6 h-12 bg-white/90 backdrop-blur-md rounded-full flex items-center justify-center text-[#004a99] font-black text-[10px] uppercase tracking-widest hover:bg-white transition-all shadow-lg active:scale-95 disabled:opacity-50"
            >
              {isDownloading ? <><i className="fas fa-spinner fa-spin mr-2"></i> Generating...</> : <><i className="fas fa-download mr-2"></i> Download PDF</>}
            </button>

            <div className="h-64 md:h-96 relative overflow-hidden bg-slate-100">
              <img src={inspectedEvent.image} alt={inspectedEvent.title} className="w-full h-full object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent"></div>
              <div className="absolute bottom-8 left-8 md:left-12">
                 <div className="flex flex-wrap gap-3 mb-4">
                    <span className="bg-[#004a99] text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-[#004a99]/20">{inspectedEvent.category}</span>
                    <span className="bg-white/90 backdrop-blur-md text-slate-900 px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest border border-slate-200">{inspectedEvent.pricingType}</span>
                    {inspectedEvent.status && (
                      <span className="bg-emerald-600 text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-emerald-600/20">{inspectedEvent.status}</span>
                    )}
                 </div>
                 <h2 className="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter leading-none">{inspectedEvent.title}</h2>
              </div>
            </div>

            <div className="p-8 md:p-12 grid grid-cols-1 lg:grid-cols-3 gap-12">
              <div className="lg:col-span-2 space-y-10">
                <div>
                  <h4 className="text-[#004a99] font-black text-xs uppercase tracking-[0.4em] mb-4 flex items-center gap-3">
                    <span className="w-2 h-0.5 bg-[#004a99]"></span> Event Summary
                  </h4>
                  <p className="text-slate-600 text-lg leading-relaxed font-medium">
                    {inspectedEvent.event_summary || "No detailed summary available for this prestigious event session."}
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                   <div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
                      <span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Domain Focus</span>
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-[#004a99] shadow-sm font-black text-xs">
                          {inspectedEvent.domain?.charAt(0) || <i className="fas fa-microchip"></i>}
                        </div>
                        <span className="text-sm font-black uppercase tracking-tight text-slate-900">{inspectedEvent.domain}</span>
                      </div>
                   </div>
                   <div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
                      <span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Coordinator</span>
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-orange-500 shadow-sm"><i className="fas fa-user-tie"></i></div>
                        <span className="text-sm font-black uppercase tracking-tight text-slate-900">{inspectedEvent.coordinator}</span>
                      </div>
                   </div>
                   <div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
                      <span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Creation Time (IST)</span>
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-emerald-500 shadow-sm"><i className="fas fa-clock"></i></div>
                        <span className="text-sm font-black uppercase tracking-tight text-slate-900">
                          {inspectedEvent.request_by_faculty 
                            ? new Date(inspectedEvent.request_by_faculty).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', dateStyle: 'medium', timeStyle: 'short' })
                            : 'N/A'}
                        </span>
                      </div>
                   </div>
                </div>

                {/* Operational Settings & Rules */}
                <div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
                  <h4 className="text-[#004a99] font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
                    <span className="w-1.5 h-1.5 bg-[#004a99] rounded-full"></span> Operational Details
                  </h4>
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Conducting Dept</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.conducting_dept || 'General'}</span>
                    </div>
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Associated Club</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.club || 'None'}</span>
                    </div>
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Participant Target</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.participantType || 'All'}</span>
                    </div>
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Duration</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.durationDays || 1} Day(s)</span>
                    </div>
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Reg. Deadline</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">
                        {inspectedEvent.registrationDeadline ? new Date(inspectedEvent.registrationDeadline).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'None'}
                      </span>
                    </div>
                  </div>
                  <div className="pt-6 border-t border-slate-200 grid grid-cols-2 gap-6">
                    <div>
                      <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Event Format</span>
                      <span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.isTeamEvent ? 'Team Play' : 'Solo Mode'}</span>
                    </div>
                    {inspectedEvent.isTeamEvent && (
                      <div>
                        <span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Team Size Limit</span>
                        <span className="text-xs font-black text-slate-900 uppercase tracking-tight">Max {inspectedEvent.teamSizeLimit || 1} ({inspectedEvent.teamComposition})</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Finance & Budget */}
                <div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
                  <h4 className="text-[#f97316] font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
                    <span className="w-1.5 h-1.5 bg-[#f97316] rounded-full"></span> Budget &amp; Financial Summary
                  </h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
                      <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Refreshments</span>
                      <span className="text-sm font-black text-slate-900">₹{inspectedEvent.refreshment_expense || 0}</span>
                    </div>
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
                      <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Transport</span>
                      <span className="text-sm font-black text-slate-900">₹{inspectedEvent.transportation_expense || 0}</span>
                    </div>
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
                      <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Session Fee</span>
                      <span className="text-sm font-black text-slate-900">₹{inspectedEvent.session_coverage_fee || 0}</span>
                    </div>
                    <div className="bg-white p-4 rounded-2xl border-2 border-orange-200 shadow-sm text-center bg-orange-50/50">
                      <span className="block text-[8px] font-black text-orange-600 uppercase tracking-widest mb-1">Total Expense</span>
                      <span className="text-sm font-black text-orange-600">₹{inspectedEvent.total_expense || 0}</span>
                    </div>
                  </div>
                </div>

                {/* Department Allocations & Quotas */}
                {inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 && (
                  <div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
                    <h4 className="text-indigo-600 font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
                      <span className="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span> Department Limits &amp; Seat Quotas
                    </h4>
                    <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-4">
                      {Object.entries(inspectedEvent.deptLimits).map(([dept, maxSeats]) => {
                        const current = inspectedEvent.currentDeptCounts?.[dept] || 0;
                        const sectionLimits = inspectedEvent.deptSectionLimits?.[dept];
                        const hasSectionLimits = sectionLimits && Object.keys(sectionLimits).length > 0;
                        return (
                          <div key={dept} className="bg-white border border-slate-200/50 rounded-2xl p-4 shadow-sm text-center flex flex-col justify-between">
                            <div>
                              <span className="block text-[8px] font-black text-slate-400 uppercase mb-1">{dept}</span>
                              <span className="text-xs font-black text-slate-900">{current} / {maxSeats} Seats</span>
                            </div>
                            {hasSectionLimits && (
                              <div className="mt-2 pt-2 border-t border-slate-100 text-left space-y-0.5">
                                {Object.entries(sectionLimits).map(([sec, limit]) => {
                                  const secCount = inspectedEvent.currentDeptSectionCounts?.[dept]?.[sec] || 0;
                                  return (
                                    <div key={sec} className="flex justify-between text-[7px] font-black uppercase text-slate-500">
                                      <span>Sec {sec}:</span>
                                      <span className="text-slate-800">{secCount} / {limit}</span>
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}

                {/* Event Schedule & Resource Persons */}
                {inspectedEvent.schedule && inspectedEvent.schedule.length > 0 && (
                  <div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
                    <h4 className="text-emerald-600 font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
                      <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Event Schedule &amp; Resource Persons
                    </h4>
                    <div className="space-y-4">
                      {inspectedEvent.schedule.map((slot, idx) => (
                        <div key={slot.id || idx} className="bg-white border border-slate-200/50 p-6 rounded-2xl shadow-sm text-left">
                          <div className="flex justify-between items-center pb-3 border-b border-slate-100 mb-4">
                            <span className="text-xs font-black text-slate-900 uppercase">Day {slot.day_idx} — Batch {slot.batch_idx}</span>
                            <span className="text-[10px] font-bold text-slate-500 uppercase">{slot.date} ({slot.start_time} - {slot.end_time})</span>
                          </div>
                          {slot.resource_person ? (
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                              <div>
                                <span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Resource Person</span>
                                <span className="text-xs font-bold text-slate-900 uppercase flex items-center gap-2">
                                  <i className="fas fa-user-circle text-orange-500"></i>
                                  {slot.resource_person.name}
                                </span>
                                <span className="text-[8px] text-slate-400 font-black uppercase mt-0.5 block">{slot.resource_person.type} speaker</span>
                              </div>
                              <div>
                                <span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Affiliation</span>
                                <span className="text-xs font-semibold text-slate-700 uppercase leading-tight">
                                  {slot.resource_person.dept ? `${slot.resource_person.dept} dept, ` : ''}
                                  {slot.resource_person.college_name || 'RIT'}
                                </span>
                              </div>
                              <div>
                                <span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Contact</span>
                                <span className="text-xs font-semibold text-slate-700 block">{slot.resource_person.email}</span>
                                <span className="text-[10px] font-semibold text-slate-500 block">{slot.resource_person.phone}</span>
                              </div>
                            </div>
                          ) : (
                            <div className="text-xs text-slate-400 font-bold uppercase tracking-widest text-center py-2">No Resource Person Assigned</div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <div className="space-y-6">
                <div className="bg-slate-900 text-white p-8 rounded-[2.5rem] shadow-xl">
                  <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-8">Session Details</h4>
                  <div className="space-y-6">
                    <div className="flex items-start gap-4">
                      <i className="far fa-calendar text-[#004a99] mt-1"></i>
                      <div>
                        <p className="text-xs font-black uppercase tracking-widest">{inspectedEvent.date}</p>
                        <p className="text-[10px] text-slate-400 font-bold uppercase mt-1">{inspectedEvent.time}</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-4">
                      <i className="fas fa-location-dot text-[#004a99] mt-1"></i>
                      <div>
                        <p className="text-xs font-black uppercase tracking-widest">{inspectedEvent.location}</p>
                        <p className="text-[10px] text-slate-400 font-bold uppercase mt-1">Institutional Venue</p>
                      </div>
                    </div>
                  </div>

                  <div className="mt-12 pt-8 border-t border-slate-800">
                    <div className="flex justify-between items-end mb-4">
                      <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Enrollment Status</span>
                      <span className="text-xl font-black text-white">{inspectedEvent.currentParticipants || 0} / {inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : '∞')}</span>
                    </div>
                    <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-gradient-to-r from-[#004a99] to-blue-400 font-black" 
                        style={{ width: `${Math.min(((inspectedEvent.currentParticipants || 0) / (typeof (inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : null)) === 'number' ? (inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : 100)) : 100)) * 100, 100)}%` }}
                      />
                    </div>
                  </div>
                </div>

                {/* Verification Hierarchy & Request Timeline */}
                <div className="bg-white border border-slate-200 p-8 rounded-[2.5rem] shadow-sm text-left">
                  <h4 className="text-[#004a99] font-black text-[10px] uppercase tracking-[0.3em] mb-6 flex items-center gap-2">
                    <i className="fas fa-history text-[#004a99]"></i> Verification Timeline
                  </h4>
                  <div className="space-y-6 relative before:absolute before:left-3.5 before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
                    {/* Faculty Step */}
                    <div className="flex gap-4 relative">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
                        inspectedEvent.request_by_faculty ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400'
                      }`}>
                        <i className="fas fa-file-signature text-[10px]"></i>
                      </div>
                      <div className="flex-1 min-w-0">
                        <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Faculty Coordinator</span>
                        <span className="block text-xs font-black text-slate-900 uppercase">Request Initiated</span>
                        {inspectedEvent.request_by_faculty ? (
                          <span className="block text-[9px] text-slate-500 font-bold mt-1">
                            {new Date(inspectedEvent.request_by_faculty).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
                          </span>
                        ) : (
                          <span className="block text-[9px] text-slate-400 font-bold mt-1">Pending</span>
                        )}
                      </div>
                    </div>

                    {/* HOD Step */}
                    <div className="flex gap-4 relative">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
                        inspectedEvent.category === 'CENTRE-ACTIVITY' ? 'bg-blue-50 text-blue-500' :
                        inspectedEvent.request_by_HOD ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400'
                      }`}>
                        <i className="fas fa-user-shield text-[10px]"></i>
                      </div>
                      <div className="flex-1 min-w-0">
                        <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Head of Department</span>
                        <span className="block text-xs font-black text-slate-900 uppercase">HOD Request Raised</span>
                        {inspectedEvent.category === 'CENTRE-ACTIVITY' ? (
                          <span className="block text-[9px] text-blue-600 font-black uppercase mt-1">Bypassed (Centre Activity)</span>
                        ) : inspectedEvent.request_by_HOD ? (
                          <span className="block text-[9px] text-slate-500 font-bold mt-1">
                            {new Date(inspectedEvent.request_by_HOD).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
                          </span>
                        ) : (
                          <span className="block text-[9px] text-slate-400 font-bold mt-1">Pending HOD Verification</span>
                        )}
                      </div>
                    </div>

                    {/* Admin Step */}
                    <div className="flex gap-4 relative">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
                        inspectedEvent.verificationStatus === 'APPROVED' ? 'bg-emerald-100 text-emerald-600' :
                        inspectedEvent.verificationStatus === 'REJECTED' ? 'bg-rose-100 text-rose-600' :
                        'bg-slate-100 text-slate-400'
                      }`}>
                        <i className="fas fa-university text-[10px]"></i>
                      </div>
                      <div className="flex-1 min-w-0">
                        <span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Admin Hub</span>
                        <span className="block text-xs font-black text-slate-900 uppercase">Publish Status</span>
                        <span className={`inline-block text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-md mt-1 ${
                          inspectedEvent.verificationStatus === 'APPROVED' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' :
                          inspectedEvent.verificationStatus === 'REJECTED' ? 'bg-rose-50 text-rose-600 border border-rose-100' :
                          'bg-amber-50 text-amber-600 border border-amber-100'
                        }`}>
                          {inspectedEvent.verificationStatus === 'APPROVED' ? 'Published' :
                           inspectedEvent.verificationStatus === 'REJECTED' ? 'Rejected' :
                           'Awaiting Admin Approval'}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdminLandingPage;