import React, { useState, useMemo, useEffect } from 'react';
import { 
  Users, UserPlus, Package, ShoppingCart, Activity, DollarSign, 
  Search, Filter, Plus, Trash2, Edit, RefreshCw, X, Menu, LogOut, CheckCircle, AlertCircle, FileText
} from 'lucide-react';

// --- UTILITY COMPONENTS ---

const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black/70 z-50 flex justify-center items-center p-4">
      <div className="bg-slate-900 border border-slate-700 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl flex flex-col">
        <div className="flex justify-between items-center p-6 border-b border-slate-800 sticky top-0 bg-slate-900/95 backdrop-blur z-10">
          <h2 className="text-xl font-bold text-cyan-400">{title}</h2>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
            <X size={24} />
          </button>
        </div>
        <div className="p-6">
          {children}
        </div>
      </div>
    </div>
  );
};

const StatCard = ({ title, value, icon: Icon, colorClass, subtitle }) => (
  <div className="bg-slate-800/50 border border-slate-700 p-6 rounded-xl flex items-start justify-between shadow-lg">
    <div>
      <p className="text-slate-400 text-sm font-medium mb-1">{title}</p>
      <h3 className={`text-3xl font-bold ${colorClass}`}>{value}</h3>
      {subtitle && <p className="text-slate-500 text-xs mt-2">{subtitle}</p>}
    </div>
    <div className={`p-3 rounded-lg bg-slate-800 ${colorClass.replace('text-', 'text-').replace('400', '400')}`}>
      <Icon size={24} />
    </div>
  </div>
);

