const App = () => {
    // State to hold trial balance data
    const [trialBalance, setTrialBalance] = React.useState(null);
    const [error, setError] = React.useState(null);

    React.useEffect(() => {
        // Fetch trial balance data
        fetch('/api/reports/trial_balance.php')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                setTrialBalance(data);
            })
            .catch(error => {
                console.error("Error fetching trial balance:", error);
                setError(error.toString());
            });
    }, []);

    return (
        <div className="dashboard">
            <aside className="sidebar">
                <h2>Dashboard</h2>
                <ul>
                    <li><a href="#" className="active">Overview</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Students</a></li>
                    <li><a href="#">Invoices</a></li>
                    <li><a href="#">Payments</a></li>
                </ul>
            </aside>
            <main className="main-content">
                <header className="header">
                    <h1>Financial Overview</h1>
                </header>
                <div className="card">
                    <h3>Trial Balance</h3>
                    {error && <p>Error loading data: {error}</p>}
                    {!trialBalance && !error && <p>Loading...</p>}
                    {trialBalance && (
                        <table>
                            <thead>
                                <tr>
                                    <th>Account</th>
                                    <th>Debit</th>
                                    <th>Credit</th>
                                </tr>
                            </thead>
                            <tbody>
                                {trialBalance.lines.map((line, index) => (
                                    <tr key={index}>
                                        <td>{line.account_name}</td>
                                        <td>{line.debit}</td>
                                        <td>{line.credit}</td>
                                    </tr>
                                ))}
                                 <tr>
                                    <td><b>{trialBalance.totals.account_name}</b></td>
                                    <td><b>{trialBalance.totals.debit}</b></td>
                                    <td><b>{trialBalance.totals.credit}</b></td>
                                </tr>
                            </tbody>
                        </table>
                    )}
                </div>
            </main>
        </div>
    );
};