import React, { useState, useMemo, useCallback } from 'react';
import { Search, Users, DollarSign, Calendar, FileText, Bell, Shield, Download, Printer, MessageSquare, Plus, Edit, Eye, ChevronLeft, ChevronRight, X, Check, AlertTriangle, Clock, Upload, Database } from 'lucide-react';

const COMPANY = {
  name: 'Athena Intellects Company Limited',
  program: 'MI AKidamy 升幼必修班',
  address: '荃灣新領域廣場1205室',
  logo: '🎒'
};

const COURSES = {
  1: 'Trial Class',
  2: 'Playgroup',
  3: 'Independence Class',
  4: 'Kinder',
  5: 'ABC Course',
  6: 'Special Events',
  7: 'Talk/Workshop',
  8: 'IGS (Current student discount)',
  9: 'Private class 1:1(30mins)',
  10: '音樂班',
  11: 'Summer course',
  12: '中文認字班',
  13: '面試班(kg)'
};

const STUDENTS_DATA = [
  { id: 'ST220001', name: '何星樂', status: 'Active', gender: 'Female', dob: '2020-10-25', parent: 'Dorothy/Ho Chung Hang', phone: '96130912', email: 'dorothyip@live.hk', joinDate: '2022-09-14', courseCode: 1, payments: [{ invoice: 'AK220001', amount: 300, date: '2022-09-10', method: 'Bank In', course: 'Trial Class' }] },
  { id: 'ST220034', name: '林葆姸 Lam Po Yin', status: 'Active', gender: 'Female', dob: '2021-07-02', parent: '莉', phone: '91279303', joinDate: '2022-09-24', courseCode: 4, payments: [{ invoice: 'AK240007', amount: 2400, date: '2024-01-31', method: 'Payme', course: 'Kinder' }, { invoice: 'AK240062', amount: 2400, date: '2024-06-30', method: 'Bank In', course: 'Kinder' }, { invoice: 'AK250035', amount: 420, date: '2025-04-15', method: 'Bank In', course: 'Special Events' }] },
  { id: 'ST220145', name: 'Ho Shing Wing 何承穎', status: 'Active', gender: 'Male', dob: '2021-08-28', parent: 'Angie Luk', phone: '9282 3344', joinDate: '2022-12-16', courseCode: 4, payments: [{ invoice: 'AK240035', amount: 3600, date: '2024-04-29', method: 'Bank In', course: 'Kinder' }, { invoice: 'AK240098', amount: 4700, date: '2024-09-15', method: 'Bank In', course: 'Kinder' }, { invoice: 'AK250025', amount: 4800, date: '2025-03-17', method: 'Bank In', course: 'Kinder' }] },
  { id: 'ST220309', name: '董諭橋 Quinton Kiu Tung', status: 'Active', gender: 'Male', dob: '2022-09-28', parent: 'Mrs Tung', phone: '96630062', joinDate: '2023-11-27', courseCode: 4, payments: [{ invoice: 'AK240034', amount: 4700, date: '2024-04-27', method: 'Payme', course: 'Kinder' }] },
  { id: 'ST220319', name: '林僖晴', status: 'Active', gender: 'Female', dob: '2022-09-27', parent: 'Jane Cheung', phone: '69932752', joinDate: '2024-03-01', courseCode: 3, payments: [{ invoice: 'AK240100', amount: 4700, date: '2024-09-29', method: 'Bank In', course: 'Independence Class' }] },
  { id: 'ST220334', name: '馮悦晞 Fung Yuet Hei', status: 'Active', gender: 'Female', dob: '2023-01-19', parent: 'ladyukawaiii', phone: '6227 8392', joinDate: '2024-05-18', courseCode: 2, payments: [{ invoice: 'AK240030', amount: 99, date: '2024-04-20', method: 'Payme', course: 'Trial Class' }, { invoice: 'AK240088', amount: 3600, date: '2024-08-27', method: 'Bank In', course: 'Playgroup' }, { invoice: 'AK250005', amount: 3600, date: '2025-01-24', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220335', name: 'Abby Li', status: 'Active', gender: 'Female', dob: null, parent: 'Ray Li', phone: '6803 0209', joinDate: '2024-05-18', courseCode: 2, payments: [{ invoice: 'AK240031', amount: 99, date: '2024-04-22', method: 'Payme', course: 'Trial Class' }, { invoice: 'AK240052', amount: 2400, date: '2024-05-29', method: 'Bank In', course: 'Playgroup' }, { invoice: 'AK240087', amount: 3600, date: '2024-08-27', method: 'Cash', course: 'Playgroup' }] },
  { id: 'ST220366', name: '何溢 Ho Yat', status: 'Active', gender: null, dob: '2022-11-01', parent: '吳', phone: '9209 4144', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK240080', amount: 99, date: '2024-08-17', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK240086', amount: 2400, date: '2024-08-27', method: 'Cash', course: 'Playgroup' }, { invoice: 'AK240110', amount: 2400, date: '2024-11-18', method: 'Cash', course: 'Playgroup' }] },
  { id: 'ST220374', name: 'Alfie', status: 'Active', gender: null, dob: null, parent: 'Daddy', phone: '60487740', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK240092', amount: 99, date: '2024-08-31', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK240096', amount: 3600, date: '2024-09-11', method: 'Bank In', course: 'Playgroup' }, { invoice: 'AK250029', amount: 1596, date: '2025-04-07', method: 'Bank In', course: 'Special Events' }, { invoice: 'AK250030', amount: 2400, date: '2025-04-07', method: 'Bank In', course: 'Kinder' }] },
  { id: 'ST220391', name: '黃天擎 Huang Tin King Quinton', status: 'Active', gender: null, dob: '2024-01-17', parent: 'Kinki Chan', phone: '9307 8436', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK250011', amount: 99, date: '2025-02-17', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK250014', amount: 2400, date: '2025-02-21', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220400', name: '文祉萱 Man Tse Huen', status: 'Active', gender: null, dob: '2024-01-08', parent: 'Hin Hin', phone: '9887 6639', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK250027', amount: 99, date: '2025-03-31', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK250028', amount: 3600, date: '2025-04-02', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220401', name: '勞心柔 Christy Lo', status: 'Active', gender: null, dob: '2023-11-16', parent: 'Sara Ho', phone: '9408 6079', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK250031', amount: 99, date: '2025-04-07', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK250029_e', amount: 1596, date: '2025-04-16', method: 'Bank In', course: 'Special Events (Easter)' }, { invoice: 'AK250071', amount: 3600, date: '2025-08-22', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220417', name: '謝子仟 Jonathan', status: 'Active', gender: 'Male', dob: '2023-09-26', parent: 'KIT', phone: '6439 0803', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK250061', amount: 99, date: '2025-07-10', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK250065', amount: 2400, date: '2025-07-14', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220422', name: '洪國翊 Hung Kwok Yick Gerard', status: 'Active', gender: 'Male', dob: '2024-07-28', parent: 'irisc0*', phone: '9819 8797', joinDate: null, courseCode: 2, payments: [{ invoice: 'AK250084', amount: 99, date: '2025-10-08', method: 'Cash', course: 'Trial Class' }, { invoice: 'AK250087', amount: 3600, date: '2025-10-10', method: 'Bank In', course: 'Playgroup' }] },
  { id: 'ST220471', name: '曾羽桐 Tsang Yu Tung Aine', status: 'Active', gender: null, dob: '2025-05-03', parent: 'Kerendi Li', phone: '9205 1600', joinDate: null, courseCode: 3, payments: [{ invoice: 'AK260011', amount: 99, date: '2026-01-12', method: 'Bank In', course: 'Trial Class' }, { invoice: 'AK260017', amount: 4800, date: '2026-01-15', method: 'Bank In', course: 'Independence Class' }] },
];

