import React, { useState, useEffect, useMemo } from 'react';
import { 
  LucideLayoutDashboard, LucideUsers, LucideBox, LucideCalendar, 
  LucideShieldCheck, LucideBriefcase, LucideLogOut, LucidePlus, 
  LucideSearch, LucideAlertTriangle, LucideCheckCircle, LucideXCircle, 
  LucideClock, LucideFileText, LucideUserPlus, LucideSettings, 
  LucideMenu, LucideX, LucideBell, LucideChevronRight, LucideFilter, 
  LucideDownload, LucideTrash2, LucideEdit, LucideTrophy, LucideActivity,
  LucideVideo, LucideDollarSign, LucideGamepad2, LucideShare2, LucideCreditCard,
  LucideChevronDown, LucideInstagram, LucideYoutube, LucideUpload, LucideMoreHorizontal,
  LucideTarget, LucideArrowRight, LucideTruck, LucideSave, LucideUserMinus, LucideFileCheck,
  LucidePieChart, LucideTrendingUp, LucideBriefcase as LucideOrg, LucidePercent, LucideReceipt
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signInWithCustomToken, signInAnonymously, signOut } from 'firebase/auth';
import { getFirestore, collection, doc, addDoc, updateDoc, deleteDoc, onSnapshot, query, orderBy, serverTimestamp, setDoc, getDoc, where, arrayUnion, arrayRemove } from 'firebase/firestore';

// --- Firebase Initialization ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'dot-exe-v9';

// --- Interfaces ---
interface Log { id: string; action: string; user: string; timestamp: any; details: string; }
interface Employee { id: string; name: string; role: string; salary: number; status: string; method: string; utr: string; joined: string; contract: string; }
interface Transaction { id: string; title: string; type: 'income' | 'expense'; amount: number; date: any; category: string; }
interface Deal { 
    id: string; 
    title: string; 
    client: string; 
    value: number; 
    status: 'Sign Deal' | 'Asset Delivery' | 'Campaign Live' | 'Invoice' | 'Payment'; 
    assigneeType: 'ORG' | 'Creator'; 
    assigneeId?: string; 
    assigneeName?: string; 
    commission: number;
    invoiceUrl?: string;
    paymentInfo?: { txId: string; date: string; proofUrl: string };
}
interface Event { id: string; title: string; type: string; time: string; date: string; description: string; }
interface Scrim { id: string; date: any; opponent: string; map: string; result: 'Won' | 'Lost' | 'Draw'; score: string; stats: string; updatedBy: string; }
interface Asset { id: string; name: string; category: string; assignedTo: string; location: string; status: 'Active' | 'Repair' | 'Lost'; }
interface ContentTask { id: string; title: string; type: string; stage: string; priority: 'High' | 'Medium' | 'Low'; dueDate: string; assignee: string; }
interface Role { id: string; name: string; desc: string; members: string[]; }

// --- Shared Components ---

function NavSection({ title }: { title: string }) {
  return (
    <div className="px-4 mt-6 mb-2">
      <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{title}</p>
    </div>
  );
}

function NavItem({ active, onClick, label, icon: Icon, hasNotification }: any) {
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-center justify-between px-4 py-2.5 mb-1 transition-all duration-200 group relative ${
        active 
          ? 'bg-[#1e1e24] text-white border-l-2 border-purple-500' 
          : 'text-slate-400 hover:text-white hover:bg-white/5'
      }`}
    >
      <div className="flex items-center gap-3">
        <Icon size={18} className={active ? 'text-purple-400' : 'text-slate-500 group-hover:text-slate-300'} />
        <span className={`text-sm font-medium ${active ? 'text-white' : 'text-slate-400 group-hover:text-slate-200'}`}>{label}</span>
      </div>
      {active && <div className="w-1.5 h-1.5 rounded-full bg-purple-500 shadow-[0_0_8px_rgba(168,85,247,0.8)]" />}
      {hasNotification && !active && <div className="w-1.5 h-1.5 rounded-full bg-slate-600" />}
    </button>
  );
}

function StatusBadge({ status }: { status: string }) {
    let color = 'bg-slate-500/20 text-slate-400';
    const s = status.toLowerCase();
    if (['payment', 'paid', 'approved', 'won', 'completed', 'income', 'signed'].includes(s)) color = 'bg-emerald-500/20 text-emerald-400';
    if (['sign deal', 'asset delivery', 'campaign live', 'pending', 'processing', 'scheduled', 'review', 'in progress', 'ideation', 'scripting'].includes(s)) color = 'bg-amber-500/20 text-amber-400';
    if (['invoice', 'rejected', 'lost', 'overdue', 'unpaid', 'expense', 'repair', 'missing'].includes(s)) color = 'bg-blue-500/20 text-blue-400';
    
    return (
        <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide ${color}`}>
            {status}
        </span>
    );
}

function MetricCard({ title, value, subtitle, icon: Icon, colorClass, iconBgClass }: any) {
  return (
    <div className="bg-[#111115] border border-[#232329] p-5 rounded-xl relative overflow-hidden group hover:border-[#33333d] transition-colors">
      <div className="flex justify-between items-start mb-4">
        <h3 className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">{title}</h3>
        <div className={`p-2.5 rounded-lg ${iconBgClass} bg-opacity-10`}>
          <Icon size={18} className={colorClass} />
        </div>
      </div>
      <div className="relative z-10">
        <p className="text-2xl font-bold text-white mb-1">{value}</p>
        <p className="text-xs text-slate-500 font-medium">{subtitle}</p>
      </div>
    </div>
  );
}

function ActivityItem({ title, value, timestamp }: any) {
  return (
    <div className="flex items-start gap-3 relative pl-4 border-l border-[#232329] pb-4 last:pb-0 last:border-0">
        <div className="absolute left-[-2.5px] top-1.5 w-1.5 h-1.5 rounded-full bg-purple-500 shadow-[0_0_4px_rgba(168,85,247,0.8)]"></div>
        <div>
            <h4 className="text-sm font-bold text-white leading-none">{title}</h4>
            <p className="text-xs text-slate-500 mt-1">{value} <span className="text-slate-600">• {timestamp}</span></p>
        </div>
    </div>
  );
}

function Modal({ isOpen, onClose, title, children }: any) {
    if (!isOpen) return null;
    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            {/* Backdrop */}
            <div 
                className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity" 
                onClick={onClose} 
            />
            
            {/* Modal Card */}
            <div 
                className="relative bg-[#111115] border border-[#232329] w-full max-w-lg rounded-xl shadow-2xl animate-fadeIn flex flex-col max-h-[90vh]"
                onClick={e => e.stopPropagation()}
            >
                {/* Header - Fixed */}
                <div className="flex justify-between items-center p-5 border-b border-[#232329] bg-[#16161a] rounded-t-xl shrink-0">
                    <h3 className="font-bold text-white text-lg">{title}</h3>
                    <button 
                        onClick={onClose} 
                        className="text-slate-400 hover:text-white bg-[#232329] hover:bg-[#2d2d35] p-2 rounded-lg transition-colors"
                    >
                        <LucideX size={20}/>
                    </button>
                </div>
                
                {/* Body - Scrollable */}
                <div className="p-6 overflow-y-auto custom-scrollbar">
                    {children}
                </div>
            </div>
        </div>
    );
}

// --- Specific Views ---