// --- CUSTOM SVG LINE CHART ---
const LineChart = ({ data, lines }) => {
  if (!data || data.length === 0) return <div className="text-slate-500 text-center py-10">No data available</div>;

  const width = 800;
  const height = 300;
  const padding = 40;

  // Find global min and max for Y scale
  let min = 0;
  let max = 0;
  data.forEach(d => {
    lines.forEach(line => {
      if (d[line.key] > max) max = d[line.key];
      if (d[line.key] < min) min = d[line.key];
    });
  });

  // Add 10% padding to max
  max = max * 1.1 || 10;

  const scaleX = (index) => padding + (index * (width - 2 * padding) / Math.max(1, data.length - 1));
  const scaleY = (val) => height - padding - ((val - min) / (max - min) * (height - 2 * padding));

  return (
    <div className="w-full overflow-x-auto">
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto min-w-[600px]">
        {/* Grid and Axes */}
        <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke="#334155" strokeWidth="2" />
        <line x1={padding} y1={padding} x2={padding} y2={height - padding} stroke="#334155" strokeWidth="2" />
        
        {/* Y-Axis Labels */}
        {[0, 0.25, 0.5, 0.75, 1].map(tick => {
          const val = min + (max - min) * tick;
          const y = scaleY(val);
          return (
            <g key={tick}>
              <line x1={padding - 5} y1={y} x2={width - padding} y2={y} stroke="#1e293b" strokeDasharray="4 4" />
              <text x={padding - 10} y={y + 4} fill="#64748b" fontSize="12" textAnchor="end">${Math.round(val)}</text>
            </g>
          );
        })}

        {/* X-Axis Labels */}
        {data.map((d, i) => (
          <text key={i} x={scaleX(i)} y={height - padding + 20} fill="#64748b" fontSize="12" textAnchor="middle">{d.label}</text>
        ))}

        {/* Lines */}
        {lines.map((line, lineIdx) => {
          const points = data.map((d, i) => `${scaleX(i)},${scaleY(d[line.key])}`).join(' ');
          return (
            <g key={line.key}>
              <polyline points={points} fill="none" stroke={line.color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
              {data.map((d, i) => (
                <circle key={i} cx={scaleX(i)} cy={scaleY(d[line.key])} r="4" fill="#0f172a" stroke={line.color} strokeWidth="2" />
              ))}
            </g>
          );
        })}
      </svg>
      
      {/* Legend */}
      <div className="flex justify-center gap-6 mt-4">
        {lines.map(line => (
          <div key={line.key} className="flex items-center gap-2">
            <div className="w-4 h-1 rounded" style={{ backgroundColor: line.color }}></div>
            <span className="text-sm text-slate-300">{line.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
};


// --- INITIAL MOCK DATA ---
const initialUsers = [
  {
    id: "NOV-A1B2",
    name: "John Doe",
    cnic: "42101-1234567-1",
    phone: "0300-1234567",
    gender: "Male",
    fingerprint: "FP-001",
    isStaff: false,
    notes: "Requires evening slots",
    fileName: null,
    history: [
      { id: 'h1', startDate: '2025-01-01', endDate: '2026-06-01', fee: 5000, regFee: 1000, dateAdded: '2025-01-01' }
    ]
  },
  {
    id: "NOV-X9Y8",
    name: "Jane Smith",
    cnic: "42101-7654321-2",
    phone: "0321-7654321",
    gender: "Female",
    fingerprint: "FP-002",
    isStaff: true,
    notes: "Staff Member - Trainer",
    fileName: "id_card.pdf",
    history: [
      { id: 'h2', startDate: '2025-01-15', endDate: '2025-12-15', fee: 0, regFee: 0, dateAdded: '2025-01-15' }
    ]
  },
  {
    id: "NOV-Z3M4",
    name: "Ahmed Ali",
    cnic: "42101-1122334-1",
    phone: "0333-1122334",
    gender: "Male",
    fingerprint: "FP-003",
    isStaff: false,
    notes: "",
    fileName: null,
    history: [
      { id: 'h3', startDate: '2024-03-01', endDate: '2024-04-01', fee: 4000, regFee: 1000, dateAdded: '2024-03-01' } // Expired
    ]
  }
];

const initialInventory = [
  { id: 'p1', name: 'Optimum Nutrition Gold Standard Whey', category: 'Proteins', cost: 15000, price: 18000, stock: 24 },
  { id: 'p2', name: 'MuscleTech Creatine', category: 'Supplements', cost: 5000, price: 6500, stock: 15 },
  { id: 'p3', name: 'NovaFit Gym T-Shirt', category: 'Apparel', cost: 800, price: 1500, stock: 50 }
];

const initialCategories = ['Proteins', 'Supplements', 'Apparel', 'Accessories'];

const initialSales = [
  { id: 's1', productId: 'p1', productName: 'Optimum Nutrition Gold Standard Whey', qty: 2, pricePerPiece: 18000, costPerPiece: 15000, date: '2026-03-10T10:00:00' },
  { id: 's2', productId: 'p3', productName: 'NovaFit Gym T-Shirt', qty: 5, pricePerPiece: 1500, costPerPiece: 800, date: '2026-04-05T14:30:00' }
];

const initialExpenses = [
  {
    id: 'e1',
    name: 'Treadmill Servicing',
    category: 'Maintenance',
    history: [
      { id: 'eh1', cost: 15000, startDate: '2026-01-01', endDate: '2026-01-05', notes: 'Replaced belts', date: '2026-01-01' },
      { id: 'eh2', cost: 8000, startDate: '2026-04-10', endDate: '2026-04-12', notes: 'Motor tuning', date: '2026-04-10' }
    ]
  },
  {
    id: 'e2',
    name: 'Electricity Bill',
    category: 'Utilities',
    history: [
      { id: 'eh3', cost: 45000, startDate: '2026-03-01', endDate: '2026-03-31', notes: 'March Bill', date: '2026-04-05' }
    ]
  }
];


// --- MAIN APP COMPONENT ---
export default function App() {
  const [isAuthenticated, setIsAuth] = useState(false);
  const [activeTab, setActiveTab] = useState('B'); // Default to Users panel
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Global State
  const [users, setUsers] = useState(initialUsers);
  const [inventory, setInventory] = useState(initialInventory);
  const [categories, setCategories] = useState(initialCategories);
  const [sales, setSales] = useState(initialSales);
  const [expenses, setExpenses] = useState(initialExpenses);

  // Login Check
  const handleLogin = (e) => {
    e.preventDefault();
    const u = e.target.username.value;
    const p = e.target.password.value;
    if (u === 'NOVAFIT' && p === 'NOVAFIT2K26') {
      setIsAuth(true);
    } else {
      alert('Invalid Credentials');
    }
  };

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4 font-sans text-slate-200">
        <div className="max-w-md w-full bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl">
          <div className="text-center mb-8">
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-cyan-900/30 text-cyan-400 mb-4">
              <Activity size={32} />
            </div>
            <h1 className="text-3xl font-black text-white tracking-wider">NOVAFIT</h1>
            <p className="text-slate-400 mt-2">Gym Management Dashboard</p>
          </div>
          <form onSubmit={handleLogin} className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-slate-400 mb-1">Username</label>
              <input type="text" name="username" required defaultValue="NOVAFIT" className="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-500 transition-colors" />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-400 mb-1">Password</label>
              <input type="password" name="password" required defaultValue="NOVAFIT2K26" className="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-500 transition-colors" />
            </div>
            <button type="submit" className="w-full bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-3 px-4 rounded-lg transition-colors shadow-lg shadow-cyan-600/20">
              Access Dashboard
            </button>
          </form>
        </div>
      </div>
    );
  }

  // Helper: Check if a user's latest membership is active
  const isUserActive = (user) => {
    if (!user.history || user.history.length === 0) return false;
    const latest = user.history[user.history.length - 1];
    return new Date(latest.endDate) >= new Date();
  };

  const navItems = [
    { id: 'B', label: 'Users Dashboard', icon: Users },
    { id: 'A', label: 'Registration', icon: UserPlus },
    { id: 'C', label: 'Inventory', icon: Package },
    { id: 'D', label: 'Point of Sale', icon: ShoppingCart },
    { id: 'E', label: 'Finances', icon: DollarSign },
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans flex flex-col md:flex-row">
      {/* Sidebar */}
      <aside className={`w-full md:w-64 bg-slate-900 border-r border-slate-800 flex-shrink-0 flex flex-col ${isMobileMenuOpen ? 'block' : 'hidden md:flex'}`}>
        <div className="p-6 border-b border-slate-800 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-cyan-900/30 text-cyan-400 rounded-lg">
              <Activity size={24} />
            </div>
            <h1 className="text-xl font-black text-white tracking-widest">NOVAFIT</h1>
          </div>
          <button className="md:hidden text-slate-400" onClick={() => setIsMobileMenuOpen(false)}>
            <X size={24} />
          </button>
        </div>
        <nav className="p-4 flex-1 space-y-2">
          {navItems.map(item => (
            <button
              key={item.id}
              onClick={() => { setActiveTab(item.id); setIsMobileMenuOpen(false); }}
              className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all ${activeTab === item.id ? 'bg-cyan-600/20 text-cyan-400 border border-cyan-500/30' : 'text-slate-400 hover:bg-slate-800 hover:text-white'}`}
            >
              <item.icon size={20} />
              {item.label}
            </button>
          ))}
        </nav>
        <div className="p-4 border-t border-slate-800">
          <button onClick={() => setIsAuth(false)} className="w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium text-red-400 hover:bg-red-900/20 transition-colors">
            <LogOut size={20} />
            Logout
          </button>
        </div>
      </aside>

      {/* Mobile Header */}
      <div className="md:hidden bg-slate-900 border-b border-slate-800 p-4 flex justify-between items-center">
        <h1 className="text-lg font-black text-white">NOVAFIT</h1>
        <button onClick={() => setIsMobileMenuOpen(true)} className="text-slate-400">
          <Menu size={24} />
        </button>
      </div>

      {/* Main Content */}
      <main className="flex-1 overflow-y-auto p-4 md:p-8">
        <div className="max-w-7xl mx-auto">
          {activeTab === 'A' && <PanelRegistration users={users} setUsers={setUsers} setActiveTab={setActiveTab} />}
          {activeTab === 'B' && <PanelUsers users={users} setUsers={setUsers} isUserActive={isUserActive} />}
          {activeTab === 'C' && <PanelInventory inventory={inventory} setInventory={setInventory} categories={categories} setCategories={setCategories} sales={sales} />}
          {activeTab === 'D' && <PanelSelling inventory={inventory} setInventory={setInventory} sales={sales} setSales={setSales} setActiveTab={setActiveTab} />}
          {activeTab === 'E' && <PanelFinances users={users} inventory={inventory} sales={sales} expenses={expenses} setExpenses={setExpenses} />}
        </div>
      </main>
    </div>
  );
}

// ============================================================================
// PANEL A: REGISTRATION
// ============================================================================
const PanelRegistration = ({ users, setUsers, setActiveTab }) => {
  const [formData, setFormData] = useState({
    name: '', cnic: '', phone: '', startDate: '', endDate: '', gender: 'Male',
    fingerprint: '', fee: '', regFee: '', isStaff: false, notes: ''
  });
  const [fileName, setFileName] = useState('');

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
  };

  const handleFileChange = (e) => {
    if (e.target.files.length > 0) {
      setFileName(e.target.files[0].name);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newId = `NOV-${Math.random().toString(36).substring(2, 6).toUpperCase()}`;
    const newUser = {
      id: newId,
      name: formData.name,
      cnic: formData.cnic,
      phone: formData.phone,
      gender: formData.gender,
      fingerprint: formData.fingerprint,
      isStaff: formData.isStaff,
      notes: formData.notes,
      fileName: fileName || null,
      history: [
        {
          id: `h_${Date.now()}`,
          startDate: formData.startDate,
          endDate: formData.endDate,
          fee: Number(formData.fee) || 0,
          regFee: Number(formData.regFee) || 0,
          dateAdded: new Date().toISOString()
        }
      ]
    };
    
    setUsers(prev => [...prev, newUser]);
    alert(`User Registered Successfully! Assigned ID: ${newId}`);
    setActiveTab('B'); // Go back to user list
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-2"><UserPlus className="text-cyan-400"/> New Registration</h2>
        <p className="text-slate-400 text-sm">Add a new member or staff to the system.</p>
      </div>

      <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div><label className="block text-sm text-slate-400 mb-1">Full Name</label><input required type="text" name="name" value={formData.name} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">CNIC</label><input required type="text" name="cnic" value={formData.cnic} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" placeholder="XXXXX-XXXXXXX-X"/></div>
            <div><label className="block text-sm text-slate-400 mb-1">Phone Number</label><input required type="text" name="phone" value={formData.phone} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Gender</label>
              <select name="gender" value={formData.gender} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3">
                <option>Male</option><option>Female</option>
              </select>
            </div>
            <div><label className="block text-sm text-slate-400 mb-1">Fingerprint ID</label><input required type="text" name="fingerprint" value={formData.fingerprint} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" placeholder="e.g. A1B2C3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Upload Document / Receipt</label>
              <input type="file" onChange={handleFileChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-2 text-sm text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-cyan-900 file:text-cyan-400 hover:file:bg-cyan-800" />
            </div>
          </div>

          <hr className="border-slate-800" />
          
          <h3 className="text-lg font-semibold text-white">Membership & Payment</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div><label className="block text-sm text-slate-400 mb-1">Date Started</label><input required type="date" name="startDate" value={formData.startDate} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 color-scheme-dark" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Date of Expiry (Ended)</label><input required type="date" name="endDate" value={formData.endDate} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Monthly Fee Submitted</label><input required type="number" name="fee" value={formData.fee} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Registration Fee Submitted</label><input type="number" name="regFee" value={formData.regFee} onChange={handleChange} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          </div>

          <hr className="border-slate-800" />

          <div className="flex items-center gap-3 bg-slate-950 p-4 rounded-lg border border-slate-800">
            <input type="checkbox" id="isStaff" name="isStaff" checked={formData.isStaff} onChange={handleChange} className="w-5 h-5 accent-cyan-500 rounded bg-slate-800 border-slate-700" />
            <label htmlFor="isStaff" className="font-medium">Staff Member (Allows entry via Fingerprint without active fee checks)</label>
          </div>

          <div>
            <label className="block text-sm text-slate-400 mb-1">Additional Notes</label>
            <textarea name="notes" value={formData.notes} onChange={handleChange} rows="3" className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3"></textarea>
          </div>

          <div className="flex justify-end gap-4 pt-4 border-t border-slate-800">
            <button type="button" onClick={() => setActiveTab('B')} className="px-6 py-3 rounded-lg border border-slate-700 hover:bg-slate-800 transition-colors">Cancel</button>
            <button type="submit" className="px-6 py-3 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-bold transition-colors">Register Member</button>
          </div>
        </form>
      </div>
    </div>
  );
};

// ============================================================================
// PANEL B: USERS 
// ============================================================================
const PanelUsers = ({ users, setUsers, isUserActive }) => {
  const [search, setSearch] = useState('');
  const [filterGender, setFilterGender] = useState('All');
  const [filterStatus, setFilterStatus] = useState('All');
  
  const [selectedUser, setSelectedUser] = useState(null);
  const [isRenewModalOpen, setIsRenewModalOpen] = useState(false);
  const [renewData, setRenewData] = useState({ startDate: '', endDate: '', fee: '' });

  // Metrics
  const totalUsers = users.length;
  const totalMales = users.filter(u => u.gender === 'Male').length;
  const totalFemales = users.filter(u => u.gender === 'Female').length;
  const activeUsers = users.filter(u => isUserActive(u)).length;
  const expiredUsers = totalUsers - activeUsers;
  
  const totalFeesEverPaid = users.reduce((total, user) => {
    return total + (user.history || []).reduce((sum, h) => sum + Number(h.fee) + Number(h.regFee || 0), 0);
  }, 0);

  // Filtering
  const filteredUsers = useMemo(() => {
    return users.filter(u => {
      const matchSearch = u.name.toLowerCase().includes(search.toLowerCase()) || u.id.toLowerCase().includes(search.toLowerCase());
      const matchGender = filterGender === 'All' || u.gender === filterGender;
      const isActive = isUserActive(u);
      const matchStatus = filterStatus === 'All' || 
                          (filterStatus === 'Expired' && !isActive) || 
                          (filterStatus === 'Active' && isActive);
      return matchSearch && matchGender && matchStatus;
    });
  }, [users, search, filterGender, filterStatus]);

  const handleDelete = (id) => {
    if(window.confirm('Are you sure you want to delete this user?')) {
      setUsers(users.filter(u => u.id !== id));
    }
  };

  const openRenewModal = (user) => {
    setSelectedUser(user);
    const today = new Date().toISOString().split('T')[0];
    setRenewData({ startDate: today, endDate: '', fee: '' });
    setIsRenewModalOpen(true);
  };

  const handleRenewSubmit = (e) => {
    e.preventDefault();
    const updatedUsers = users.map(u => {
      if (u.id === selectedUser.id) {
        return {
          ...u,
          history: [...(u.history || []), {
            id: `h_${Date.now()}`,
            startDate: renewData.startDate,
            endDate: renewData.endDate,
            fee: Number(renewData.fee),
            regFee: 0,
            dateAdded: new Date().toISOString()
          }]
        };
      }
      return u;
    });
    setUsers(updatedUsers);
    setIsRenewModalOpen(false);
    alert('Membership Renewed!');
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-2"><Users className="text-cyan-400"/> Users Dashboard</h2>
        <p className="text-slate-400 text-sm">Manage members, view statuses, and renew memberships.</p>
      </div>

      {/* Top Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
        <StatCard title="Total Users" value={totalUsers} icon={Users} colorClass="text-white" />
        <StatCard title="Total Males" value={totalMales} icon={Users} colorClass="text-blue-400" />
        <StatCard title="Total Females" value={totalFemales} icon={Users} colorClass="text-pink-400" />
        <StatCard title="Active (Paid)" value={activeUsers} icon={CheckCircle} colorClass="text-green-400" />
        <StatCard title="Expired" value={expiredUsers} icon={AlertCircle} colorClass="text-red-400" />
        <StatCard title="Total Fees Paid" value={`$${totalFeesEverPaid.toLocaleString()}`} icon={DollarSign} colorClass="text-cyan-400" subtitle="All time including registration" />
      </div>

      {/* Filters & Search */}
      <div className="bg-slate-900 border border-slate-800 p-4 rounded-xl flex flex-col md:flex-row gap-4 justify-between items-center shadow-lg">
        <div className="relative w-full md:w-96">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
          <input 
            type="text" placeholder="Search by Name or ID..." 
            value={search} onChange={(e) => setSearch(e.target.value)}
            className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-cyan-500"
          />
        </div>
        <div className="flex w-full md:w-auto gap-4">
          <div className="flex items-center gap-2">
            <Filter size={16} className="text-slate-400"/>
            <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm">
              <option value="All">All Status</option>
              <option value="Active">Active / Paid</option>
              <option value="Expired">Expired</option>
            </select>
          </div>
          <div className="flex items-center gap-2">
            <select value={filterGender} onChange={(e) => setFilterGender(e.target.value)} className="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm">
              <option value="All">All Genders</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </div>
      </div>

      {/* Users List */}
      <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-xl">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm whitespace-nowrap">
            <thead className="bg-slate-800/50 text-slate-400 border-b border-slate-700">
              <tr>
                <th className="px-6 py-4 font-medium">User / ID</th>
                <th className="px-6 py-4 font-medium">Contact & Info</th>
                <th className="px-6 py-4 font-medium">Status</th>
                <th className="px-6 py-4 font-medium">Latest Expiry</th>
                <th className="px-6 py-4 font-medium text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800">
              {filteredUsers.map(user => {
                const active = isUserActive(user);
                const latestHistory = user.history && user.history.length > 0 ? user.history[user.history.length - 1] : null;
                
                return (
                  <tr key={user.id} className="hover:bg-slate-800/30 transition-colors">
                    <td className="px-6 py-4">
                      <div className="font-bold text-white">{user.name}</div>
                      <div className="text-xs text-cyan-500 font-mono mt-1">{user.id}</div>
                      {user.isStaff && <span className="inline-block mt-1 px-2 py-0.5 rounded text-[10px] font-bold bg-purple-900/50 text-purple-400 border border-purple-700">STAFF</span>}
                    </td>
                    <td className="px-6 py-4">
                      <div className="text-slate-300">{user.phone}</div>
                      <div className="text-xs text-slate-500 mt-1">{user.gender} • FP: {user.fingerprint}</div>
                    </td>
                    <td className="px-6 py-4">
                      <span className={`px-3 py-1 rounded-full text-xs font-medium border ${active ? 'bg-green-900/20 text-green-400 border-green-800' : 'bg-red-900/20 text-red-400 border-red-800'}`}>
                        {active ? 'Active' : 'Expired'}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-slate-300">
                      {latestHistory ? new Date(latestHistory.endDate).toLocaleDateString() : 'N/A'}
                    </td>
                    <td className="px-6 py-4 text-right space-x-2">
                      <button onClick={() => openRenewModal(user)} className="px-3 py-1.5 bg-cyan-900/30 text-cyan-400 hover:bg-cyan-800 hover:text-white rounded border border-cyan-800 transition-colors inline-flex items-center gap-1 text-xs">
                        <RefreshCw size={14}/> Renew
                      </button>
                      <button onClick={() => setSelectedUser({...user, viewProfile: true})} className="px-3 py-1.5 bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white rounded border border-slate-700 transition-colors text-xs">
                        Profile
                      </button>
                      <button onClick={() => handleDelete(user.id)} className="px-3 py-1.5 bg-red-900/20 text-red-400 hover:bg-red-900 hover:text-white rounded border border-red-800 transition-colors text-xs">
                        <Trash2 size={14}/>
                      </button>
                    </td>
                  </tr>
                );
              })}
              {filteredUsers.length === 0 && (
                <tr>
                  <td colSpan="5" className="px-6 py-10 text-center text-slate-500">No users found matching filters.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* RENEW MODAL */}
      <Modal isOpen={isRenewModalOpen} onClose={() => setIsRenewModalOpen(false)} title={`Renew Membership: ${selectedUser?.name}`}>
        <form onSubmit={handleRenewSubmit} className="space-y-4">
          <div><label className="block text-sm text-slate-400 mb-1">Start Date</label><input required type="date" value={renewData.startDate} onChange={e => setRenewData({...renewData, startDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div><label className="block text-sm text-slate-400 mb-1">Expiry Date</label><input required type="date" value={renewData.endDate} onChange={e => setRenewData({...renewData, endDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div><label className="block text-sm text-slate-400 mb-1">Payment Paid Amount</label><input required type="number" value={renewData.fee} onChange={e => setRenewData({...renewData, fee: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800 mt-6">
            <button type="button" onClick={() => setIsRenewModalOpen(false)} className="px-4 py-2 rounded-lg border border-slate-700 hover:bg-slate-800">Cancel</button>
            <button type="submit" className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-bold">Process Renewal</button>
          </div>
        </form>
      </Modal>

      {/* PROFILE MODAL */}
      <Modal isOpen={selectedUser?.viewProfile} onClose={() => setSelectedUser(null)} title={`User Profile: ${selectedUser?.name}`}>
        {selectedUser && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-4 text-sm bg-slate-950 p-4 rounded-lg border border-slate-800">
              <div><span className="text-slate-500 block">System ID</span> <span className="font-mono text-cyan-400">{selectedUser.id}</span></div>
              <div><span className="text-slate-500 block">CNIC</span> <span className="text-white">{selectedUser.cnic}</span></div>
              <div><span className="text-slate-500 block">Phone</span> <span className="text-white">{selectedUser.phone}</span></div>
              <div><span className="text-slate-500 block">Gender</span> <span className="text-white">{selectedUser.gender}</span></div>
              <div><span className="text-slate-500 block">Fingerprint ID</span> <span className="text-white">{selectedUser.fingerprint}</span></div>
              <div><span className="text-slate-500 block">Role</span> <span className="text-white">{selectedUser.isStaff ? 'Staff Member' : 'Regular Member'}</span></div>
              <div className="col-span-2"><span className="text-slate-500 block">Attached File</span> <span className="text-white flex items-center gap-2"><FileText size={14}/> {selectedUser.fileName || 'No file attached'}</span></div>
              <div className="col-span-2"><span className="text-slate-500 block">Notes</span> <span className="text-white">{selectedUser.notes || 'None'}</span></div>
            </div>

            <h3 className="font-bold text-white border-b border-slate-800 pb-2">Payment History</h3>
            <div className="max-h-60 overflow-y-auto pr-2">
              <div className="space-y-3">
                {[...selectedUser.history].reverse().map((h, i) => (
                  <div key={h.id} className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 text-sm flex justify-between items-center">
                    <div>
                      <div className="font-semibold text-white">Period: {new Date(h.startDate).toLocaleDateString()} - {new Date(h.endDate).toLocaleDateString()}</div>
                      <div className="text-slate-400 text-xs mt-1">Recorded on: {new Date(h.dateAdded).toLocaleString()}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-cyan-400 font-bold">${h.fee} <span className="text-xs text-slate-500 font-normal">Fee</span></div>
                      {h.regFee > 0 && <div className="text-purple-400 font-bold text-xs">+${h.regFee} Reg</div>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            <div className="flex justify-end">
              <button onClick={() => { setSelectedUser({...selectedUser, viewProfile: false}); openRenewModal(selectedUser); }} className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg flex items-center gap-2 font-medium">
                <RefreshCw size={16}/> Renew Membership Now
              </button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

// ============================================================================
// PANEL C: INVENTORY
// ============================================================================
const PanelInventory = ({ inventory, setInventory, categories, setCategories, sales }) => {
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
  const [newCategory, setNewCategory] = useState('');
  const [formData, setFormData] = useState({ name: '', category: categories[0] || '', cost: '', price: '', stock: '' });
  
  const [selectedProduct, setSelectedProduct] = useState(null);

  // Metrics
  const totalProducts = inventory.length;
  const totalStock = inventory.reduce((sum, item) => sum + Number(item.stock), 0);
  const totalInventoryCost = inventory.reduce((sum, item) => sum + (Number(item.cost) * Number(item.stock)), 0);
  
  // Realized profit from past sales
  const totalRealizedProfit = sales.reduce((sum, s) => sum + ((s.pricePerPiece - s.costPerPiece) * s.qty), 0);

  const handleAddSubmit = (e) => {
    e.preventDefault();
    const newId = `p_${Date.now()}`;
    setInventory([...inventory, {
      id: newId,
      name: formData.name,
      category: formData.category || categories[0],
      cost: Number(formData.cost),
      price: Number(formData.price),
      stock: Number(formData.stock)
    }]);
    setIsAddModalOpen(false);
    setFormData({ name: '', category: categories[0] || '', cost: '', price: '', stock: '' });
  };

  const handleAddCategory = (e) => {
    e.preventDefault();
    if(newCategory && !categories.includes(newCategory)) {
      setCategories([...categories, newCategory]);
      setNewCategory('');
    }
  };

  const handleDelete = (id) => {
    if(window.confirm('Delete this product?')) setInventory(inventory.filter(i => i.id !== id));
  };

  const getProductSales = (productId) => sales.filter(s => s.productId === productId);

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex justify-between items-end">
        <div>
          <h2 className="text-2xl font-bold text-white flex items-center gap-2"><Package className="text-cyan-400"/> Inventory Management</h2>
          <p className="text-slate-400 text-sm">Track products, stock, and view sales history.</p>
        </div>
        <div className="flex gap-3">
          <button onClick={() => setIsCategoryModalOpen(true)} className="px-4 py-2 bg-slate-800 text-slate-200 border border-slate-700 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors">
            Manage Categories
          </button>
          <button onClick={() => setIsAddModalOpen(true)} className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg text-sm font-bold flex items-center gap-2 shadow-lg shadow-cyan-900/50 transition-colors">
            <Plus size={16}/> Add Product
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <StatCard title="Total Unique Products" value={totalProducts} icon={Package} colorClass="text-white" />
        <StatCard title="Total Items in Stock" value={totalStock} icon={Package} colorClass="text-blue-400" />
        <StatCard title="Total Stock Cost" value={`$${totalInventoryCost.toLocaleString()}`} icon={DollarSign} colorClass="text-red-400" subtitle="Cost of current inventory" />
        <StatCard title="Total Realized Profit" value={`$${totalRealizedProfit.toLocaleString()}`} icon={Activity} colorClass="text-green-400" subtitle="From all past sales" />
      </div>

      <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-xl">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm whitespace-nowrap">
            <thead className="bg-slate-800/50 text-slate-400 border-b border-slate-700">
              <tr>
                <th className="px-6 py-4 font-medium">Product Name</th>
                <th className="px-6 py-4 font-medium">Category</th>
                <th className="px-6 py-4 font-medium text-right">Cost Price</th>
                <th className="px-6 py-4 font-medium text-right">Selling Price</th>
                <th className="px-6 py-4 font-medium text-right">In Stock</th>
                <th className="px-6 py-4 font-medium text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800">
              {inventory.map(item => (
                <tr key={item.id} className="hover:bg-slate-800/30 transition-colors">
                  <td className="px-6 py-4 font-bold text-white">{item.name}</td>
                  <td className="px-6 py-4 text-slate-300">
                    <span className="px-2 py-1 bg-slate-800 rounded text-xs border border-slate-700">{item.category}</span>
                  </td>
                  <td className="px-6 py-4 text-right text-red-400 font-mono">${item.cost}</td>
                  <td className="px-6 py-4 text-right text-green-400 font-mono">${item.price}</td>
                  <td className="px-6 py-4 text-right">
                    <span className={`font-bold ${item.stock < 5 ? 'text-red-500' : 'text-white'}`}>{item.stock}</span>
                  </td>
                  <td className="px-6 py-4 text-right space-x-2">
                     <button onClick={() => setSelectedProduct(item)} className="px-3 py-1.5 bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white rounded border border-slate-700 transition-colors text-xs">
                        History
                      </button>
                    <button onClick={() => handleDelete(item.id)} className="px-3 py-1.5 bg-red-900/20 text-red-400 hover:bg-red-900 hover:text-white rounded border border-red-800 transition-colors text-xs">
                      <Trash2 size={14}/>
                    </button>
                  </td>
                </tr>
              ))}
              {inventory.length === 0 && <tr><td colSpan="6" className="px-6 py-10 text-center text-slate-500">No products in inventory.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      {/* ADD MODAL */}
      <Modal isOpen={isAddModalOpen} onClose={() => setIsAddModalOpen(false)} title="Add New Product">
        <form onSubmit={handleAddSubmit} className="space-y-4">
          <div><label className="block text-sm text-slate-400 mb-1">Product Name</label><input required type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div>
            <label className="block text-sm text-slate-400 mb-1">Category</label>
            <select required value={formData.category} onChange={e => setFormData({...formData, category: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3">
              {categories.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div><label className="block text-sm text-slate-400 mb-1">Costing Price (Per item)</label><input required type="number" value={formData.cost} onChange={e => setFormData({...formData, cost: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Selling Price (Per item)</label><input required type="number" value={formData.price} onChange={e => setFormData({...formData, price: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          </div>
          <div><label className="block text-sm text-slate-400 mb-1">Initial Quantity</label><input required type="number" value={formData.stock} onChange={e => setFormData({...formData, stock: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800 mt-6">
            <button type="button" onClick={() => setIsAddModalOpen(false)} className="px-4 py-2 rounded-lg border border-slate-700 hover:bg-slate-800">Cancel</button>
            <button type="submit" className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-bold">Add to Inventory</button>
          </div>
        </form>
      </Modal>

      {/* CATEGORY MODAL */}
      <Modal isOpen={isCategoryModalOpen} onClose={() => setIsCategoryModalOpen(false)} title="Manage Categories">
        <div className="space-y-6">
          <form onSubmit={handleAddCategory} className="flex gap-2">
            <input type="text" value={newCategory} onChange={e => setNewCategory(e.target.value)} placeholder="New Category Name..." className="flex-1 bg-slate-950 border border-slate-700 rounded-lg p-3" required />
            <button type="submit" className="px-4 bg-cyan-600 hover:bg-cyan-500 rounded-lg text-white font-bold"><Plus size={20}/></button>
          </form>
          <div className="bg-slate-950 border border-slate-800 rounded-lg p-2 max-h-60 overflow-y-auto">
            {categories.map(c => (
              <div key={c} className="p-3 border-b border-slate-800 last:border-0 text-white flex justify-between items-center">
                {c}
              </div>
            ))}
          </div>
        </div>
      </Modal>

      {/* PRODUCT HISTORY MODAL */}
      <Modal isOpen={!!selectedProduct} onClose={() => setSelectedProduct(null)} title={`Sales History: ${selectedProduct?.name}`}>
        {selectedProduct && (() => {
          const prodSales = getProductSales(selectedProduct.id);
          return (
            <div className="space-y-4">
              <div className="flex justify-between p-4 bg-slate-950 rounded-lg border border-slate-800">
                <div>
                  <p className="text-slate-400 text-xs uppercase tracking-wider">Current Stock</p>
                  <p className="text-xl font-bold text-white">{selectedProduct.stock}</p>
                </div>
                <div>
                   <p className="text-slate-400 text-xs uppercase tracking-wider">Unit Cost / Price</p>
                   <p className="text-xl font-bold text-white">${selectedProduct.cost} / <span className="text-cyan-400">${selectedProduct.price}</span></p>
                </div>
              </div>
              <h3 className="font-bold text-white border-b border-slate-800 pb-2">Transactions</h3>
              <div className="max-h-64 overflow-y-auto pr-2 space-y-2">
                {prodSales.map(s => (
                  <div key={s.id} className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 text-sm flex flex-col sm:flex-row justify-between sm:items-center gap-2">
                    <div>
                      <div className="text-slate-300">{new Date(s.date).toLocaleString()}</div>
                      <div className="text-xs text-slate-500 mt-1">Cost: ${s.costPerPiece} | Sold: ${s.pricePerPiece}</div>
                    </div>
                    <div className="text-right flex items-center justify-between sm:block">
                      <div className="font-bold text-white">Qty: {s.qty}</div>
                      <div className="text-green-400 font-bold">Total: ${s.qty * s.pricePerPiece}</div>
                    </div>
                  </div>
                ))}
                {prodSales.length === 0 && <p className="text-slate-500 text-center py-4">No sales history yet.</p>}
              </div>
            </div>
          )
        })()}
      </Modal>
    </div>
  );
};

// ============================================================================
// PANEL D: SELLING (POINT OF SALE)
// ============================================================================
const PanelSelling = ({ inventory, setInventory, sales, setSales, setActiveTab }) => {
  const [selectedProductId, setSelectedProductId] = useState('');
  const [qty, setQty] = useState(1);
  const [sellingPrice, setSellingPrice] = useState('');

  const selectedProduct = inventory.find(p => p.id === selectedProductId);

  // Update default selling price when product changes
  useEffect(() => {
    if (selectedProduct) setSellingPrice(selectedProduct.price);
  }, [selectedProductId, selectedProduct]);

  const handleSale = (e) => {
    e.preventDefault();
    if (!selectedProduct) return alert('Select a product');
    if (qty > selectedProduct.stock) return alert(`Not enough stock! Only ${selectedProduct.stock} left.`);
    
    // Update Inventory
    const updatedInventory = inventory.map(item => 
      item.id === selectedProductId ? { ...item, stock: item.stock - qty } : item
    );
    setInventory(updatedInventory);

    // Record Sale
    const newSale = {
      id: `sale_${Date.now()}`,
      productId: selectedProduct.id,
      productName: selectedProduct.name,
      qty: Number(qty),
      pricePerPiece: Number(sellingPrice),
      costPerPiece: selectedProduct.cost,
      date: new Date().toISOString()
    };
    setSales([...sales, newSale]);
    
    alert('Sale recorded successfully!');
    // Reset form
    setSelectedProductId('');
    setQty(1);
    setSellingPrice('');
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-3xl mx-auto">
      <div className="text-center mb-8">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-900/30 text-green-400 mb-4 shadow-lg shadow-green-900/20">
          <ShoppingCart size={32} />
        </div>
        <h2 className="text-3xl font-black text-white">Point of Sale</h2>
        <p className="text-slate-400 mt-2">Record an inventory sale to a member or guest.</p>
      </div>

      <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 md:p-8 shadow-2xl">
        <form onSubmit={handleSale} className="space-y-6">
          
          <div>
            <label className="block text-sm font-medium text-slate-400 mb-2">Select Product</label>
            <select 
              required value={selectedProductId} onChange={e => setSelectedProductId(e.target.value)} 
              className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-4 text-lg text-white focus:outline-none focus:border-green-500 shadow-inner"
            >
              <option value="">-- Choose Product --</option>
              {inventory.filter(i => i.stock > 0).map(p => (
                <option key={p.id} value={p.id}>{p.name} (Stock: {p.stock})</option>
              ))}
            </select>
          </div>

          {selectedProduct && (
            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 flex justify-between items-center">
              <div>
                <p className="text-slate-500 text-xs uppercase">Base Costing</p>
                <p className="text-red-400 font-mono font-bold">${selectedProduct.cost}</p>
              </div>
              <div className="text-right">
                <p className="text-slate-500 text-xs uppercase">Suggested Price</p>
                <p className="text-cyan-400 font-mono font-bold text-xl">${selectedProduct.price}</p>
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-slate-400 mb-2">Quantity to Sell</label>
              <input 
                required type="number" min="1" max={selectedProduct ? selectedProduct.stock : 999}
                value={qty} onChange={e => setQty(Number(e.target.value))} 
                className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-4 text-xl text-white font-bold focus:outline-none focus:border-green-500" 
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-400 mb-2">Final Selling Price (Per Piece)</label>
              <div className="relative">
                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">$</span>
                <input 
                  required type="number" value={sellingPrice} onChange={e => setSellingPrice(e.target.value)} 
                  className="w-full bg-slate-950 border border-slate-700 rounded-xl pl-10 pr-4 py-4 text-xl text-green-400 font-bold focus:outline-none focus:border-green-500" 
                />
              </div>
            </div>
          </div>

          <div className="pt-6 border-t border-slate-800">
            <div className="flex justify-between items-end mb-6">
              <span className="text-slate-400 text-lg">Total Charge:</span>
              <span className="text-4xl font-black text-white">${(qty * Number(sellingPrice) || 0).toLocaleString()}</span>
            </div>
            
            <button type="submit" className="w-full bg-green-600 hover:bg-green-500 text-white font-black text-lg py-4 rounded-xl transition-all shadow-lg shadow-green-600/20 active:scale-[0.98]">
              COMPLETE SALE
            </button>
          </div>
        </form>
      </div>
      
      <div className="text-center">
        <button onClick={() => setActiveTab('C')} className="text-slate-500 hover:text-cyan-400 text-sm transition-colors">
          View all inventory details &rarr;
        </button>
      </div>
    </div>
  );
};


// ============================================================================
// PANEL E: PERSONAL FINANCES / EXPENSES
// ============================================================================
const PanelFinances = ({ users, inventory, sales, expenses, setExpenses }) => {
  const [isAddExpenseModalOpen, setIsAddExpenseModalOpen] = useState(false);
  const [isRenewModalOpen, setIsRenewModalOpen] = useState(false);
  
  const [formData, setFormData] = useState({ name: '', category: '', cost: '', startDate: '', endDate: '', notes: '' });
  const [selectedExpense, setSelectedExpense] = useState(null);

  // --- FINANCIAL CALCULATIONS ---
  // 1. Total Payment Received from Users (All history)
  const totalUserPayments = users.reduce((total, user) => {
    return total + (user.history || []).reduce((sum, h) => sum + Number(h.fee) + Number(h.regFee || 0), 0);
  }, 0);

  // 2. Profit Generated From Inventory
  const totalInventoryProfit = sales.reduce((sum, s) => sum + ((s.pricePerPiece - s.costPerPiece) * s.qty), 0);

  // 3. Total Costing (Inventory Base Cost of sold items + Personal Expenses)
  const totalInventoryCost = sales.reduce((sum, s) => sum + (s.costPerPiece * s.qty), 0);
  const totalPersonalExpenses = expenses.reduce((total, expense) => {
    return total + expense.history.reduce((sum, h) => sum + Number(h.cost), 0);
  }, 0);
  const totalCosting = totalInventoryCost + totalPersonalExpenses;

  // 4. Total Revenue Generated
  const totalRevenue = totalUserPayments + (sales.reduce((sum, s) => sum + (s.pricePerPiece * s.qty), 0)); 
  
  // 5. Total Final Profit (Total Revenue - Total Costing)
  const totalFinalProfit = totalRevenue - totalCosting;

  // --- CHART DATA GENERATION ---
  // We need to group all transactions by month to create a line chart.
  // We will mock this over the last 6 months based on our data.
  const chartData = useMemo(() => {
    const months = {};
    const getMonthKey = (dStr) => { const d = new Date(dStr); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`; };
    const getMonthLabel = (key) => { const d = new Date(`${key}-01`); return d.toLocaleDateString('default', {month:'short', year:'numeric'}); };

    // Initialize map
    [...users, ...sales, ...expenses].forEach(item => {
      if(item.history) {
        item.history.forEach(h => { if(h.dateAdded || h.date) months[getMonthKey(h.dateAdded || h.date)] = { revenue: 0, cost: 0, profit: 0 }; });
      }
      if(item.date) months[getMonthKey(item.date)] = { revenue: 0, cost: 0, profit: 0 };
    });

    // Populate data
    users.forEach(u => u.history?.forEach(h => {
      const k = getMonthKey(h.dateAdded);
      if(months[k]) months[k].revenue += Number(h.fee) + Number(h.regFee || 0);
    }));
    
    sales.forEach(s => {
      const k = getMonthKey(s.date);
      if(months[k]) {
        months[k].revenue += (s.pricePerPiece * s.qty);
        months[k].cost += (s.costPerPiece * s.qty);
      }
    });

    expenses.forEach(e => e.history?.forEach(h => {
      const k = getMonthKey(h.date);
      if(months[k]) months[k].cost += Number(h.cost);
    }));

    // Calculate profit per month and format for chart
    return Object.keys(months).sort().map(key => {
      months[key].profit = months[key].revenue - months[key].cost;
      return { label: getMonthLabel(key), ...months[key] };
    });
  }, [users, sales, expenses]);


  const handleAddExpense = (e) => {
    e.preventDefault();
    const newId = `exp_${Date.now()}`;
    const newExpense = {
      id: newId,
      name: formData.name,
      category: formData.category,
      history: [{
        id: `eh_${Date.now()}`,
        cost: Number(formData.cost),
        startDate: formData.startDate,
        endDate: formData.endDate,
        notes: formData.notes,
        date: new Date().toISOString()
      }]
    };
    setExpenses([...expenses, newExpense]);
    setIsAddExpenseModalOpen(false);
    setFormData({ name: '', category: '', cost: '', startDate: '', endDate: '', notes: '' });
  };

  const handleRenewExpense = (e) => {
    e.preventDefault();
    const updated = expenses.map(exp => {
      if(exp.id === selectedExpense.id) {
        return {
          ...exp,
          history: [...exp.history, {
            id: `eh_${Date.now()}`,
            cost: Number(formData.cost),
            startDate: formData.startDate,
            endDate: formData.endDate,
            notes: formData.notes,
            date: new Date().toISOString()
          }]
        }
      }
      return exp;
    });
    setExpenses(updated);
    setIsRenewModalOpen(false);
  };

  const openRenewModal = (expense) => {
    setSelectedExpense(expense);
    setFormData({ name: expense.name, category: expense.category, cost: '', startDate: '', endDate: '', notes: '' });
    setIsRenewModalOpen(true);
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-2"><Activity className="text-cyan-400"/> Financial Dashboard</h2>
        <p className="text-slate-400 text-sm">Overview of revenue, profits, costs, and personal gym expenses.</p>
      </div>

      {/* Primary Financial Overview Box */}
      <div className="bg-gradient-to-br from-slate-900 to-slate-950 border border-slate-800 p-6 md:p-8 rounded-2xl shadow-2xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-slate-800">
          <div className="py-4 md:py-0">
            <p className="text-slate-400 font-medium uppercase tracking-widest text-sm mb-2">Total Revenue Generated</p>
            <p className="text-4xl md:text-5xl font-black text-cyan-400">${totalRevenue.toLocaleString()}</p>
            <p className="text-slate-500 text-xs mt-2">(User Fees + Sales)</p>
          </div>
          <div className="py-4 md:py-0">
            <p className="text-slate-400 font-medium uppercase tracking-widest text-sm mb-2">Total Costing</p>
            <p className="text-4xl md:text-5xl font-black text-red-400">${totalCosting.toLocaleString()}</p>
            <p className="text-slate-500 text-xs mt-2">(Inventory COGS + Expenses)</p>
          </div>
          <div className="py-4 md:py-0">
            <p className="text-slate-400 font-medium uppercase tracking-widest text-sm mb-2">Net Profit</p>
            <p className={`text-4xl md:text-5xl font-black ${totalFinalProfit >= 0 ? 'text-green-400' : 'text-orange-500'}`}>
              ${totalFinalProfit.toLocaleString()}
            </p>
            <p className="text-slate-500 text-xs mt-2">Revenue - Costs</p>
          </div>
        </div>
      </div>

      {/* Sub-Metrics requested in prompt */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <StatCard title="User Payments Received" value={`$${totalUserPayments.toLocaleString()}`} icon={Users} colorClass="text-purple-400" />
        <StatCard title="Inventory Profit" value={`$${totalInventoryProfit.toLocaleString()}`} icon={Package} colorClass="text-green-400" />
        <StatCard title="Personal Gym Expenses" value={`$${totalPersonalExpenses.toLocaleString()}`} icon={DollarSign} colorClass="text-orange-400" />
      </div>

      {/* LINE GRAPH */}
      <div className="bg-slate-900 border border-slate-800 p-6 rounded-xl shadow-xl">
        <h3 className="font-bold text-white mb-6 text-lg">Financial Growth Over Time</h3>
        <LineChart 
          data={chartData} 
          lines={[
            { key: 'revenue', name: 'Revenue', color: '#22d3ee' }, // Cyan
            { key: 'cost', name: 'Cost', color: '#f87171' },    // Red
            { key: 'profit', name: 'Profit', color: '#4ade80' }    // Green
          ]} 
        />
      </div>

      {/* PERSONAL COSTING SECTION */}
      <div className="mt-12">
        <div className="flex justify-between items-end mb-4">
          <div>
            <h3 className="text-xl font-bold text-white">Personal Gym Expenses</h3>
            <p className="text-slate-400 text-sm">Manage maintenance, bills, equipment service, etc.</p>
          </div>
          <button onClick={() => { setFormData({ name: '', category: '', cost: '', startDate: '', endDate: '', notes: '' }); setIsAddExpenseModalOpen(true); }} className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg text-sm font-bold flex items-center gap-2 border border-slate-700 transition-colors">
            <Plus size={16}/> Add Expense Record
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {expenses.map(expense => {
            const totalExpCost = expense.history.reduce((s, h) => s + Number(h.cost), 0);
            return (
              <div key={expense.id} className="bg-slate-900 border border-slate-800 rounded-xl p-5 shadow-lg flex flex-col justify-between">
                <div>
                  <div className="flex justify-between items-start mb-2">
                    <h4 className="font-bold text-white text-lg">{expense.name}</h4>
                    <span className="px-2 py-1 bg-slate-800 rounded text-xs border border-slate-700 text-slate-300">{expense.category}</span>
                  </div>
                  <div className="text-red-400 font-bold text-xl mb-4">Total Cost: ${totalExpCost.toLocaleString()}</div>
                  
                  <div className="space-y-2 mb-4 max-h-32 overflow-y-auto pr-2">
                    {[...expense.history].reverse().map(h => (
                      <div key={h.id} className="bg-slate-950 p-2 rounded text-sm border border-slate-800 flex justify-between items-center">
                        <div>
                          <span className="text-slate-300 block">{h.startDate} to {h.endDate}</span>
                          <span className="text-slate-500 text-xs">{h.notes || 'No notes'}</span>
                        </div>
                        <span className="text-red-400 font-mono">${h.cost}</span>
                      </div>
                    ))}
                  </div>
                </div>
                
                <div className="pt-4 border-t border-slate-800 flex justify-end gap-2">
                  <button onClick={() => setExpenses(expenses.filter(e => e.id !== expense.id))} className="p-2 text-slate-500 hover:text-red-400 bg-slate-950 rounded border border-slate-800 transition-colors">
                    <Trash2 size={16}/>
                  </button>
                  <button onClick={() => openRenewModal(expense)} className="flex-1 py-2 bg-cyan-900/30 text-cyan-400 hover:bg-cyan-800 hover:text-white rounded border border-cyan-800 transition-colors font-medium text-sm flex items-center justify-center gap-2">
                    <RefreshCw size={16}/> Renew / Add Record
                  </button>
                </div>
              </div>
            );
          })}
          {expenses.length === 0 && (
            <div className="col-span-1 md:col-span-2 text-center py-10 bg-slate-900 border border-slate-800 rounded-xl">
              <p className="text-slate-500">No personal expense records added yet.</p>
            </div>
          )}
        </div>
      </div>

      {/* ADD EXPENSE MODAL */}
      <Modal isOpen={isAddExpenseModalOpen} onClose={() => setIsAddExpenseModalOpen(false)} title="Add New Personal Costing">
        <form onSubmit={handleAddExpense} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div><label className="block text-sm text-slate-400 mb-1">Expense Name (e.g. Maintenance)</label><input required type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Category</label><input required type="text" value={formData.category} onChange={e => setFormData({...formData, category: e.target.value})} placeholder="e.g. Equipment, Rent..." className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          </div>
          <div><label className="block text-sm text-slate-400 mb-1">Costing Amount</label><input required type="number" value={formData.cost} onChange={e => setFormData({...formData, cost: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div className="grid grid-cols-2 gap-4">
            <div><label className="block text-sm text-slate-400 mb-1">Date Started</label><input required type="date" value={formData.startDate} onChange={e => setFormData({...formData, startDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Date Ended</label><input required type="date" value={formData.endDate} onChange={e => setFormData({...formData, endDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          </div>
          <div><label className="block text-sm text-slate-400 mb-1">Additional Notes</label><textarea value={formData.notes} onChange={e => setFormData({...formData, notes: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3"></textarea></div>
          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800 mt-6">
            <button type="button" onClick={() => setIsAddExpenseModalOpen(false)} className="px-4 py-2 rounded-lg border border-slate-700 hover:bg-slate-800">Cancel</button>
            <button type="submit" className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-bold">Save Expense</button>
          </div>
        </form>
      </Modal>

      {/* RENEW EXPENSE MODAL */}
      <Modal isOpen={isRenewModalOpen} onClose={() => setIsRenewModalOpen(false)} title={`Renew Costing: ${selectedExpense?.name}`}>
        <form onSubmit={handleRenewExpense} className="space-y-4">
          <div><label className="block text-sm text-slate-400 mb-1">Costing Amount</label><input required type="number" value={formData.cost} onChange={e => setFormData({...formData, cost: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          <div className="grid grid-cols-2 gap-4">
            <div><label className="block text-sm text-slate-400 mb-1">Date Started</label><input required type="date" value={formData.startDate} onChange={e => setFormData({...formData, startDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
            <div><label className="block text-sm text-slate-400 mb-1">Date Ended</label><input required type="date" value={formData.endDate} onChange={e => setFormData({...formData, endDate: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3" /></div>
          </div>
          <div><label className="block text-sm text-slate-400 mb-1">Additional Information / Notes</label><textarea value={formData.notes} onChange={e => setFormData({...formData, notes: e.target.value})} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3"></textarea></div>
          <div className="flex justify-end gap-3 pt-4 border-t border-slate-800 mt-6">
            <button type="button" onClick={() => setIsRenewModalOpen(false)} className="px-4 py-2 rounded-lg border border-slate-700 hover:bg-slate-800">Cancel</button>
            <button type="submit" className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-bold">Record Renewal</button>
          </div>
        </form>
      </Modal>
    </div>
  );
};