const DashboardView = ({ onSelectAccount }) => {
    const [stats, setStats]     = React.useState(null);
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        api.getDashboard()
            .then(setStats)
            .catch(console.error)
            .finally(() => setLoading(false));
    }, []);

    const fmt$ = (n) => '$' + parseFloat(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

    if (loading) return <div className="loading-state" style={{ padding: '3rem' }}><i className="fas fa-spinner fa-spin"></i><p>Loading dashboard…</p></div>;
    if (!stats)  return <div className="empty-state">Failed to load dashboard.</div>;

    const { accounts, tasks, contacts, recent_communications, upcoming_tasks, account_by_type, quotes, invoices } = stats;

    return (
        <div className="view-content">
            <div className="list-view-header">
                <div className="list-view-title"><i className="fas fa-tachometer-alt" style={{ marginRight: '0.5rem', color: '#3b82f6' }}></i>Dashboard</div>
            </div>

            {/* Stat Cards */}
            <div className="dashboard-grid">
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-building" style={{ marginRight: '0.375rem' }}></i>Active Accounts</div>
                    <div className="stat-card-value">{accounts.active_accounts}</div>
                    <div className="stat-card-sub">{accounts.total_accounts} total</div>
                </div>
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-users" style={{ marginRight: '0.375rem' }}></i>Contacts</div>
                    <div className="stat-card-value">{contacts.total_contacts}</div>
                    <div className="stat-card-sub">across all accounts</div>
                </div>
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-tasks" style={{ marginRight: '0.375rem' }}></i>Open Tasks</div>
                    <div className={`stat-card-value ${parseInt(tasks.overdue_tasks) > 0 ? 'danger' : ''}`}>{tasks.open_tasks}</div>
                    <div className="stat-card-sub">{tasks.overdue_tasks} overdue · {tasks.due_today} today</div>
                </div>
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-file-invoice-dollar" style={{ marginRight: '0.375rem' }}></i>Outstanding</div>
                    <div className={`stat-card-value ${parseFloat(invoices.outstanding) > 0 ? 'warning' : 'success'}`}>{fmt$(invoices.outstanding)}</div>
                    <div className="stat-card-sub">{invoices.unpaid_invoices} unpaid invoices</div>
                </div>
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-file-alt" style={{ marginRight: '0.375rem' }}></i>Open Quotes</div>
                    <div className="stat-card-value">{quotes.open_quotes}</div>
                    <div className="stat-card-sub">{fmt$(quotes.open_value)} pipeline value</div>
                </div>
                <div className="stat-card">
                    <div className="stat-card-label"><i className="fas fa-dollar-sign" style={{ marginRight: '0.375rem' }}></i>Revenue This Month</div>
                    <div className="stat-card-value success">{fmt$(invoices.revenue_this_month)}</div>
                    <div className="stat-card-sub">payments received</div>
                </div>
            </div>

            <div className="dashboard-cols">
                {/* Upcoming Tasks */}
                <div className="dashboard-card">
                    <div className="dashboard-card-header"><i className="fas fa-calendar-check"></i>Upcoming Tasks</div>
                    {upcoming_tasks.length === 0
                        ? <div className="search-empty">No upcoming tasks</div>
                        : upcoming_tasks.map(t => (
                            <div key={t.id} className="dashboard-list-item">
                                <div className="dashboard-list-item-main">
                                    <div className="dashboard-list-item-name">{t.title}</div>
                                    <div className="dashboard-list-item-sub">{t.account_name}</div>
                                </div>
                                <div className="dashboard-list-item-right">
                                    <span className={`tag ${getTaskStatusClass(t.due_date) === 'overdue' ? 'priority-urgent' : getTaskStatusClass(t.due_date) === 'today' ? 'priority-high' : ''}`} style={{ fontSize: '0.7rem' }}>{formatDate(t.due_date)}</span>
                                </div>
                            </div>
                        ))
                    }
                </div>

                {/* Recent Communications */}
                <div className="dashboard-card">
                    <div className="dashboard-card-header"><i className="fas fa-comments"></i>Recent Communications</div>
                    {recent_communications.length === 0
                        ? <div className="search-empty">No recent communications</div>
                        : recent_communications.map(c => (
                            <div key={c.id} className="dashboard-list-item" style={{ cursor: 'pointer' }} onClick={() => onSelectAccount({ id: c.account_id })}>
                                <div className="dashboard-list-item-main">
                                    <div className="dashboard-list-item-name">{c.subject || `${c.type} (${c.direction})`}</div>
                                    <div className="dashboard-list-item-sub">{c.account_name}</div>
                                </div>
                                <div className="dashboard-list-item-right" style={{ fontSize: '0.7rem', color: '#6b7280' }}>{formatDate(c.timestamp)}</div>
                            </div>
                        ))
                    }
                </div>
            </div>

            {/* Account types breakdown */}
            {account_by_type.length > 0 && (
                <div className="dashboard-card" style={{ marginBottom: '1.5rem' }}>
                    <div className="dashboard-card-header"><i className="fas fa-chart-pie"></i>Accounts by Type</div>
                    <div style={{ display: 'flex', gap: '2rem', padding: '1rem', flexWrap: 'wrap' }}>
                        {account_by_type.map(t => (
                            <div key={t.type} style={{ textAlign: 'center' }}>
                                <div style={{ fontSize: '1.75rem', fontWeight: 700, color: '#0f172a' }}>{t.count}</div>
                                <div style={{ fontSize: '0.8125rem', color: '#6b7280', textTransform: 'capitalize' }}>{t.type}</div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};