// 3. Payroll Center
function PayrollView({ employees, updateEmployee, logAction, appId }: any) {
    return (
        <div className="space-y-6 animate-fadeIn">
            <div>
                <h2 className="text-2xl font-bold text-white">Payroll Center</h2>
                <p className="text-slate-400 text-sm">Manage salaries and transaction details</p>
            </div>
            
            <div className="bg-[#111115] border border-[#232329] rounded-xl overflow-hidden">
                <table className="w-full text-left text-sm">
                    <thead>
                        <tr className="bg-[#16161a] text-slate-500 font-medium border-b border-[#232329]">
                            <th className="p-4">Employee</th>
                            <th className="p-4">Method</th>
                            <th className="p-4">Transaction Details (UTR/TRX)</th>
                            <th className="p-4">Amount</th>
                            <th className="p-4">Status</th>
                            <th className="p-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-[#232329]">
                        {employees.map((e: any) => (
                            <tr key={e.id} className="hover:bg-white/5 transition-colors">
                                <td className="p-4">
                                    <p className="text-white font-medium">{e.name}</p>
                                    <p className="text-xs text-slate-500">{e.role}</p>
                                </td>
                                <td className="p-4">
                                    <select 
                                        value={e.method}
                                        onChange={(ev) => updateEmployee(e.id, { method: ev.target.value })}
                                        className="bg-[#0a0a0c] border border-[#232329] rounded px-2 py-1 text-xs text-slate-300 outline-none focus:border-purple-500"
                                    >
                                        <option value="UPI">UPI</option>
                                        <option value="NEFT">NEFT</option>
                                        <option value="IMPS">IMPS</option>
                                        <option value="Crypto">Crypto</option>
                                    </select>
                                </td>
                                <td className="p-4">
                                    <input 
                                        type="text" 
                                        placeholder="Enter UTR No." 
                                        value={e.utr || ''}
                                        onChange={(ev) => updateEmployee(e.id, { utr: ev.target.value })}
                                        onBlur={() => logAction(`Updated UTR for ${e.name}`)}
                                        className="bg-[#0a0a0c] border border-[#232329] rounded px-3 py-1.5 text-xs text-white w-full outline-none focus:border-purple-500 placeholder-slate-600"
                                    />
                                </td>
                                <td className="p-4 text-white font-mono">₹{e.salary.toLocaleString()}</td>
                                <td className="p-4"><StatusBadge status={e.status} /></td>
                                <td className="p-4 text-right">
                                    {e.status === 'Unpaid' ? (
                                        <button 
                                            onClick={() => {
                                                updateEmployee(e.id, { status: 'Paid' });
                                                logAction(`Processed payroll for ${e.name}`);
                                            }} 
                                            className="bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 px-3 py-1 rounded text-xs font-bold transition-colors"
                                        >
                                            Mark Paid
                                        </button>
                                    ) : (
                                        <button 
                                            onClick={() => updateEmployee(e.id, { status: 'Unpaid' })}
                                            className="text-slate-500 hover:text-white text-xs"
                                        >
                                            Reset
                                        </button>
                                    )}
                                </td>
                            </tr>
                        ))}
                         {employees.length === 0 && (
                            <tr><td colSpan={6} className="p-8 text-center text-slate-500">No employees found. Add them in Roster view.</td></tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

// 4. Team Access (Permissions) - FIXED PREDEFINED ROLES
function AccessView({ roles, addRole, updateRole, logAction, employees }: any) {
    const [addMemberToRole, setAddMemberToRole] = useState<any>(null);
    const [selectedMember, setSelectedMember] = useState('');

    // Predefined Role Definitions (Static Descriptions)
    const PREDEFINED_ROLES = [
        { name: 'Management (SuperAdmin)', desc: 'Full System Access & Financial Control' },
        { name: 'Manager', desc: 'Team Rosters, Scrims & Content Management' },
        { name: 'Male Roster', desc: 'Scrims, Schedule & Asset Requests' },
        { name: 'Female Roster', desc: 'Scrims, Schedule & Asset Requests' },
        { name: 'Content Creators', desc: 'Social Pulse, Schedule & Content Pipeline' },
        { name: 'Editors', desc: 'Content Pipeline & Asset Management' }
    ];

    const handleAddMember = async (e: any) => {
        e.preventDefault();
        if(!selectedMember) return;
        
        // Check if role exists in DB, if not create it first
        const existingRole = roles.find((r: any) => r.name === addMemberToRole.name);
        
        if (existingRole) {
            await updateRole(existingRole.id, { members: arrayUnion(selectedMember) });
        } else {
            await addRole({ 
                name: addMemberToRole.name, 
                desc: addMemberToRole.desc, 
                members: [selectedMember] 
            });
        }

        setAddMemberToRole(null);
        setSelectedMember('');
        logAction(`Added ${selectedMember} to ${addMemberToRole.name}`);
    };

    const handleRemoveMember = (roleId: string, memberName: string) => {
        if(confirm(`Remove ${memberName} from this role?`)) {
            updateRole(roleId, { members: arrayRemove(memberName) });
            logAction(`Removed ${memberName} from role`);
        }
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-center">
                <div>
                    <h2 className="text-2xl font-bold text-white">Team Access</h2>
                    <p className="text-slate-400 text-sm">Predefined Role Assignments</p>
                </div>
            </div>
            
            {/* Add Member Modal */}
            <Modal isOpen={!!addMemberToRole} onClose={() => setAddMemberToRole(null)} title={`Add Member to ${addMemberToRole?.name}`}>
                <form onSubmit={handleAddMember} className="space-y-4">
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Select from Roster</label>
                        <select 
                            className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" 
                            value={selectedMember} 
                            onChange={e => setSelectedMember(e.target.value)}
                            required
                        >
                            <option value="">-- Select Employee --</option>
                            {employees.map((emp: any) => (
                                <option key={emp.id} value={emp.name}>{emp.name} ({emp.role})</option>
                            ))}
                        </select>
                        <p className="text-[10px] text-slate-500 mt-2">Only employees added to the Roster & Staff list can be assigned a role here.</p>
                    </div>
                    <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white py-2 rounded font-medium mt-4">Assign Role</button>
                </form>
            </Modal>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {PREDEFINED_ROLES.map((defRole) => {
                    // Find actual DB data for this role
                    const dbRole = roles.find((r: any) => r.name === defRole.name);
                    const members = dbRole ? dbRole.members : [];
                    const roleId = dbRole ? dbRole.id : null;

                    return (
                        <div key={defRole.name} className="bg-[#111115] border border-[#232329] p-4 rounded-xl hover:border-purple-500/30 transition-colors">
                            <div className="flex justify-between items-start mb-4">
                                <div className="bg-purple-500/10 p-2 rounded-lg text-purple-400"><LucideShieldCheck size={20}/></div>
                                <span className="text-[10px] bg-[#232329] text-slate-400 px-2 py-1 rounded uppercase font-bold tracking-wide">Fixed Role</span>
                            </div>
                            <h3 className="text-white font-bold">{defRole.name}</h3>
                            <p className="text-xs text-slate-500 mt-1">{defRole.desc}</p>
                            
                            <div className="mt-4 pt-4 border-t border-[#232329]">
                                <div className="flex justify-between items-center mb-2">
                                    <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Members ({members.length})</span>
                                    <button onClick={() => setAddMemberToRole(defRole)} className="w-6 h-6 rounded bg-[#232329] flex items-center justify-center text-slate-400 hover:text-white hover:bg-purple-600 transition-colors">
                                        <LucidePlus size={12}/>
                                    </button>
                                </div>
                                <div className="flex flex-wrap gap-2">
                                    {members.map((m: string, idx: number) => (
                                        <div key={idx} className="group flex items-center gap-1.5 bg-[#1e1e24] pl-2 pr-1 py-1 rounded-full border border-[#232329]">
                                            <div className="w-4 h-4 rounded-full bg-slate-700 flex items-center justify-center text-[8px] text-white font-bold">{m[0]}</div>
                                            <span className="text-xs text-slate-300">{m}</span>
                                            {roleId && (
                                                <button onClick={() => handleRemoveMember(roleId, m)} className="text-slate-600 hover:text-red-400 ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                                    <LucideX size={12} />
                                                </button>
                                            )}
                                        </div>
                                    ))}
                                    {members.length === 0 && <span className="text-xs text-slate-600 italic">No members assigned</span>}
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}

// 5. Roster View - UPDATED WITH DELETE
function RosterView({ employees, addEmployee, updateEmployee, deleteEmployee, logAction }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [isUpdatingContract, setIsUpdatingContract] = useState<any>(null);
    const [newEmp, setNewEmp] = useState({ name: '', role: 'Editor', salary: 0, joined: new Date().toISOString().split('T')[0], contract: '' });
    const [contractFile, setContractFile] = useState<any>(null);

    const handleFileChange = (e: any, setFileState: any, setStatusState: any) => {
        const file = e.target.files[0];
        if (file) {
            setFileState(file);
            setStatusState(prev => ({...prev, contract: `Uploaded: ${file.name}`}));
        }
    };

    const handleAddSubmit = (e: any) => {
        e.preventDefault();
        addEmployee({ ...newEmp, status: 'Unpaid', method: 'UPI', utr: '' });
        setIsAdding(false);
        setNewEmp({ name: '', role: 'Editor', salary: 0, joined: new Date().toISOString().split('T')[0], contract: '' });
        setContractFile(null);
        logAction(`Added new employee: ${newEmp.name}`);
    };

    const handleContractUpdate = (e: any) => {
        e.preventDefault();
        if (contractFile) {
            updateEmployee(isUpdatingContract.id, { contract: `Uploaded: ${contractFile.name}` });
            logAction(`Updated contract for ${isUpdatingContract.name}`);
            setIsUpdatingContract(null);
            setContractFile(null);
        }
    };

    const handleDelete = (e: React.MouseEvent, id: string, name: string) => {
        e.stopPropagation(); 
        if(window.confirm(`Are you sure you want to remove ${name} from the roster? This action is permanent.`)) {
            deleteEmployee(id);
            logAction(`Deleted employee: ${name}`);
        }
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">Rosters & Staff</h2>
                    <p className="text-slate-400 text-sm">Employee contracts and onboarding</p>
                </div>
                <button onClick={() => setIsAdding(true)} className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
                    <LucideUserPlus size={16}/> Add Employee
                </button>
            </div>

            {/* Add Employee Modal */}
            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="Add New Employee">
                <form onSubmit={handleAddSubmit} className="space-y-4">
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Full Name</label>
                        <input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEmp.name} onChange={e => setNewEmp({...newEmp, name: e.target.value})} />
                    </div>
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Role</label>
                        <select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEmp.role} onChange={e => setNewEmp({...newEmp, role: e.target.value})}>
                            <option>Management</option>
                            <option>Manager</option>
                            <option>Editor</option>
                            <option>Content Creator</option>
                            <option>Roster (M)</option>
                            <option>Roster (F)</option>
                            <option>Coach</option>
                        </select>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs text-slate-400 mb-1">Monthly Salary (₹)</label>
                            <input required type="number" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEmp.salary} onChange={e => setNewEmp({...newEmp, salary: Number(e.target.value)})} />
                        </div>
                        <div>
                            <label className="block text-xs text-slate-400 mb-1">Joining Date</label>
                            <input required type="date" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEmp.joined} onChange={e => setNewEmp({...newEmp, joined: e.target.value})} />
                        </div>
                    </div>
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Contract PDF (Optional)</label>
                        <input type="file" accept=".pdf,.doc,.docx" onChange={(e) => handleFileChange(e, setContractFile, setNewEmp)} className="w-full text-xs text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-500 cursor-pointer" />
                        {newEmp.contract && <p className="text-emerald-400 text-xs mt-1">{newEmp.contract}</p>}
                    </div>
                    <button type="submit" className="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded font-medium mt-4">Confirm Onboarding</button>
                </form>
            </Modal>

            {/* Update Contract Modal */}
            <Modal isOpen={!!isUpdatingContract} onClose={() => setIsUpdatingContract(null)} title={`Update Contract: ${isUpdatingContract?.name}`}>
                <form onSubmit={handleContractUpdate} className="space-y-4">
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Upload New Contract</label>
                        <input required type="file" accept=".pdf,.doc,.docx" onChange={(e) => setContractFile(e.target.files?.[0])} className="w-full text-xs text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-500 cursor-pointer" />
                        <p className="text-xs text-slate-500 mt-2">Uploading will overwrite the existing contract status.</p>
                    </div>
                    <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white py-2 rounded font-medium mt-4">Save Contract</button>
                </form>
            </Modal>

            <div className="bg-[#111115] border border-[#232329] rounded-xl overflow-hidden">
                <table className="w-full text-left text-sm">
                    <thead>
                        <tr className="bg-[#16161a] text-slate-500 font-medium">
                            <th className="p-4">Name/Role</th>
                            <th className="p-4">Joining Date</th>
                            <th className="p-4">Salary</th>
                            <th className="p-4">Contract</th>
                            <th className="p-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-[#232329]">
                        {employees.map((e: any) => (
                            <tr key={e.id} className="hover:bg-white/5 transition-colors group">
                                <td className="p-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold text-white">{e.name[0]}</div>
                                        <div>
                                            <p className="text-white font-medium">{e.name}</p>
                                            <p className="text-xs text-slate-500">{e.role}</p>
                                        </div>
                                    </div>
                                </td>
                                <td className="p-4 text-slate-300">{e.joined}</td>
                                <td className="p-4 text-slate-300 font-mono">₹{e.salary.toLocaleString()}</td>
                                <td className="p-4">
                                    {e.contract ? (
                                        <span className="flex items-center gap-2 text-xs text-emerald-400 bg-emerald-500/10 px-2 py-1 rounded border border-emerald-500/20">
                                            <LucideFileCheck size={12} /> Signed
                                        </span>
                                    ) : (
                                        <span className="flex items-center gap-2 text-xs text-amber-400 bg-amber-500/10 px-2 py-1 rounded border border-amber-500/20">
                                            <LucideAlertTriangle size={12} /> Pending
                                        </span>
                                    )}
                                </td>
                                <td className="p-4 text-right flex items-center justify-end gap-3">
                                    <button onClick={() => setIsUpdatingContract(e)} className="text-blue-400 hover:text-blue-300 text-xs flex items-center gap-1">
                                        <LucideUpload size={12}/> {e.contract ? 'Update' : 'Upload'}
                                    </button>
                                    <button 
                                        onClick={(event) => handleDelete(event, e.id, e.name)} 
                                        className="text-slate-600 hover:text-red-500 transition-colors p-2 hover:bg-red-500/10 rounded-lg cursor-pointer"
                                        title="Delete Employee"
                                    >
                                        <LucideTrash2 size={16} />
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

// 6. Finance View - UPDATED FOR COMMISSION LOGIC
function FinanceView({ transactions, addTransaction, logAction, employees, deals }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [newTx, setNewTx] = useState({ title: '', type: 'expense', amount: 0, category: 'Ops' });

    // --- Aggregated Stats ---
    // Deals Value - NOW ACCOUNTS FOR COMMISSION
    const activeDealsValue = deals.reduce((acc: number, d: any) => {
        const rawValue = Number(d.value) || 0;
        // If Org deal, take 100%. If Creator deal, take commission %.
        const commissionRate = d.assigneeType === 'Creator' ? (d.commission || 0) : 100;
        const orgShare = rawValue * (commissionRate / 100);
        return acc + orgShare;
    }, 0);

    // Payroll
    const totalMonthlyPayroll = employees.reduce((acc: number, e: any) => acc + (Number(e.salary) || 0), 0);
    // Logged
    const loggedIncome = transactions.filter((t: any) => t.type === 'income').reduce((acc: number, curr: any) => acc + curr.amount, 0);
    const loggedExpenses = transactions.filter((t: any) => t.type === 'expense').reduce((acc: number, curr: any) => acc + curr.amount, 0);

    const totalRevenue = loggedIncome + activeDealsValue;
    const totalExpenses = loggedExpenses + totalMonthlyPayroll;
    const netProfit = totalRevenue - totalExpenses;
    const runRate = totalExpenses * 12;

    // Expense Breakdown Calculation
    const expenseBreakdown = {
        Payroll: totalMonthlyPayroll,
        Ops: transactions.filter((t: any) => t.type === 'expense' && t.category === 'Ops').reduce((a,b) => a+b.amount, 0),
        Travel: transactions.filter((t: any) => t.type === 'expense' && t.category === 'Travel').reduce((a,b) => a+b.amount, 0),
        Equipment: transactions.filter((t: any) => t.type === 'expense' && t.category === 'Equipment').reduce((a,b) => a+b.amount, 0),
        PrizeMoney: transactions.filter((t: any) => t.type === 'expense' && t.category === 'Prize Money').reduce((a,b) => a+b.amount, 0),
    };

    const handleSubmit = (e: any) => {
        e.preventDefault();
        addTransaction(newTx);
        setIsAdding(false);
        setNewTx({ title: '', type: 'expense', amount: 0, category: 'Ops' });
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div>
                <h2 className="text-2xl font-bold text-white">Finance Master</h2>
                <p className="text-slate-400 text-sm">Real-time P&L (Includes Org Share of Deals & Payroll)</p>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="Log Transaction">
                <form onSubmit={handleSubmit} className="space-y-4">
                     <div>
                        <label className="block text-xs text-slate-400 mb-1">Type</label>
                        <div className="flex gap-4">
                            <label className="flex items-center gap-2 text-white">
                                <input type="radio" name="type" checked={newTx.type === 'income'} onChange={() => setNewTx({...newTx, type: 'income'})} /> Income
                            </label>
                            <label className="flex items-center gap-2 text-white">
                                <input type="radio" name="type" checked={newTx.type === 'expense'} onChange={() => setNewTx({...newTx, type: 'expense'})} /> Expense
                            </label>
                        </div>
                    </div>
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Description</label>
                        <input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTx.title} onChange={e => setNewTx({...newTx, title: e.target.value})} />
                    </div>
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Amount (₹)</label>
                        <input required type="number" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTx.amount} onChange={e => setNewTx({...newTx, amount: Number(e.target.value)})} />
                    </div>
                    <div>
                        <label className="block text-xs text-slate-400 mb-1">Category</label>
                        <select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTx.category} onChange={e => setNewTx({...newTx, category: e.target.value})}>
                            <option>Ops</option>
                            <option>Sponsorship</option>
                            <option>Prize Money</option>
                            <option>Payroll</option>
                            <option>Travel</option>
                            <option>Equipment</option>
                        </select>
                    </div>
                    <button type="submit" className="w-full bg-purple-600 hover:bg-purple-500 text-white py-2 rounded font-medium mt-4">Log Transaction</button>
                </form>
            </Modal>
            
            {/* Top Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-[#111115] border border-[#232329] p-5 rounded-xl">
                    <p className="text-xs text-slate-500 uppercase font-bold">Total Revenue</p>
                    <p className="text-2xl text-emerald-400 font-bold mt-1">₹{totalRevenue.toLocaleString()}</p>
                    <p className="text-[10px] text-slate-500 mt-1">Deals (Org Share): ₹{activeDealsValue.toLocaleString()} | Logs: ₹{loggedIncome.toLocaleString()}</p>
                    <div className="mt-4 h-1 bg-slate-800 rounded-full overflow-hidden"><div className="w-full h-full bg-emerald-500"></div></div>
                </div>
                <div className="bg-[#111115] border border-[#232329] p-5 rounded-xl">
                    <p className="text-xs text-slate-500 uppercase font-bold">Total Expenses</p>
                    <p className="text-2xl text-red-400 font-bold mt-1">₹{totalExpenses.toLocaleString()}</p>
                    <p className="text-[10px] text-slate-500 mt-1">Payroll: ₹{totalMonthlyPayroll.toLocaleString()} | Logs: ₹{loggedExpenses.toLocaleString()}</p>
                    <div className="mt-4 h-1 bg-slate-800 rounded-full overflow-hidden"><div className="w-full h-full bg-red-500"></div></div>
                </div>
                <div className="bg-[#111115] border border-[#232329] p-5 rounded-xl">
                    <p className="text-xs text-slate-500 uppercase font-bold">Net Profit/Loss</p>
                    <p className={`text-2xl font-bold mt-1 ${netProfit >= 0 ? 'text-white' : 'text-red-500'}`}>
                        {netProfit < 0 ? '-' : ''}₹{Math.abs(netProfit).toLocaleString()}
                    </p>
                    <div className="mt-4 h-1 bg-slate-800 rounded-full overflow-hidden"><div className={`w-full h-full ${netProfit >= 0 ? 'bg-blue-500' : 'bg-red-500'}`}></div></div>
                </div>
            </div>

            {/* Financial Overview & Breakdown */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-[#111115] border border-[#232329] rounded-xl p-6">
                    <h3 className="font-bold text-white mb-4 flex items-center gap-2"><LucidePieChart size={16}/> Expense Breakdown</h3>
                    <div className="space-y-4">
                        {Object.entries(expenseBreakdown).map(([key, val]) => (
                            <div key={key}>
                                <div className="flex justify-between text-xs mb-1">
                                    <span className="text-slate-400">{key}</span>
                                    <span className="text-white">₹{val.toLocaleString()}</span>
                                </div>
                                <div className="h-1.5 w-full bg-[#1e1e24] rounded-full overflow-hidden">
                                    <div className="h-full bg-red-500/50 rounded-full" style={{ width: `${(val / (totalExpenses || 1)) * 100}%` }}></div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="bg-[#111115] border border-[#232329] rounded-xl p-6">
                    <h3 className="font-bold text-white mb-4 flex items-center gap-2"><LucideTrendingUp size={16}/> Financial Health Deep Dive</h3>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="p-3 bg-[#1e1e24] rounded-lg border border-[#232329]">
                            <p className="text-xs text-slate-500 mb-1">Annual Run Rate</p>
                            <p className="text-lg font-bold text-white">₹{runRate.toLocaleString()}</p>
                        </div>
                        <div className="p-3 bg-[#1e1e24] rounded-lg border border-[#232329]">
                            <p className="text-xs text-slate-500 mb-1">Deal Volume (Gross)</p>
                            <p className="text-lg font-bold text-blue-400">₹{deals.reduce((a:number,b:any)=>a+(Number(b.value)||0),0).toLocaleString()}</p>
                        </div>
                        <div className="p-3 bg-[#1e1e24] rounded-lg border border-[#232329]">
                            <p className="text-xs text-slate-500 mb-1">Org Commission</p>
                            <p className="text-lg font-bold text-emerald-400">₹{activeDealsValue.toLocaleString()}</p>
                        </div>
                        <div className="p-3 bg-[#1e1e24] rounded-lg border border-[#232329]">
                            <p className="text-xs text-slate-500 mb-1">Fixed Burn</p>
                            <p className="text-lg font-bold text-red-400">₹{totalMonthlyPayroll.toLocaleString()}</p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Transaction Log */}
            <div className="bg-[#111115] border border-[#232329] rounded-xl p-6">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="font-bold text-white">Recent Transactions</h3>
                    <button onClick={() => setIsAdding(true)} className="text-xs bg-purple-600 px-3 py-1.5 rounded text-white hover:bg-purple-500">Log Transaction</button>
                </div>
                <div className="space-y-3">
                    {transactions.map((t: any) => (
                        <div key={t.id} className="flex items-center justify-between p-3 border border-[#232329] rounded-lg bg-[#0a0a0c]">
                            <div className="flex items-center gap-3">
                                <div className={`p-2 rounded-lg ${t.type === 'income' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-red-500/10 text-red-500'}`}>
                                    <LucideDollarSign size={16}/>
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-white">{t.title}</p>
                                    <p className="text-xs text-slate-500 capitalize">{t.category} • {t.date?.toDate ? t.date.toDate().toLocaleDateString() : 'Just now'}</p>
                                </div>
                            </div>
                            <span className={`font-mono font-medium ${t.type === 'income' ? 'text-emerald-400' : 'text-slate-300'}`}>
                                {t.type === 'income' ? '+' : '-'}₹{t.amount.toLocaleString()}
                            </span>
                        </div>
                    ))}
                     {transactions.length === 0 && <p className="text-slate-500 text-sm text-center py-4">No transactions logged.</p>}
                </div>
            </div>
        </div>
    );
}

// 7. CRM View - UPDATED FOR ASSIGNMENT & COMMISSION & PIPELINE
function CRMView({ deals, addDeal, updateDeal, employees }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [editingDeal, setEditingDeal] = useState<any>(null);
    const [newDeal, setNewDeal] = useState<Deal | any>({ title: '', client: '', value: 0, status: 'Sign Deal', assigneeType: 'ORG', assigneeId: '', assigneeName: '', commission: 100 });
    
    // File Mock States for Uploads
    const [invoiceFile, setInvoiceFile] = useState<any>(null);
    const [proofFile, setProofFile] = useState<any>(null);

    const handleSave = async (e: any, isEdit: boolean) => {
        e.preventDefault();
        const dealData = isEdit ? editingDeal : newDeal;
        
        // Resolve Name
        if (dealData.assigneeType === 'Creator' && dealData.assigneeId) {
            const creator = employees.find((e: any) => e.id === dealData.assigneeId);
            dealData.assigneeName = creator ? creator.name : 'Unknown';
        } else {
            dealData.assigneeId = '';
            dealData.assigneeName = 'Organization';
            dealData.commission = 100; // Org deals are 100% revenue
        }

        // Handle File Mocking
        if (dealData.status === 'Invoice' && invoiceFile) {
            dealData.invoiceUrl = `uploaded_${invoiceFile.name}`;
        }
        if (dealData.status === 'Payment' && proofFile) {
            dealData.paymentInfo = { ...dealData.paymentInfo, proofUrl: `uploaded_${proofFile.name}` };
        }

        if (isEdit) {
            await updateDeal(dealData.id, dealData);
            setEditingDeal(null);
        } else {
            await addDeal(dealData);
            setIsAdding(false);
            setNewDeal({ title: '', client: '', value: 0, status: 'Sign Deal', assigneeType: 'ORG', assigneeId: '', commission: 100 });
        }
        setInvoiceFile(null);
        setProofFile(null);
    };

    const renderForm = (data: any, setData: any, isEdit: boolean) => (
        <form onSubmit={(e) => handleSave(e, isEdit)} className="space-y-4">
            <div><label className="block text-xs text-slate-400 mb-1">Campaign Title</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={data.title} onChange={e => setData({...data, title: e.target.value})} /></div>
            <div><label className="block text-xs text-slate-400 mb-1">Client</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={data.client} onChange={e => setData({...data, client: e.target.value})} /></div>
            <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-xs text-slate-400 mb-1">Value (₹)</label><input required type="number" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={data.value} onChange={e => setData({...data, value: Number(e.target.value)})} /></div>
                <div>
                    <label className="block text-xs text-slate-400 mb-1">Status Pipeline</label>
                    <select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={data.status} onChange={e => setData({...data, status: e.target.value})}>
                        <option>Sign Deal</option><option>Asset Delivery</option><option>Campaign Live</option><option>Invoice</option><option>Payment</option>
                    </select>
                </div>
            </div>
            
            {/* Conditional Uploads based on Status */}
            {data.status === 'Invoice' && (
                <div className="bg-[#1e1e24] p-3 rounded border border-[#232329]">
                    <label className="block text-xs text-blue-400 mb-1 flex items-center gap-1"><LucideUpload size={12}/> Upload Invoice</label>
                    <input type="file" className="text-xs text-slate-400" onChange={(e) => setInvoiceFile(e.target.files?.[0])} />
                </div>
            )}

            {data.status === 'Payment' && (
                <div className="bg-[#1e1e24] p-3 rounded border border-[#232329] space-y-2">
                    <p className="text-xs text-emerald-400 font-bold flex items-center gap-1"><LucideDollarSign size={12}/> Payment Details</p>
                    <input placeholder="Transaction ID" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-xs text-white" value={data.paymentInfo?.txId || ''} onChange={e => setData({...data, paymentInfo: {...data.paymentInfo, txId: e.target.value}})} />
                    <input type="date" className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-xs text-white" value={data.paymentInfo?.date || ''} onChange={e => setData({...data, paymentInfo: {...data.paymentInfo, date: e.target.value}})} />
                    <div>
                        <label className="block text-[10px] text-slate-500 mb-1">Proof of Payment</label>
                        <input type="file" className="text-xs text-slate-400" onChange={(e) => setProofFile(e.target.files?.[0])} />
                    </div>
                </div>
            )}

            <div>
                <label className="block text-xs text-slate-400 mb-1">Assign Deal To</label>
                <div className="flex gap-4 mb-2">
                    <label className="flex items-center gap-2 text-white text-sm cursor-pointer">
                        <input type="radio" name={isEdit ? "edit_assignee" : "new_assignee"} checked={data.assigneeType === 'ORG'} onChange={() => setData({...data, assigneeType: 'ORG', commission: 100})} /> Organization
                    </label>
                    <label className="flex items-center gap-2 text-white text-sm cursor-pointer">
                        <input type="radio" name={isEdit ? "edit_assignee" : "new_assignee"} checked={data.assigneeType === 'Creator'} onChange={() => setData({...data, assigneeType: 'Creator', commission: 20})} /> Specific Creator
                    </label>
                </div>
                {data.assigneeType === 'Creator' && (
                    <div className="grid grid-cols-3 gap-4 mt-2">
                        <div className="col-span-2">
                            <select 
                                className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" 
                                value={data.assigneeId} 
                                onChange={e => setData({...data, assigneeId: e.target.value})}
                                required
                            >
                                <option value="">-- Select Creator --</option>
                                {employees.map((emp: any) => (
                                    <option key={emp.id} value={emp.id}>{emp.name} ({emp.role})</option>
                                ))}
                            </select>
                        </div>
                        <div className="relative">
                            <input 
                                type="number" 
                                className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500 pr-8" 
                                value={data.commission} 
                                onChange={e => setData({...data, commission: Number(e.target.value)})}
                                min="0" max="100"
                            />
                            <span className="absolute right-3 top-2 text-slate-500 text-xs">% Org</span>
                        </div>
                    </div>
                )}
            </div>

            <button type="submit" className="w-full bg-purple-600 hover:bg-purple-500 text-white py-2 rounded font-medium mt-4">{isEdit ? 'Update Deal' : 'Create Pipeline'}</button>
        </form>
    );

    const stages = ['Sign Deal', 'Asset Delivery', 'Campaign Live', 'Invoice', 'Payment'];

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">CRM & Deals</h2>
                    <p className="text-slate-400 text-sm">Brand deal timelines and assignments</p>
                </div>
                <button onClick={() => setIsAdding(true)} className="bg-purple-600 hover:bg-purple-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Add Deal</button>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="New Brand Deal">
                 {renderForm(newDeal, setNewDeal, false)}
            </Modal>

            <Modal isOpen={!!editingDeal} onClose={() => setEditingDeal(null)} title="Edit Deal">
                 {editingDeal && renderForm(editingDeal, setEditingDeal, true)}
            </Modal>
            
            <div className="space-y-4">
                {deals.map((d: any) => {
                    const currentStageIndex = stages.indexOf(d.status);
                    return (
                        <div key={d.id} className="bg-[#111115] border border-[#232329] p-6 rounded-xl hover:border-purple-500/30 transition-all">
                            <div className="flex justify-between items-start mb-4">
                                <div>
                                    <div className="flex items-center gap-3">
                                        <h3 className="text-lg font-bold text-white">Campaign: {d.title}</h3>
                                        {d.assigneeType === 'ORG' ? (
                                            <span className="text-[10px] bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded border border-blue-500/20 flex items-center gap-1"><LucideOrg size={10}/> ORG</span>
                                        ) : (
                                            <span className="text-[10px] bg-pink-500/10 text-pink-400 px-2 py-0.5 rounded border border-pink-500/20 flex items-center gap-1"><LucideUserPlus size={10}/> {d.assigneeName} ({d.commission}% Org)</span>
                                        )}
                                        {d.invoiceUrl && <LucideFileText size={14} className="text-blue-400" title="Invoice Uploaded"/>}
                                        {d.paymentInfo?.proofUrl && <LucideReceipt size={14} className="text-emerald-400" title="Payment Proof Uploaded"/>}
                                    </div>
                                    <p className="text-sm text-slate-400 mt-1">Client: {d.client} • Value: ₹{d.value.toLocaleString()} <span className="text-slate-600">| Org Rev: ₹{(d.value * ((d.commission||100)/100)).toLocaleString()}</span></p>
                                </div>
                                <div className="flex items-center gap-3">
                                    <StatusBadge status={d.status} />
                                    <button onClick={() => setEditingDeal(d)} className="p-1.5 text-slate-500 hover:text-white bg-[#1e1e24] rounded-lg transition-colors"><LucideEdit size={14} /></button>
                                </div>
                            </div>
                            
                            <div className="relative pt-4 pb-2">
                                <div className="h-1 bg-[#232329] rounded-full overflow-hidden mb-2">
                                    <div 
                                        className="h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-500" 
                                        style={{ width: `${((currentStageIndex + 1) / stages.length) * 100}%` }}
                                    ></div>
                                </div>
                                <div className="flex justify-between text-xs text-slate-500">
                                    {stages.map((stage, idx) => (
                                        <span key={stage} className={idx <= currentStageIndex ? 'text-white font-medium' : ''}>{stage}</span>
                                    ))}
                                </div>
                            </div>
                        </div>
                    );
                })}
                 {deals.length === 0 && <p className="text-slate-500 text-center py-8">No active deals.</p>}
            </div>
        </div>
    );
}

// 8. Schedule
function ScheduleView({ schedule, addEvent }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [newEvent, setNewEvent] = useState({ title: '', time: '10:00', type: 'Meeting', description: '' });

    const handleSubmit = (e: any) => {
        e.preventDefault();
        addEvent(newEvent);
        setIsAdding(false);
        setNewEvent({ title: '', time: '10:00', type: 'Meeting', description: '' });
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">Ops Schedule</h2>
                    <p className="text-slate-400 text-sm">Matches, meetings, and deadlines</p>
                </div>
                <div className="flex gap-2">
                     <button onClick={() => setIsAdding(true)} className="bg-purple-600 hover:bg-purple-500 text-white px-3 py-1.5 rounded text-xs">Add Event</button>
                </div>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="Add Schedule Event">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div><label className="block text-xs text-slate-400 mb-1">Time</label><input type="time" required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEvent.time} onChange={e => setNewEvent({...newEvent, time: e.target.value})} /></div>
                    <div><label className="block text-xs text-slate-400 mb-1">Title</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEvent.title} onChange={e => setNewEvent({...newEvent, title: e.target.value})} /></div>
                    <div><label className="block text-xs text-slate-400 mb-1">Description/Participants</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newEvent.description} onChange={e => setNewEvent({...newEvent, description: e.target.value})} /></div>
                    <button type="submit" className="w-full bg-purple-600 hover:bg-purple-500 text-white py-2 rounded font-medium mt-4">Schedule</button>
                </form>
            </Modal>

            <div className="space-y-2">
                {schedule.sort((a: any, b: any) => a.time.localeCompare(b.time)).map((ev: any) => (
                    <div key={ev.id} className="flex gap-4 group">
                        <div className="w-20 text-xs text-slate-500 pt-3 text-right font-mono">{ev.time}</div>
                        <div className="flex-1 bg-[#111115] border border-[#232329] p-3 rounded-lg hover:border-slate-600 transition-colors cursor-pointer relative overflow-hidden">
                            <div className="absolute left-0 top-0 bottom-0 w-1 bg-purple-500"></div>
                            <div className="ml-2">
                                <h4 className="text-sm font-bold text-white">{ev.title}</h4>
                                <p className="text-xs text-slate-500">{ev.description}</p>
                            </div>
                        </div>
                    </div>
                ))}
                 {schedule.length === 0 && <p className="text-slate-500 text-center py-8">Schedule is clear.</p>}
            </div>
        </div>
    );
}

// 9. Scrims
function ScrimsView({ scrims, addScrim }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [newScrim, setNewScrim] = useState({ opponent: '', map: 'Ascent', result: 'Won', score: '13-0', stats: 'Duelist: 20/5', updatedBy: 'Coach' });

    const handleSubmit = (e: any) => {
        e.preventDefault();
        addScrim(newScrim);
        setIsAdding(false);
        setNewScrim({ opponent: '', map: 'Ascent', result: 'Won', score: '13-0', stats: 'Duelist: 20/5', updatedBy: 'Coach' });
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">Scrim Results</h2>
                    <p className="text-slate-400 text-sm">Daily match performance log</p>
                </div>
                <button onClick={() => setIsAdding(true)} className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Log Result</button>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="Log Scrim Result">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div><label className="block text-xs text-slate-400 mb-1">Opponent</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newScrim.opponent} onChange={e => setNewScrim({...newScrim, opponent: e.target.value})} /></div>
                    <div className="grid grid-cols-2 gap-4">
                        <div><label className="block text-xs text-slate-400 mb-1">Map</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newScrim.map} onChange={e => setNewScrim({...newScrim, map: e.target.value})} /></div>
                        <div>
                             <label className="block text-xs text-slate-400 mb-1">Result</label>
                             <select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newScrim.result} onChange={e => setNewScrim({...newScrim, result: e.target.value})}>
                                 <option>Won</option><option>Lost</option><option>Draw</option>
                             </select>
                        </div>
                    </div>
                    <div><label className="block text-xs text-slate-400 mb-1">Score</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newScrim.score} onChange={e => setNewScrim({...newScrim, score: e.target.value})} /></div>
                    <div><label className="block text-xs text-slate-400 mb-1">Key Stats</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newScrim.stats} onChange={e => setNewScrim({...newScrim, stats: e.target.value})} /></div>
                    <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white py-2 rounded font-medium mt-4">Save Log</button>
                </form>
            </Modal>
            
            <div className="bg-[#111115] border border-[#232329] rounded-xl overflow-hidden">
                <table className="w-full text-left text-sm">
                    <thead>
                        <tr className="bg-[#16161a] text-slate-500 font-medium">
                            <th className="p-4">Date</th>
                            <th className="p-4">Opponent</th>
                            <th className="p-4">Map</th>
                            <th className="p-4">Result</th>
                            <th className="p-4">K/D Stats</th>
                            <th className="p-4">Updated By</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-[#232329]">
                         {scrims.map((s: any) => (
                             <tr key={s.id} className="hover:bg-white/5 transition-colors">
                                <td className="p-4 text-slate-400">{s.date?.toDate ? s.date.toDate().toLocaleDateString() : 'Today'}</td>
                                <td className="p-4 text-white font-bold">{s.opponent}</td>
                                <td className="p-4 text-slate-300">{s.map}</td>
                                <td className="p-4"><StatusBadge status={s.result} /> <span className="text-white ml-2 font-mono">{s.score}</span></td>
                                <td className="p-4 text-slate-400 text-xs">{s.stats}</td>
                                <td className="p-4 text-slate-500 text-xs">{s.updatedBy}</td>
                             </tr>
                         ))}
                          {scrims.length === 0 && <tr><td colSpan={6} className="p-8 text-center text-slate-500">No logs found.</td></tr>}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

// 10. Inventory
function InventoryView({ inventory, addAsset, updateAsset }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [newAsset, setNewAsset] = useState({ name: '', category: 'Hardware', assignedTo: '', location: 'Office', status: 'Active' });

    const handleSubmit = (e: any) => {
        e.preventDefault();
        addAsset(newAsset);
        setIsAdding(false);
        setNewAsset({ name: '', category: 'Hardware', assignedTo: '', location: 'Office', status: 'Active' });
    };

    return (
        <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">Inventory & Assets</h2>
                    <p className="text-slate-400 text-sm">Track org equipment and devices</p>
                </div>
                <div className="flex gap-2">
                    <button onClick={() => setIsAdding(true)} className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2"><LucidePlus size={16}/> Add Asset</button>
                </div>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="Register New Asset">
                <form onSubmit={handleSubmit} className="space-y-4">
                     <div><label className="block text-xs text-slate-400 mb-1">Asset Name</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newAsset.name} onChange={e => setNewAsset({...newAsset, name: e.target.value})} /></div>
                     <div><label className="block text-xs text-slate-400 mb-1">Category</label><select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newAsset.category} onChange={e => setNewAsset({...newAsset, category: e.target.value})}><option>Hardware</option><option>Mobile</option><option>Camera</option><option>Peripheral</option></select></div>
                     <div><label className="block text-xs text-slate-400 mb-1">Assigned To</label><input className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" placeholder="Employee Name" value={newAsset.assignedTo} onChange={e => setNewAsset({...newAsset, assignedTo: e.target.value})} /></div>
                     <div><label className="block text-xs text-slate-400 mb-1">Location</label><input className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newAsset.location} onChange={e => setNewAsset({...newAsset, location: e.target.value})} /></div>
                     <button type="submit" className="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded font-medium mt-4">Register Asset</button>
                </form>
            </Modal>
            
             <div className="bg-[#111115] border border-[#232329] rounded-xl overflow-hidden">
                <table className="w-full text-left text-sm">
                    <thead>
                        <tr className="bg-[#16161a] text-slate-500 font-medium">
                            <th className="p-4">Asset Name</th>
                            <th className="p-4">Category</th>
                            <th className="p-4">Assigned To</th>
                            <th className="p-4">Location</th>
                            <th className="p-4">Status</th>
                            <th className="p-4 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-[#232329]">
                         {inventory.map((item: any) => (
                             <tr key={item.id} className="hover:bg-white/5 transition-colors">
                                <td className="p-4 text-white font-medium">{item.name}</td>
                                <td className="p-4 text-slate-400">{item.category}</td>
                                <td className="p-4 text-white"><div className="flex items-center gap-2"><div className="w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center text-[10px] font-bold">{item.assignedTo?.[0] || '?'}</div> {item.assignedTo || 'Unassigned'}</div></td>
                                <td className="p-4 text-slate-400">{item.location}</td>
                                <td className="p-4"><StatusBadge status={item.status} /></td>
                                <td className="p-4 text-right"><button onClick={() => updateAsset(item.id, { status: item.status === 'Active' ? 'Repair' : 'Active' })} className="text-slate-500 hover:text-white"><LucideEdit size={16}/></button></td>
                             </tr>
                         ))}
                         {inventory.length === 0 && <tr><td colSpan={6} className="p-8 text-center text-slate-500">No assets found.</td></tr>}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

// 11. Content Pipeline
function ContentView({ content, addContent, updateContentStage }: any) {
    const [isAdding, setIsAdding] = useState(false);
    const [newTask, setNewTask] = useState({ title: '', type: 'Vlog', priority: 'Medium' });

    const handleSubmit = (e: any) => {
        e.preventDefault();
        addContent(newTask);
        setIsAdding(false);
        setNewTask({ title: '', type: 'Vlog', priority: 'Medium' });
    };

    const stages = ['Ideation', 'Scripting', 'Filming', 'Editing', 'Ready to Post'];

    return (
        <div className="space-y-6 animate-fadeIn h-full flex flex-col">
            <div className="flex justify-between items-end">
                <div>
                    <h2 className="text-2xl font-bold text-white">Content Pipeline</h2>
                    <p className="text-slate-400 text-sm">Production status and scheduling</p>
                </div>
                 <button onClick={() => setIsAdding(true)} className="bg-purple-600 hover:bg-purple-500 text-white px-4 py-2 rounded-lg text-sm font-medium">New Task</button>
            </div>

            <Modal isOpen={isAdding} onClose={() => setIsAdding(false)} title="New Content Task">
                <form onSubmit={handleSubmit} className="space-y-4">
                     <div><label className="block text-xs text-slate-400 mb-1">Title</label><input required className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTask.title} onChange={e => setNewTask({...newTask, title: e.target.value})} /></div>
                     <div><label className="block text-xs text-slate-400 mb-1">Type</label><select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTask.type} onChange={e => setNewTask({...newTask, type: e.target.value})}><option>Vlog</option><option>Reel</option><option>Short</option><option>Stream Highlight</option></select></div>
                     <div><label className="block text-xs text-slate-400 mb-1">Priority</label><select className="w-full bg-[#0a0a0c] border border-[#232329] rounded p-2 text-white outline-none focus:border-purple-500" value={newTask.priority} onChange={e => setNewTask({...newTask, priority: e.target.value})}><option>High</option><option>Medium</option><option>Low</option></select></div>
                     <button type="submit" className="w-full bg-purple-600 hover:bg-purple-500 text-white py-2 rounded font-medium mt-4">Add to Pipeline</button>
                </form>
            </Modal>
            
            <div className="flex-1 overflow-x-auto">
                <div className="flex gap-6 h-full min-w-max pb-4">
                    {stages.map((stage, i) => (
                        <div key={i} className="w-72 bg-[#111115] border border-[#232329] rounded-xl flex flex-col">
                            <div className="p-4 border-b border-[#232329] flex justify-between items-center bg-[#16161a] rounded-t-xl">
                                <h3 className="font-bold text-slate-300">{stage}</h3>
                                <span className="bg-[#232329] text-xs px-2 py-0.5 rounded text-slate-500">{content.filter((c: any) => c.stage === stage).length}</span>
                            </div>
                            <div className="p-3 space-y-3 overflow-y-auto flex-1 custom-scrollbar">
                                {content.filter((c: any) => c.stage === stage).map((card: any) => (
                                    <div key={card.id} className="bg-[#1e1e24] p-3 rounded-lg border border-[#232329] hover:border-slate-500 transition-colors group">
                                        <div className="flex gap-1 mb-2">
                                            <span className={`text-[9px] px-1.5 py-0.5 rounded uppercase font-bold ${card.priority === 'High' ? 'bg-red-500/20 text-red-400' : 'bg-blue-500/20 text-blue-400'}`}>{card.priority}</span>
                                            <span className="text-[9px] bg-slate-700 text-slate-300 px-1.5 py-0.5 rounded uppercase font-bold">{card.type}</span>
                                        </div>
                                        <p className="text-sm text-white font-medium leading-tight">{card.title}</p>
                                        <div className="flex items-center justify-between mt-3 pt-2 border-t border-[#232329]">
                                            <div className="flex -space-x-1.5">
                                                <div className="w-5 h-5 rounded-full bg-slate-600 border border-[#1e1e24]"></div>
                                            </div>
                                            <div className="flex gap-2">
                                                 {i > 0 && <button onClick={() => updateContentStage(card.id, stages[i-1])} className="text-slate-500 hover:text-white"><LucideChevronRight className="rotate-180" size={14}/></button>}
                                                 {i < stages.length - 1 && <button onClick={() => updateContentStage(card.id, stages[i+1])} className="text-slate-500 hover:text-white"><LucideChevronRight size={14}/></button>}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

// --- Main App Component ---

export default function DotExeDashboardV9() {
  const [user, setUser] = useState<any>(null);
  const [activeTab, setActiveTab] = useState('overview');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Data States
  const [employees, setEmployees] = useState<any[]>([]);
  const [transactions, setTransactions] = useState<any[]>([]);
  const [deals, setDeals] = useState<any[]>([]);
  const [schedule, setSchedule] = useState<any[]>([]);
  const [scrims, setScrims] = useState<any[]>([]);
  const [inventory, setInventory] = useState<any[]>([]);
  const [content, setContent] = useState<any[]>([]);
  const [roles, setRoles] = useState<any[]>([]);
  const [recentActivity, setRecentActivity] = useState<any[]>([]);
  
  // Auth
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } 
      else { await signInAnonymously(auth); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => { if (u) setUser({ ...u, role: 'admin' }); else setUser(null); });
    return () => unsubscribe();
  }, []);

  // Data Listeners
  useEffect(() => {
      if (!user) return;

      const unsubRoster = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'roster'), (s) => setEmployees(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubFinance = onSnapshot(query(collection(db, 'artifacts', appId, 'public', 'data', 'finance'), orderBy('date', 'desc')), (s) => setTransactions(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubDeals = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'deals'), (s) => setDeals(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubSchedule = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'schedule'), (s) => setSchedule(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubScrims = onSnapshot(query(collection(db, 'artifacts', appId, 'public', 'data', 'scrims'), orderBy('date', 'desc')), (s) => setScrims(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubInventory = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'inventory'), (s) => setInventory(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubContent = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'content'), (s) => setContent(s.docs.map(d => ({id: d.id, ...d.data()}))));
      const unsubRoles = onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'roles'), (s) => setRoles(s.docs.map(d => ({id: d.id, ...d.data()}))));
      
      return () => { unsubRoster(); unsubFinance(); unsubDeals(); unsubSchedule(); unsubScrims(); unsubInventory(); unsubContent(); unsubRoles(); };
  }, [user]);

  // Derived Activity Log
  useEffect(() => {
      const activities: any[] = [];
      scrims.slice(0, 3).forEach(s => activities.push({ title: 'Scrim Result', value: `${s.result} vs ${s.opponent}`, timestamp: 'Today' }));
      transactions.slice(0, 3).forEach(t => activities.push({ title: 'Transaction', value: `${t.type === 'income' ? '+' : '-'}₹${t.amount} (${t.category})`, timestamp: 'Today' }));
      setRecentActivity(activities.slice(0, 5));
  }, [scrims, transactions]);

  const logAction = (action: string) => console.log("Log:", action); // Placeholder for audit log write

  // Action Handlers
  const addEmployee = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'roster'), data);
  const updateEmployee = async (id: string, data: any) => await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'roster', id), data);
  const deleteEmployee = async (id: string) => await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'roster', id));
  
  const addTransaction = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'finance'), { ...data, date: serverTimestamp() });
  
  const addDeal = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'deals'), data);
  const updateDeal = async (id: string, data: any) => await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'deals', id), data);
  
  const addEvent = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'schedule'), data);

  const addScrim = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'scrims'), { ...data, date: serverTimestamp() });

  const addAsset = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'inventory'), data);
  const updateAsset = async (id: string, data: any) => await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'inventory', id), data);

  const addContent = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'content'), { ...data, stage: 'Ideation' });
  const updateContentStage = async (id: string, stage: string) => await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'content', id), { stage });

  const addRole = async (data: any) => await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'roles'), data);
  const updateRole = async (id: string, data: any) => await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'roles', id), data);

  // Seeder
  const seedData = async () => {
      // Seed roles if empty - EXACT MATCH TO REQ
      if (roles.length === 0) {
          await addRole({ name: 'Management (SuperAdmin)', desc: 'Full System Access', members: [] });
          await addRole({ name: 'Manager', desc: 'Team & CC Management', members: [] });
          await addRole({ name: 'Male Roster', desc: 'Esports Athletes', members: [] });
          await addRole({ name: 'Female Roster', desc: 'Esports Athletes', members: [] });
          await addRole({ name: 'Content Creators', desc: 'Streamers & Influencers', members: [] });
          await addRole({ name: 'Editors', desc: 'Post-Production', members: [] });
      }

      if (employees.length > 0) return; // Only seed other data if empty
      await addEmployee({ name: 'Jonathan Wick', role: 'Male Roster', salary: 50000, joined: '2023-01-15', status: 'Paid', method: 'UPI', utr: 'AXIS123', contract: 'Uploaded: contract.pdf' });
      await addTransaction({ title: 'Bootcamp Internet', type: 'expense', amount: 4500, category: 'Ops' });
      await addDeal({ title: 'Monster Energy Q4', client: 'Monster', value: 1200000, status: 'Sign Deal', assigneeType: 'ORG', commission: 100 });
      await addEvent({ title: 'Team Sync', time: '10:00', description: 'Weekly roadmap', type: 'Meeting' });
      await addScrim({ opponent: 'Global Esports', map: 'Ascent', result: 'Won', score: '13-9', stats: 'Top Frag: Jett', updatedBy: 'Coach' });
      await addAsset({ name: 'Streaming PC 1', category: 'Hardware', location: 'Booth A', status: 'Active', assignedTo: 'Streamer' });
      await addContent({ title: 'Vlog: Day 1', type: 'Vlog', priority: 'High', stage: 'Editing' });
      alert("Database Seeded!");
  };

  if (!user) return <div className="min-h-screen bg-[#09090b] flex items-center justify-center text-slate-500 font-mono text-sm">INITIALIZING SYSTEM...</div>;

  const OverviewView = () => (
      <div className="animate-fadeIn">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
            <div>
                <h1 className="text-3xl font-bold text-white mb-1">Command Center</h1>
                <p className="text-slate-400 text-sm">System Overview • <span className="text-purple-400 font-medium">All Systems Operational</span></p>
            </div>
            <div className="flex gap-2">
                 <button onClick={seedData} className="px-4 py-2 bg-[#111115] border border-[#232329] rounded-lg text-xs text-slate-400 hover:text-white hover:border-slate-500 transition-colors">
                    <LucideSave size={14} className="inline mr-2"/> Seed Data
                </button>
            </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <MetricCard title="Total Staff" value={employees.length} subtitle="Active Roster" icon={LucideUsers} colorClass="text-blue-400" iconBgClass="bg-blue-500/20" />
            <MetricCard title="Monthly Burn" value={`₹${(transactions.filter(t => t.type === 'expense').reduce((a,b) => a+b.amount, 0) + employees.reduce((a,e) => a+(Number(e.salary)||0),0)).toLocaleString()}`} subtitle="Payroll + Ops" icon={LucideActivity} colorClass="text-red-400" iconBgClass="bg-red-500/20" />
            <MetricCard title="Scrim Win Rate" value={scrims.length > 0 ? Math.round((scrims.filter(s => s.result === 'Won').length / scrims.length) * 100) + '%' : '0%'} subtitle={`Last ${scrims.length} Matches`} icon={LucideTrophy} colorClass="text-yellow-400" iconBgClass="bg-yellow-500/20" />
            <MetricCard title="Content Pipeline" value={content.length} subtitle="Tasks Active" icon={LucideVideo} colorClass="text-purple-400" iconBgClass="bg-purple-500/20" />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 bg-[#0a0a0c] border border-[#1e1e24] rounded-xl p-6">
                <div className="flex justify-between items-center mb-6">
                    <div className="flex items-center gap-2">
                        <LucideActivity size={16} className="text-purple-400" />
                        <h3 className="text-sm font-bold text-white">Live Operations Feed</h3>
                    </div>
                </div>
                <div className="space-y-4">
                    {recentActivity.map((act, i) => (
                        <ActivityItem key={i} title={act.title} value={act.value} timestamp={act.timestamp} />
                    ))}
                    {recentActivity.length === 0 && <p className="text-slate-500 text-sm">No recent activity recorded.</p>}
                </div>
            </div>

            <div className="bg-[#0a0a0c] border border-[#1e1e24] rounded-xl p-6 flex flex-col justify-between">
                <div>
                    <h3 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4">Upcoming Schedule</h3>
                    <div className="space-y-3">
                        {schedule.slice(0, 3).map((ev: any) => (
                             <div key={ev.id} className="flex gap-3 items-center text-sm">
                                <span className="text-slate-500 font-mono text-xs">{ev.time}</span>
                                <span className="text-white truncate">{ev.title}</span>
                            </div>
                        ))}
                         {schedule.length === 0 && <p className="text-slate-500 text-xs">No upcoming events.</p>}
                    </div>
                </div>
                <button onClick={() => setActiveTab('schedule')} className="w-full mt-6 bg-[#1e1e24] hover:bg-[#232329] text-white py-2 rounded-lg text-xs font-medium transition-colors border border-[#232329]">
                    View Full Schedule
                </button>
            </div>
        </div>
      </div>
  );

  return (
    <div className="flex h-screen bg-[#050505] text-slate-200 overflow-hidden font-sans selection:bg-purple-500/30">
      
      {mobileMenuOpen && <div className="fixed inset-0 bg-black/80 z-30 md:hidden backdrop-blur-sm transition-opacity" onClick={() => setMobileMenuOpen(false)} />}

      <div className={`fixed inset-y-0 left-0 z-40 bg-[#0a0a0c] border-r border-[#1e1e24] w-64 flex flex-col transition-transform duration-300 md:relative md:translate-x-0 ${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="p-6 pb-2">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 bg-gradient-to-br from-purple-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-purple-900/20">
              <span className="font-bold text-white font-mono text-xs">DXE</span>
            </div>
            <div>
              <h1 className="font-bold text-xl tracking-tight text-white italic">DOTEXE</h1>
              <div className="flex items-center gap-1.5">
                <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                <span className="text-[10px] font-bold text-slate-500 tracking-wider">ONLINE</span>
              </div>
            </div>
          </div>
          <div className="mb-2">
            <p className="text-[10px] font-bold text-slate-500 mb-2 uppercase tracking-wide">View As Role</p>
            <button className="w-full bg-[#16161a] border border-[#232329] text-white text-xs font-medium px-3 py-2.5 rounded-lg flex items-center justify-between hover:border-slate-600 transition-colors">
              <span>Management (Admin)</span>
              <LucideChevronDown size={14} className="text-slate-500" />
            </button>
          </div>
        </div>

        <nav className="flex-1 overflow-y-auto custom-scrollbar px-0">
          <NavSection title="Main Console" />
          <NavItem active={activeTab === 'overview'} onClick={() => setActiveTab('overview')} label="Overview" icon={LucideLayoutDashboard} />
          <NavItem active={activeTab === 'payroll'} onClick={() => setActiveTab('payroll')} label="Payroll Center" icon={LucideDollarSign} />

          <NavSection title="Admin" />
          <NavItem active={activeTab === 'access'} onClick={() => setActiveTab('access')} label="Team Access" icon={LucideShieldCheck} />
          <NavItem active={activeTab === 'rosters'} onClick={() => setActiveTab('rosters')} label="Rosters & Staff" icon={LucideUsers} />
          <NavItem active={activeTab === 'finance'} onClick={() => setActiveTab('finance')} label="Finance Master" icon={LucideCreditCard} />
          <NavItem active={activeTab === 'crm'} onClick={() => setActiveTab('crm')} label="CRM & Deals" icon={LucideTarget} />

          <NavSection title="Operations" />
          <NavItem active={activeTab === 'schedule'} onClick={() => setActiveTab('schedule')} label="Schedule" icon={LucideCalendar} />
          <NavItem active={activeTab === 'scrims'} onClick={() => setActiveTab('scrims')} label="Scrim Results" icon={LucideTrophy} />
          <NavItem active={activeTab === 'inventory'} onClick={() => setActiveTab('inventory')} label="Inventory & Assets" icon={LucideBox} />
          <NavItem active={activeTab === 'content'} onClick={() => setActiveTab('content')} label="Content Pipeline" icon={LucideVideo} />
        </nav>

        <div className="p-4 border-t border-[#1e1e24]">
             <button onClick={() => {signOut(auth); window.location.reload()}} className="flex items-center gap-2 text-xs font-medium text-slate-500 hover:text-white transition-colors w-full px-2">
                 <LucideLogOut size={14} /> <span>Sign Out</span>
             </button>
        </div>
      </div>

      <div className="flex-1 flex flex-col min-w-0 bg-[#050505] relative w-full overflow-hidden">
          <header className="h-16 border-b border-[#1e1e24] bg-[#050505] flex items-center justify-between px-6 sticky top-0 z-20">
              <div className="flex items-center gap-4">
                  <button onClick={() => setMobileMenuOpen(true)} className="md:hidden text-slate-400 hover:text-white"><LucideMenu size={24} /></button>
                  <h2 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400 hidden sm:block">
                      {activeTab === 'crm' ? 'CRM & Deals' : activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
                  </h2>
              </div>
              <div className="flex items-center gap-4">
                  <div className="hidden sm:flex items-center px-3 py-1 rounded-full border border-[#232329] bg-[#111115]">
                      <LucideShieldCheck size={12} className="text-slate-500 mr-2" />
                      <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wide">Management View</span>
                  </div>
                  <button className="w-8 h-8 rounded-full bg-[#1e1e24] flex items-center justify-center text-slate-400 hover:text-white relative transition-colors">
                      <span className="text-xs font-bold">1</span>
                  </button>
              </div>
          </header>

          <main className="flex-1 p-6 md:p-8 overflow-y-auto custom-scrollbar">
              <div className="max-w-7xl mx-auto h-full">
                {activeTab === 'overview' && <OverviewView />}
                {activeTab === 'payroll' && <PayrollView employees={employees} updateEmployee={updateEmployee} logAction={logAction} appId={appId} />}
                {activeTab === 'access' && <AccessView roles={roles} updateRole={updateRole} logAction={logAction} employees={employees} addRole={addRole} />}
                {activeTab === 'rosters' && <RosterView employees={employees} addEmployee={addEmployee} updateEmployee={updateEmployee} deleteEmployee={deleteEmployee} logAction={logAction} />}
                {activeTab === 'finance' && <FinanceView transactions={transactions} addTransaction={addTransaction} logAction={logAction} employees={employees} deals={deals} />}
                {activeTab === 'crm' && <CRMView deals={deals} addDeal={addDeal} updateDeal={updateDeal} employees={employees} />}
                {activeTab === 'schedule' && <ScheduleView schedule={schedule} addEvent={addEvent} />}
                {activeTab === 'scrims' && <ScrimsView scrims={scrims} addScrim={addScrim} />}
                {activeTab === 'inventory' && <InventoryView inventory={inventory} addAsset={addAsset} updateAsset={updateAsset} />}
                {activeTab === 'content' && <ContentView content={content} addContent={addContent} updateContentStage={updateContentStage} />}
              </div>
          </main>
      </div>
      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #0a0a0c; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #232329; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #33333d; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
      `}</style>
    </div>
  );
}