function calcAge(dob) {
  if (!dob) return 'N/A';
  const b = new Date(dob);
  const now = new Date();
  const months = (now.getFullYear() - b.getFullYear()) * 12 + (now.getMonth() - b.getMonth());
  if (months < 24) return `${months}m`;
  const y = Math.floor(months / 12);
  const m = months % 12;
  return m > 0 ? `${y}y ${m}m` : `${y}y`;
}

function formatDate(d) {
  if (!d) return '-';
  return new Date(d).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
}

function Badge({ children, color = 'blue' }) {
  const colors = {
    blue: 'bg-blue-100 text-blue-800',
    green: 'bg-green-100 text-green-800',
    yellow: 'bg-yellow-100 text-yellow-800',
    red: 'bg-red-100 text-red-800',
    purple: 'bg-purple-100 text-purple-800',
    gray: 'bg-gray-100 text-gray-700',
    pink: 'bg-pink-100 text-pink-800',
  };
  return <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colors[color]}`}>{children}</span>;
}

function CompanyHeader() {
  return (
    <div className="flex items-center gap-3 border-b border-gray-200 pb-3 mb-4">
      <div className="text-4xl">{COMPANY.logo}</div>
      <div>
        <div className="font-bold text-lg text-gray-900">{COMPANY.name}</div>
        <div className="text-sm text-gray-600">{COMPANY.program}</div>
        <div className="text-xs text-gray-500">{COMPANY.address}</div>
      </div>
    </div>
  );
}

function StatsCard({ icon: Icon, label, value, sub, color }) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-4 flex items-center gap-3">
      <div className={`p-2.5 rounded-lg ${color}`}><Icon size={20} className="text-white" /></div>
      <div>
        <div className="text-2xl font-bold text-gray-900">{value}</div>
        <div className="text-xs text-gray-500">{label}</div>
        {sub && <div className="text-xs text-green-600 mt-0.5">{sub}</div>}
      </div>
    </div>
  );
}

function Modal({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
        <div className="flex items-center justify-between p-4 border-b border-gray-200">
          <h2 className="text-lg font-bold text-gray-900">{title}</h2>
          <button onClick={onClose} className="p-1 rounded-lg hover:bg-gray-100"><X size={20} /></button>
        </div>
        <div className="p-4">{children}</div>
      </div>
    </div>
  );
}

export default function StudentManagementSystem() {
  const [page, setPage] = useState('dashboard');
  const [search, setSearch] = useState('');
  const [selectedStudent, setSelectedStudent] = useState(null);
  const [showInvoice, setShowInvoice] = useState(null);
  const [showReminder, setShowReminder] = useState(null);
  const [currentUser] = useState('Sharon');
  const [listPage, setListPage] = useState(0);
  const PER_PAGE = 8;

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    return STUDENTS_DATA.filter(s => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q) || (s.parent && s.parent.toLowerCase().includes(q)));
  }, [search]);

  const totalRevenue = useMemo(() => STUDENTS_DATA.reduce((sum, s) => sum + s.payments.reduce((a, p) => a + p.amount, 0), 0), []);
  const activeCount = STUDENTS_DATA.filter(s => s.status === 'Active').length;

  const paged = filtered.slice(listPage * PER_PAGE, (listPage + 1) * PER_PAGE);
  const totalPages = Math.ceil(filtered.length / PER_PAGE);

  const viewStudent = useCallback((s) => { setSelectedStudent(s); setPage('profile'); }, []);

  const NavBtn = ({ pg, icon: Icon, label }) => (
    <button onClick={() => { setPage(pg); setSelectedStudent(null); }} className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${page === pg ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100'}`}>
      <Icon size={16} /><span className="hidden sm:inline">{label}</span>
    </button>
  );

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-2xl">{COMPANY.logo}</span>
            <div>
              <div className="font-bold text-sm text-gray-900 leading-tight">MI AKidamy</div>
              <div className="text-xs text-gray-400">Student Management</div>
            </div>
          </div>
          <nav className="flex items-center gap-1 overflow-x-auto">
            <NavBtn pg="dashboard" icon={Database} label="Dashboard" />
            <NavBtn pg="students" icon={Users} label="Students" />
            <NavBtn pg="income" icon={DollarSign} label="Income" />
            <NavBtn pg="classes" icon={Calendar} label="Classes" />
            <NavBtn pg="settings" icon={Shield} label="Settings" />
          </nav>
          <div className="flex items-center gap-2">
            <Badge color="purple">👤 {currentUser}</Badge>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-6">
        {page === 'dashboard' && (
          <div className="space-y-6">
            <h1 className="text-2xl font-bold">Dashboard</h1>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              <StatsCard icon={Users} label="Active Students" value={activeCount} sub={`of ${STUDENTS_DATA.length} total`} color="bg-indigo-500" />
              <StatsCard icon={DollarSign} label="Total Revenue" value={`$${totalRevenue.toLocaleString()}`} color="bg-green-500" />
              <StatsCard icon={Calendar} label="Course Types" value={Object.keys(COURSES).length} color="bg-amber-500" />
              <StatsCard icon={Bell} label="Reminders Due" value={3} sub="This week" color="bg-red-500" />
            </div>

            <div className="grid lg:grid-cols-2 gap-6">
              <div className="bg-white rounded-xl border border-gray-200 p-4">
                <h3 className="font-bold text-gray-900 mb-3">Recent Invoices</h3>
                <div className="space-y-2">
                  {STUDENTS_DATA.slice(0, 5).flatMap(s => s.payments.slice(-1).map(p => ({ ...p, student: s.name, sid: s.id }))).map((p, i) => (
                    <div key={i} className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
                      <div>
                        <div className="text-sm font-medium">{p.student}</div>
                        <div className="text-xs text-gray-500">{p.invoice} · {p.course}</div>
                      </div>
                      <div className="text-right">
                        <div className="text-sm font-bold text-green-600">${p.amount.toLocaleString()}</div>
                        <div className="text-xs text-gray-400">{formatDate(p.date)}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white rounded-xl border border-gray-200 p-4">
                <h3 className="font-bold text-gray-900 mb-3">Payment Reminders</h3>
                <div className="space-y-2">
                  {[
                    { name: '何溢 Ho Yat', id: 'ST220366', due: '2025-04-15', course: 'Playgroup' },
                    { name: 'Alfie', id: 'ST220374', due: '2025-04-20', course: 'Kinder' },
                    { name: '林僖晴', id: 'ST220319', due: '2025-05-01', course: 'Independence Class' },
                  ].map((r, i) => (
                    <div key={i} className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
                      <div className="flex items-center gap-2">
                        <AlertTriangle size={14} className="text-amber-500" />
                        <div>
                          <div className="text-sm font-medium">{r.name}</div>
                          <div className="text-xs text-gray-500">{r.course} · Due {formatDate(r.due)}</div>
                        </div>
                      </div>
                      <button onClick={() => setShowReminder(r)} className="text-xs bg-indigo-50 text-indigo-600 px-2 py-1 rounded-lg hover:bg-indigo-100">
                        <MessageSquare size={12} className="inline mr-1" />Send
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl border border-gray-200 p-4">
              <h3 className="font-bold text-gray-900 mb-3">Course Enrollment Distribution</h3>
              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                {Object.entries(COURSES).map(([code, name]) => {
                  const count = STUDENTS_DATA.filter(s => s.courseCode === parseInt(code)).length;
                  return (
                    <div key={code} className="bg-gray-50 rounded-lg p-3">
                      <div className="text-xs text-gray-500 truncate">{name}</div>
                      <div className="text-xl font-bold">{count}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {page === 'students' && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h1 className="text-2xl font-bold">Students ({filtered.length})</h1>
              <div className="flex items-center gap-2">
                <button className="flex items-center gap-1 px-3 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
                  <Upload size={14} />Import Excel
                </button>
                <button className="flex items-center gap-1 px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
                  <Plus size={14} />Add Student
                </button>
              </div>
            </div>

            <div className="relative">
              <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input value={search} onChange={e => { setSearch(e.target.value); setListPage(0); }} placeholder="Search by name, ID or parent..." className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
            </div>

            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50 border-b border-gray-200">
                    <tr>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">ID</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Name</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Age</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Course</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Parent</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Phone</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Status</th>
                      <th className="text-left px-4 py-3 font-medium text-gray-500">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {paged.map(s => (
                      <tr key={s.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => viewStudent(s)}>
                        <td className="px-4 py-3 font-mono text-xs text-gray-500">{s.id}</td>
                        <td className="px-4 py-3 font-medium">{s.name}</td>
                        <td className="px-4 py-3 text-gray-600">{calcAge(s.dob)}</td>
                        <td className="px-4 py-3"><Badge color="blue">{COURSES[s.courseCode] || '-'}</Badge></td>
                        <td className="px-4 py-3 text-gray-600">{s.parent || '-'}</td>
                        <td className="px-4 py-3 text-gray-600">{s.phone || '-'}</td>
                        <td className="px-4 py-3"><Badge color="green">{s.status}</Badge></td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-1">
                            <button onClick={e => { e.stopPropagation(); viewStudent(s); }} className="p-1 rounded hover:bg-gray-100" title="View"><Eye size={14} /></button>
                            <button onClick={e => { e.stopPropagation(); }} className="p-1 rounded hover:bg-gray-100" title="Edit"><Edit size={14} /></button>
                            <button onClick={e => { e.stopPropagation(); setShowReminder({ name: s.name, id: s.id, course: COURSES[s.courseCode] }); }} className="p-1 rounded hover:bg-gray-100" title="Remind"><Bell size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {totalPages > 1 && (
                <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                  <div className="text-xs text-gray-500">Page {listPage + 1} of {totalPages}</div>
                  <div className="flex items-center gap-1">
                    <button onClick={() => setListPage(p => Math.max(0, p - 1))} disabled={listPage === 0} className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"><ChevronLeft size={16} /></button>
                    <button onClick={() => setListPage(p => Math.min(totalPages - 1, p + 1))} disabled={listPage >= totalPages - 1} className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"><ChevronRight size={16} /></button>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {page === 'profile' && selectedStudent && (
          <div className="space-y-6">
            <button onClick={() => setPage('students')} className="flex items-center gap-1 text-sm text-indigo-600 hover:underline">
              <ChevronLeft size={14} />Back to Students
            </button>

            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <CompanyHeader />
              <div className="grid sm:grid-cols-2 gap-6">
                <div>
                  <h2 className="text-xl font-bold">{selectedStudent.name}</h2>
                  <div className="text-sm text-gray-500 mt-1">{selectedStudent.id}</div>
                  <div className="mt-4 space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">Status:</span><Badge color="green">{selectedStudent.status}</Badge></div>
                    <div className="flex justify-between"><span className="text-gray-500">Gender:</span><span>{selectedStudent.gender || 'N/A'}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">DOB:</span><span>{selectedStudent.dob ? formatDate(selectedStudent.dob) : 'N/A'}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Age (auto):</span><span className="font-medium text-indigo-600">{calcAge(selectedStudent.dob)}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Joined:</span><span>{formatDate(selectedStudent.joinDate)}</span></div>
                  </div>
                </div>
                <div>
                  <h3 className="font-semibold text-gray-700 mb-3">Contact</h3>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between"><span className="text-gray-500">Parent:</span><span>{selectedStudent.parent || 'N/A'}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Phone:</span><span>{selectedStudent.phone || 'N/A'}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Email:</span><span>{selectedStudent.email || 'N/A'}</span></div>
                    <div className="flex justify-between"><span className="text-gray-500">Current Course:</span><Badge color="blue">{COURSES[selectedStudent.courseCode]}</Badge></div>
                  </div>
                  <div className="mt-4 flex gap-2">
                    <button onClick={() => setShowReminder({ name: selectedStudent.name, id: selectedStudent.id, course: COURSES[selectedStudent.courseCode] })} className="flex items-center gap-1 px-3 py-1.5 bg-green-50 text-green-700 rounded-lg text-xs hover:bg-green-100">
                      <MessageSquare size={12} />WhatsApp Reminder
                    </button>
                    <button className="flex items-center gap-1 px-3 py-1.5 bg-gray-50 text-gray-700 rounded-lg text-xs hover:bg-gray-100">
                      <Download size={12} />Export PDF
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-bold text-gray-900">Payment History</h3>
                <div className="text-sm font-medium text-green-600">
                  Total: ${selectedStudent.payments.reduce((a, p) => a + p.amount, 0).toLocaleString()}
                </div>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Invoice</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Course</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Amount</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Date</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Method</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {selectedStudent.payments.map((p, i) => (
                      <tr key={i} className="hover:bg-gray-50">
                        <td className="px-3 py-2 font-mono text-xs">{p.invoice}</td>
                        <td className="px-3 py-2">{p.course}</td>
                        <td className="px-3 py-2 font-medium text-green-600">${p.amount.toLocaleString()}</td>
                        <td className="px-3 py-2 text-gray-600">{formatDate(p.date)}</td>
                        <td className="px-3 py-2"><Badge color={p.method === 'Cash' ? 'yellow' : p.method === 'Payme' ? 'pink' : 'blue'}>{p.method}</Badge></td>
                        <td className="px-3 py-2">
                          <button onClick={() => setShowInvoice({ ...p, student: selectedStudent })} className="text-xs text-indigo-600 hover:underline flex items-center gap-1">
                            <FileText size={12} />Invoice
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {page === 'income' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h1 className="text-2xl font-bold">Income Summary</h1>
              <div className="flex items-center gap-2">
                <button className="flex items-center gap-1 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50">
                  <Download size={14} />Export Excel
                </button>
                <button className="flex items-center gap-1 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50">
                  <Printer size={14} />Print PDF
                </button>
              </div>
            </div>

            <div className="grid sm:grid-cols-3 gap-4">
              <StatsCard icon={DollarSign} label="Total Revenue" value={`$${totalRevenue.toLocaleString()}`} color="bg-green-500" />
              <StatsCard icon={FileText} label="Total Invoices" value={STUDENTS_DATA.reduce((a, s) => a + s.payments.length, 0)} color="bg-blue-500" />
              <StatsCard icon={Users} label="Paying Students" value={STUDENTS_DATA.filter(s => s.payments.length > 0).length} color="bg-purple-500" />
            </div>

            <div className="bg-white rounded-xl border border-gray-200 p-4">
              <h3 className="font-bold text-gray-900 mb-3">All Transactions</h3>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Invoice</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Student</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Course</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Amount</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Date</th>
                      <th className="text-left px-3 py-2 font-medium text-gray-500">Method</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {STUDENTS_DATA.flatMap(s => s.payments.map(p => ({ ...p, studentName: s.name, sid: s.id }))).sort((a, b) => new Date(b.date) - new Date(a.date)).slice(0, 15).map((p, i) => (
                      <tr key={i} className="hover:bg-gray-50">
                        <td className="px-3 py-2 font-mono text-xs">{p.invoice}</td>
                        <td className="px-3 py-2 font-medium">{p.studentName}</td>
                        <td className="px-3 py-2">{p.course}</td>
                        <td className="px-3 py-2 font-medium text-green-600">${p.amount.toLocaleString()}</td>
                        <td className="px-3 py-2 text-gray-600">{formatDate(p.date)}</td>
                        <td className="px-3 py-2"><Badge color={p.method === 'Cash' ? 'yellow' : p.method === 'Payme' ? 'pink' : 'blue'}>{p.method}</Badge></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {page === 'classes' && (
          <div className="space-y-6">
            <h1 className="text-2xl font-bold">Class Management</h1>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {[
                { name: 'Kinder', time: 'Mon 4:00-5:00pm', students: ['Lam Po Yin 林葆姸', 'Ho Shing Wing 何承穎', '董諭橋 Quinton'], topic: 'Letter Recognition - Week 12' },
                { name: 'Playgroup (Tue)', time: 'Tue 3:30-4:30pm', students: ['何溢 Ho Yat', '馮悦晞 Fung Yuet Hei', 'Abby Li', 'Gareth Yu'], topic: 'Sensory Play - Colors' },
                { name: 'Independence Class (Sat)', time: 'Sat 9:00-10:00am', students: ['林僖晴', '陳爾荍 Chan Yi Kiu Alma'], topic: 'Self-care Skills' },
                { name: 'Playgroup (Sat AM)', time: 'Sat 9:00-10:00am', students: ['羅翊僖 Law Yik Hei', '陳迦淳Chan Ka Shun', '張文綽Cheung Man Cheuk'], topic: 'Music & Movement' },
                { name: 'Playgroup (Sat PM)', time: 'Sat 11:30-12:30pm', students: ['Cherise Cheng', 'Alfie', '呂卓熹 Lui Cheuk Hei'], topic: 'Story Time' },
                { name: 'Independence (Sat PM)', time: 'Sat 12:45-1:45pm', students: ['潘泯璇 Poon Man Shuen', '蘇玥澄 So yuet ching'], topic: 'Social Skills' },
              ].map((c, i) => (
                <div key={i} className="bg-white rounded-xl border border-gray-200 p-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="font-bold text-gray-900">{c.name}</h3>
                    <Badge color="blue">{c.students.length} students</Badge>
                  </div>
                  <div className="text-xs text-gray-500 mb-3 flex items-center gap-1"><Clock size={12} />{c.time}</div>
                  <div className="text-xs text-gray-600 mb-2 flex items-center gap-1"><FileText size={12} />Topic: {c.topic}</div>
                  <div className="space-y-1 mt-3">
                    {c.students.map((st, j) => (
                      <div key={j} className="flex items-center justify-between text-xs bg-gray-50 px-2 py-1.5 rounded-lg">
                        <span>{st}</span>
                        <div className="flex items-center gap-1">
                          <button className="px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-xs">V</button>
                          <button className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-xs">ABS</button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {page === 'settings' && (
          <div className="space-y-6">
            <h1 className="text-2xl font-bold">Settings & Permissions</h1>
            <div className="grid lg:grid-cols-2 gap-6">
              <div className="bg-white rounded-xl border border-gray-200 p-6">
                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2"><Shield size={18} />Permission Management</h3>
                <div className="space-y-3">
                  {[
                    { user: 'Sharon', role: 'Admin', access: 'Full Access', color: 'purple' },
                    { user: 'Winnie', role: 'Staff', access: 'View & Edit (expires 2026-04-30)', color: 'blue' },
                    { user: 'Ms Li', role: 'Teacher', access: 'Class View Only', color: 'green' },
                  ].map((u, i) => (
                    <div key={i} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div>
                        <div className="text-sm font-medium">{u.user}</div>
                        <div className="text-xs text-gray-500">{u.role} · {u.access}</div>
                      </div>
                      <Badge color={u.color}>{u.role}</Badge>
                    </div>
                  ))}
                </div>
                <button className="mt-4 flex items-center gap-1 px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700">
                  <Plus size={14} />Grant Access
                </button>
              </div>

              <div className="bg-white rounded-xl border border-gray-200 p-6">
                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2"><DollarSign size={18} />Pricing & Promotions</h3>
                <div className="space-y-3">
                  {[
                    { name: 'Facebook $99 Trial', price: '$99', type: 'Trial' },
                    { name: 'New Enrollment Discount', price: '$2,400 (10 lessons)', type: 'Discount' },
                    { name: 'Re-enrollment Discount', price: '$3,600 (17 lessons)', type: 'Discount' },
                    { name: 'Hidden Agenda 🔒', price: 'Sharon Only', type: 'Restricted', locked: true },
                  ].map((p, i) => (
                    <div key={i} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div>
                        <div className="text-sm font-medium flex items-center gap-1">{p.name}{p.locked && <Shield size={12} className="text-red-500" />}</div>
                        <div className="text-xs text-gray-500">{p.price}</div>
                      </div>
                      <Badge color={p.locked ? 'red' : 'green'}>{p.type}</Badge>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white rounded-xl border border-gray-200 p-6">
                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2"><Database size={18} />Backup & Data</h3>
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                    <div>
                      <div className="text-sm font-medium text-green-800">Auto Backup: Active</div>
                      <div className="text-xs text-green-600">Daily at 2:00 AM · Last: Today</div>
                    </div>
                    <Check size={18} className="text-green-600" />
                  </div>
                  <button className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
                    <Upload size={14} />Import Excel Data
                  </button>
                  <button className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
                    <Download size={14} />Export Full Backup
                  </button>
                </div>
              </div>

              <div className="bg-white rounded-xl border border-gray-200 p-6">
                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2"><Clock size={18} />Recent Changes</h3>
                <div className="space-y-2">
                  {[
                    { action: 'Payment recorded for ST220422', by: 'Sharon', time: '2 hours ago' },
                    { action: 'New student ST220471 added', by: 'Sharon', time: '5 hours ago' },
                    { action: 'Class topic updated: Kinder', by: 'Ms Li', time: '1 day ago' },
                    { action: 'Promotion price edited', by: 'Sharon', time: '2 days ago' },
                  ].map((c, i) => (
                    <div key={i} className="text-xs p-2 bg-gray-50 rounded-lg">
                      <div className="font-medium">{c.action}</div>
                      <div className="text-gray-400 mt-0.5">by {c.by} · {c.time}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </main>

      <Modal open={!!showInvoice} onClose={() => setShowInvoice(null)} title="Invoice Preview">
        {showInvoice && (
          <div className="space-y-4">
            <CompanyHeader />
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <div className="text-gray-500">Invoice No:</div>
                <div className="font-bold">{showInvoice.invoice}</div>
              </div>
              <div>
                <div className="text-gray-500">Date:</div>
                <div>{formatDate(showInvoice.date)}</div>
              </div>
              <div>
                <div className="text-gray-500">Student:</div>
                <div className="font-medium">{showInvoice.student.name}</div>
                <div className="text-xs text-gray-400">{showInvoice.student.id}</div>
              </div>
              <div>
                <div className="text-gray-500">Payment Method:</div>
                <div>{showInvoice.method}</div>
              </div>
            </div>
            <div className="border border-gray-200 rounded-lg overflow-hidden">
              <table className="w-full text-sm">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="text-left px-3 py-2">Description</th>
                    <th className="text-right px-3 py-2">Amount</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="px-3 py-2">{showInvoice.course}</td>
                    <td className="px-3 py-2 text-right font-bold">${showInvoice.amount.toLocaleString()}</td>
                  </tr>
                </tbody>
                <tfoot className="bg-gray-50 border-t">
                  <tr>
                    <td className="px-3 py-2 font-bold">Total</td>
                    <td className="px-3 py-2 text-right font-bold text-green-600">${showInvoice.amount.toLocaleString()}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            <div className="flex gap-2">
              <button className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700"><Printer size={14} />Print</button>
              <button className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50"><Download size={14} />Download PDF</button>
            </div>
          </div>
        )}
      </Modal>

      <Modal open={!!showReminder} onClose={() => setShowReminder(null)} title="Payment Reminder">
        {showReminder && (
          <div className="space-y-4">
            <div className="text-sm text-gray-600">
              Generate a WhatsApp message for <span className="font-medium">{showReminder.name}</span>:
            </div>
            <div className="bg-green-50 rounded-lg p-4 text-sm whitespace-pre-wrap border border-green-200">
              {`Hi, this is ${COMPANY.name} (${COMPANY.program}).

We'd like to remind you about the upcoming payment for ${showReminder.name}'s ${showReminder.course || 'course'} lessons.

Please feel free to contact us if you have any questions.

📍 ${COMPANY.address}
📞 Contact us via WhatsApp

Thank you! 😊`}
            </div>
            <div className="flex gap-2">
              <button className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700"><MessageSquare size={14} />Copy for WhatsApp</button>
              <button className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50"><Printer size={14} />Print Version</button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>