const App = () => {
    React.useEffect(() => {
        feather.replace();

        // Mock Chart for Income vs Expenses
        const incomeExpenseCtx = document.getElementById('incomeExpenseChart');
        if (incomeExpenseCtx) {
            new Chart(incomeExpenseCtx, {
                type: 'line',
                data: {
                    labels: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb'],
                    datasets: [{
                        label: 'Income',
                        data: [120000, 130000, 140000, 135000, 150000, 160000],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: true,
                        tension: 0.4
                    }, {
                        label: 'Expenses',
                        data: [90000, 95000, 105000, 100000, 110000, 115000],
                        borderColor: '#EF4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '$' + value / 1000 + 'k';
                                }
                            }
                        }
                    }
                }
            });
        }

        // Mock Chart for Fee Collection
        const feeCollectionCtx = document.getElementById('feeCollectionChart');
        if (feeCollectionCtx) {
            new Chart(feeCollectionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Collected', 'Pending', 'Overdue'],
                    datasets: [{
                        data: [85, 10, 5],
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }
    }, []);

    const navItems = {
        Overview: [
            { name: 'Dashboard', icon: 'grid', active: true },
        ],
        Academic: [
            { name: 'Students', icon: 'users' },
            { name: 'Teachers', icon: 'users' },
            { name: 'Classes', icon: 'book' },
            { name: 'Timetable', icon: 'calendar' },
            { name: 'Attendance', icon: 'check-square' },
            { name: 'Examinations', icon: 'file-text' },
        ],
        Finance: [
            { name: 'Chart of Accounts', icon: 'file' },
            { name: 'Journal Entries', icon: 'book-open' },
            { name: 'Invoices (AR)', icon: 'dollar-sign' },
            { name: 'Payments', icon: 'trending-up' },
            { name: 'Bills (AP)', icon: 'file-minus' },
            { name: 'Vendors', icon: 'briefcase' },
            { name: 'Inventory', icon: 'archive' },
        ]
    };

    const stats = [
        { title: 'Total Students', value: '487', change: '+12 this month', changeType: 'increase', icon: 'users', iconBg: 'blue' },
        { title: 'Total Teachers', value: '32', change: '2 on leave', icon: 'users', iconBg: 'blue' },
        { title: 'Total Revenue', value: 'GH₵1,085,500.00', change: '+8.2% from last year', changeType: 'increase', icon: 'dollar-sign', iconBg: 'green' },
        { title: 'Pending Fees', value: 'GH₵85,000.00', change: '12 invoices overdue', changeType: 'decrease', icon: 'alert-triangle', iconBg: 'red' },
    ];

    const Sidebar = () => (
        <div className="sidebar">
            <div className="sidebar-header">
                <div className="sidebar-logo">
                    <i data-feather="award"></i>
                </div>
                <div className="sidebar-school-name">
                    <span>Mother Providencia</span>
                    <span>International School</span>
                </div>
            </div>
            <nav>
                {Object.entries(navItems).map(([section, items]) => (
                    <div className="nav-section" key={section}>
                        <div className="nav-section-title">{section}</div>
                        {items.map(item => (
                            <a href="#" className={`nav-item ${item.active ? 'active' : ''}`} key={item.name}>
                                <i data-feather={item.icon}></i>
                                <span>{item.name}</span>
                            </a>
                        ))}
                    </div>
                ))}
            </nav>
            <div style={{ marginTop: 'auto' }}>
                 <a href="#" className="nav-item">
                    <i data-feather="settings"></i>
                    <span>Settings</span>
                </a>
                <a href="#" className="nav-item">
                    <i data-feather="log-out"></i>
                    <span>Logout</span>
                </a>
            </div>
        </div>
    );

    const Header = () => (
        <header className="header">
            <div className="search-bar">
                <i data-feather="search" style={{ color: 'var(--text-secondary)' }}></i>
                <input type="text" placeholder="Search students, invoices, accounts..." />
            </div>
            <div className="header-actions">
                <button className="admin-btn" style={{background: '#f8d7da', border: 'none', padding: '5px 10px', borderRadius: '5px'}}>admin</button>
                <span>Switch Role</span>
                <i data-feather="bell"></i>
                <div className="user-profile">
                    <div className="user-avatar">JA</div>
                    <div className="user-info">
                        <span>John Administrator</span>
                        <span>Admin</span>
                    </div>
                </div>
            </div>
        </header>
    );

    const StatCard = ({ stat }) => (
        <div className="stat-card">
            <div className="stat-card-header">
                <span className="stat-card-title">{stat.title}</span>
                <div className={`stat-card-icon ${stat.iconBg}`}>
                    <i data-feather={stat.icon}></i>
                </div>
            </div>
            <div className="stat-card-value">{stat.value}</div>
            <div className={`stat-card-footer ${stat.changeType}`}>{stat.change}</div>
        </div>
    );

    return (
        <div className="dashboard">
            <Sidebar />
            <main className="main-content">
                <Header />
                <div className="page-content">
                    <div className="welcome-header">
                        <h1>Welcome back, John!</h1>
                        <p>Here's your administrative overview of the school.</p>
                    </div>
                    <div className="stats-grid">
                        {stats.map(stat => <StatCard stat={stat} key={stat.title} />)}
                    </div>
                    <div className="charts-grid">
                        <div className="chart-card">
                           <div className="chart-card-header">
                                <h3>Cash Position</h3>
                                <p>Current balances</p>
                            </div>
                           <div style={{height: '250px', display:'flex', flexDirection: 'column', justifyContent:'center', gap: '20px'}}>
                               <div style={{display: 'flex', alignItems: 'center', gap: '15px'}}>
                                   <div style={{padding: '10px', background: 'var(--blue-light)', borderRadius: '8px'}}><i data-feather="briefcase"></i></div>
                                   <div>
                                       <div>Bank Account</div>
                                       <div style={{fontSize: '1.5rem', fontWeight: '600'}}>GH₵650,000.00</div>
                                       <div style={{fontSize: '0.8rem', color: 'var(--text-secondary)'}}>Operating + Savings</div>
                                   </div>
                               </div>
                               <div style={{display: 'flex', alignItems: 'center', gap: '15px'}}>
                                   <div style={{padding: '10px', background: 'var(--green-light)', borderRadius: '8px'}}><i data-feather="dollar-sign"></i></div>
                                   <div>
                                       <div>Petty Cash</div>
                                       <div style={{fontSize: '1.5rem', fontWeight: '600'}}>GH₵2,500.00</div>
                                       <div style={{fontSize: '0.8rem', color: 'var(--text-secondary)'}}>On hand</div>
                                   </div>
                               </div>
                               <div style={{color: 'var(--red-dark)', fontWeight:'500', display:'flex', alignItems:'center', gap: '5px'}}><i data-feather="trending-down"></i>Upcoming payables GH₵31,000.00</div>
                           </div>
                        </div>
                         <div className="chart-card">
                            <div className="chart-card-header">
                                <h3>Fee Collection</h3>
                                <p>Current academic year</p>
                            </div>
                            <div className="chart-placeholder">
                                <canvas id="feeCollectionChart"></canvas>
                            </div>
                             <div style={{display: 'flex', justifyContent: 'center', gap: '15px', marginTop: '15px'}}>
                                 <span style={{display:'flex', alignItems: 'center', gap: '5px'}}><div style={{width:'10px', height: '10px', borderRadius: '50%', background: '#10B981'}}></div>Collected</span>
                                 <span style={{display:'flex', alignItems: 'center', gap: '5px'}}><div style={{width:'10px', height: '10px', borderRadius: '50%', background: '#F59E0B'}}></div>Pending</span>
                                 <span style={{display:'flex', alignItems: 'center', gap: '5px'}}><div style={{width:'10px', height: '10px', borderRadius: '50%', background: '#EF4444'}}></div>Overdue</span>
                             </div>
                        </div>
                        <div className="chart-card">
                            <div className="chart-card-header">
                                <h3>Income vs Expenses</h3>
                                <p>Last 6 months trend</p>
                            </div>
                            <div className="chart-placeholder">
                                <canvas id="incomeExpenseChart"></canvas>
                            </div>
                        </div>
                    </div>
                     <div className="charts-grid" style={{gridTemplateColumns: '1fr 1fr'}}>
                        <div className="table-card">
                            <h3>Recent Invoices</h3>
                             <table>
                                <thead>
                                    <tr><th>Student</th><th>Amount</th><th>Status</th></tr>
                                </thead>
                                <tbody>
                                    <tr><td>Kwabena Adu</td><td>GH₵1,200.00</td><td>Paid</td></tr>
                                    <tr><td>Afiya Owusu</td><td>GH₵1,200.00</td><td>Pending</td></tr>
                                </tbody>
                            </table>
                        </div>
                         <div className="table-card">
                            <h3>Recent Payments</h3>
                            <table>
                                <thead>
                                    <tr><th>Student</th><th>Amount</th><th>Date</th></tr>
                                </thead>
                                <tbody>
                                    <tr><td>Kwabena Adu</td><td>GH₵1,200.00</td><td>2024-02-15</td></tr>
                                    <tr><td>Esi Mensah</td><td>GH₵1,000.00</td><td>2024-02-14</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
};