// initialDetailId / onDetailChange: deep-link plumbing — MainApp seeds an open
// doc from the URL and mirrors open/close back into it (ref = invoice number).
const InvoicesView = ({ currentUser, initialDetailId, onDetailChange }) => {
    const [invoices, setInvoices] = React.useState([]);
    const [loading, setLoading]   = React.useState(true);
    const [statusFilter, setStatusFilter] = React.useState('');
    const [subsOnly, setSubsOnly] = React.useState(false); // subscription docs only (derived from items)
    const [archived, setArchived] = React.useState(false); // void invoices live in the archive
    const [showForm, setShowForm] = React.useState(false); // new-invoice form (shared DocFormModal)
    const [payingId, setPayingId] = React.useState(null);
    const [payAmount, setPayAmount] = React.useState('');

    const [detailId, setDetailId] = React.useState(initialDetailId || null); // open invoice in the detail modal (id or number)
    const openDetail  = (inv) => { setDetailId(inv.id); onDetailChange && onDetailChange(inv.invoice_number || inv.id); };
    const closeDetail = () => { setDetailId(null); onDetailChange && onDetailChange(null); };
    // Browser Back/Forward changes the URL → MainApp updates initialDetailId —
    // but the view stays mounted, so the prop must be synced, not just seeded.
    React.useEffect(() => { setDetailId(initialDetailId || null); }, [initialDetailId]);

    // A failed fetch must not render as "No invoices yet" — surface it (swallowed-error rule).
    const [loadError, setLoadError] = React.useState(false);
    // Server-paged (IMP-1): the browser never loads every invoice ever issued.
    const PAGE = 100;
    const [total, setTotal] = React.useState(0);
    const load = (append) => {
        append = append === true; // guard: load is also an onClick/onChanged callback (first arg = event)
        return api.getInvoices({
            paged: 'true', limit: PAGE, offset: append ? invoices.length : 0,
            ...(statusFilter ? { status: statusFilter } : {}),
            ...(subsOnly ? { subscription: 'true' } : {}),
            ...(archived && !statusFilter ? { archived: 'true' } : {}),
        }).then(({ rows, total }) => {
            setInvoices(p => append ? [...p, ...rows] : rows);
            setTotal(total); setLoadError(false);
        }).catch(() => setLoadError(true)).finally(() => setLoading(false));
    };
    React.useEffect(() => { load(); }, [statusFilter, subsOnly, archived]);

    const handleStatusChange = async (inv, status) => {
        try { await api.updateInvoice(inv.id, { status }); await load(); } catch(err) { alert(err.message); }
    };

    const handleDelete = async (inv) => {
        if (!window.confirm(`Delete invoice ${inv.invoice_number}?`)) return;
        try { await api.deleteInvoice(inv.id); await load(); } catch(err) { alert(err.message); }
    };

    const handlePayment = async () => {
        if (!payAmount || parseFloat(payAmount) <= 0) return;
        try { await api.recordPayment(payingId, { amount: parseFloat(payAmount) }); await load(); setPayingId(null); setPayAmount(''); }
        catch(err) { alert(err.message); }
    };

    const statusColors = { draft: '#475569', sent: '#1d4ed8', paid: '#065f46', partial: '#92400e', overdue: '#991b1b', void: '#9ca3af' };

    return (
        <div className="view-content">
            <div className="list-view-header">
                <div className="list-view-title"><i className="fas fa-file-invoice-dollar" style={{ marginRight: '0.5rem', color: '#3b82f6' }}></i>Invoices</div>
                <div className="list-view-actions">
                    <span className={'tag-pill tag-filter-chip'}
                          style={subsOnly ? { background: 'var(--accent, #3b82f6)', color: '#fff' } : {}}
                          onClick={() => setSubsOnly(v => !v)} title="Only invoices containing a subscription item">
                        <i className="fas fa-rotate" style={{ marginRight: '0.25rem' }}></i>Subscriptions
                    </span>
                    <span className={'tag-pill tag-filter-chip'}
                          style={archived ? { background: 'var(--accent, #3b82f6)', color: '#fff' } : {}}
                          onClick={() => setArchived(v => !v)} title="Void invoices">
                        <i className="fas fa-box-archive" style={{ marginRight: '0.25rem' }}></i>Archived
                    </span>
                    <select className="form-input" style={{ width: 140 }} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
                        <option value="">All Statuses</option>
                        {['draft','sent','paid','partial','overdue','void'].map(s => <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>)}
                    </select>
                    <button className="btn btn-primary btn-small" onClick={() => setShowForm(true)}><i className="fas fa-plus"></i> New Invoice</button>
                </div>
            </div>

            {loadError && !loading && (
                <LoadErrorBanner what="invoices" hasData={invoices.length > 0} onRetry={load} />
            )}

            {loading ? <div className="loading-state"><i className="fas fa-spinner fa-spin"></i><p>Loading…</p></div> : (
                <table className="data-table">
                    <thead><tr><th>Invoice #</th><th>Account</th><th>Status</th><th>Issue Date</th><th>Due</th><th>Total</th><th>Paid</th><th>Balance</th><th></th></tr></thead>
                    <tbody>
                        {invoices.length === 0
                            ? <tr><td colSpan={9} style={{ textAlign: 'center', color: '#6b7280', padding: '2rem' }}>No invoices yet</td></tr>
                            : invoices.map(inv => {
                                const balance = parseFloat(inv.total) - parseFloat(inv.amount_paid);
                                return (
                                    <tr key={inv.id} className="row-clickable" onClick={() => openDetail(inv)}>
                                        <td style={{ fontWeight: 600, fontFamily: 'monospace' }}>
                                            <a className="doc-link" href={'/invoices/' + encodeURIComponent(inv.invoice_number)}
                                               onClick={(e) => { e.stopPropagation(); navClick(e, () => openDetail(inv)); }}>{inv.invoice_number}</a>
                                            {inv.is_subscription && <i className="fas fa-rotate" title="Subscription" style={{ marginLeft: '0.4rem', color: 'var(--accent, #3b82f6)', fontSize: '0.75rem' }}></i>}
                                        </td>
                                        <td>{inv.account_name}</td>
                                        <td onClick={e => e.stopPropagation()}>
                                            <select className="inline-select" value={inv.status} onChange={e => handleStatusChange(inv, e.target.value)} style={{ color: statusColors[inv.status] }}>
                                                {['draft','sent','paid','partial','overdue','void'].map(s => <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>)}
                                            </select>
                                        </td>
                                        <td>{formatDate(inv.issue_date)}</td>
                                        <td style={{ color: inv.due_date && new Date(inv.due_date) < new Date() && inv.status !== 'paid' ? '#ef4444' : '#374151' }}>{inv.due_date ? formatDate(inv.due_date) : '—'}</td>
                                        <td style={{ fontWeight: 600 }}>${parseFloat(inv.total).toFixed(2)}</td>
                                        <td style={{ color: '#10b981' }}>${parseFloat(inv.amount_paid).toFixed(2)}</td>
                                        <td style={{ fontWeight: 600, color: balance > 0 ? '#f59e0b' : '#10b981' }}>${balance.toFixed(2)}</td>
                                        <td onClick={e => e.stopPropagation()}>
                                            <div style={{ display: 'flex', gap: '0.25rem' }}>
                                                <button className="btn-icon-sm" title="Open" onClick={() => openDetail(inv)}><i className="fas fa-folder-open"></i></button>
                                                <button className="btn-icon-sm" title="Download PDF" onClick={() => api.downloadDocPdf('invoice', inv.id, `${inv.invoice_number}.pdf`).catch(err => alert(err.message))}><i className="fas fa-file-pdf"></i></button>
                                                {inv.status !== 'paid' && inv.status !== 'void' && balance > 0 && (
                                                    <button className="btn-icon-sm" title="Record Payment" onClick={() => { setPayingId(inv.id); setPayAmount(balance.toFixed(2)); }}>
                                                        <i className="fas fa-dollar-sign"></i>
                                                    </button>
                                                )}
                                                {inv.status === 'draft' && (
                                                    <button className="btn-icon-sm danger" title="Delete draft" onClick={() => handleDelete(inv)}><i className="fas fa-trash"></i></button>
                                                )}
                                            </div>
                                        </td>
                                    </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            )}

            {!loading && invoices.length < total && (
                <div style={{ textAlign: 'center', padding: '0.75rem' }}>
                    <button className="btn btn-secondary btn-small" onClick={() => load(true)}>
                        <i className="fas fa-angles-down"></i> Load more ({invoices.length} of {total})
                    </button>
                </div>
            )}

            {detailId && (
                <DocDetailModal kind="invoice" docId={detailId} currentUser={currentUser}
                    onClose={closeDetail} onChanged={load} />
            )}

            {payingId && (
                <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && setPayingId(null)}>
                    <div className="modal" style={{ maxWidth: 360, width: '90%' }}>
                        <div className="modal-header"><h2 className="modal-title">Record Payment</h2><button className="modal-close-btn" onClick={() => setPayingId(null)}>&times;</button></div>
                        <div className="modal-body">
                            <div className="form-group" style={{ marginBottom: '1rem' }}>
                                <label className="form-label">Amount Received ($)</label>
                                <input type="number" step="0.01" min="0.01" className="form-input" value={payAmount} onChange={e => setPayAmount(e.target.value)} autoFocus />
                            </div>
                            <div className="btn-group">
                                <button className="btn btn-secondary" onClick={() => setPayingId(null)}>Cancel</button>
                                <button className="btn btn-primary" onClick={handlePayment} disabled={!payAmount}><i className="fas fa-check"></i> Record Payment</button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {showForm && (
                <DocFormModal kind="invoice" onClose={() => setShowForm(false)} onCreated={load} />
            )}
        </div>
    );
};