const InvoicesView = ({ accounts, currentUser }) => {
    const [invoices, setInvoices] = React.useState([]);
    const [loading, setLoading]   = React.useState(true);
    const [statusFilter, setStatusFilter] = React.useState('');
    const [showForm, setShowForm] = React.useState(false);
    const [payingId, setPayingId] = React.useState(null);
    const [payAmount, setPayAmount] = React.useState('');
    const [products, setProducts] = React.useState([]);

    const [form, setForm]   = React.useState({ account_id: '', contact_id: '', due_date: '', notes: '', tax_rate: 0 });
    const [items, setItems] = React.useState([]);
    const [saving, setSaving] = React.useState(false);
    const [formErr, setFormErr] = React.useState('');
    const [contacts, setContacts] = React.useState([]);
    const setF = k => e => setForm(p => ({ ...p, [k]: e.target.value }));

    const load = () => api.getInvoices(statusFilter ? { status: statusFilter } : {}).then(setInvoices).catch(console.error).finally(() => setLoading(false));
    React.useEffect(() => { load(); api.getProducts({ active: 'true' }).then(setProducts).catch(console.error); }, [statusFilter]);
    React.useEffect(() => {
        if (form.account_id) api.getContacts({ account_id: form.account_id }).then(setContacts).catch(console.error);
        else setContacts([]);
    }, [form.account_id]);

    const handleCreate = async (e) => {
        e.preventDefault();
        if (!form.account_id) { setFormErr('Account is required.'); return; }
        setSaving(true); setFormErr('');
        try {
            await api.createInvoice({ ...form, account_id: parseInt(form.account_id), contact_id: form.contact_id ? parseInt(form.contact_id) : null, items });
            await load();
            setShowForm(false);
            setForm({ account_id: '', contact_id: '', due_date: '', notes: '', tax_rate: 0 });
            setItems([]);
        } catch(err) { setFormErr(err.message); }
        finally { setSaving(false); }
    };

    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 filtered = statusFilter ? invoices.filter(i => i.status === statusFilter) : invoices;
    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">
                    <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>

            {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>
                        {filtered.length === 0
                            ? <tr><td colSpan={9} style={{ textAlign: 'center', color: '#6b7280', padding: '2rem' }}>No invoices yet</td></tr>
                            : filtered.map(inv => {
                                const balance = parseFloat(inv.total) - parseFloat(inv.amount_paid);
                                return (
                                    <tr key={inv.id}>
                                        <td style={{ fontWeight: 600, fontFamily: 'monospace' }}>{inv.invoice_number}</td>
                                        <td>{inv.account_name}</td>
                                        <td>
                                            <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>
                                            <div style={{ display: 'flex', gap: '0.25rem' }}>
                                                {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>
                                                )}
                                                <button className="btn-icon-sm danger" title="Delete" onClick={() => handleDelete(inv)}><i className="fas fa-trash"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            )}

            {/* Record payment modal */}
            {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>
            )}

            {/* New invoice modal */}
            {showForm && (
                <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && setShowForm(false)}>
                    <div className="modal builder-modal">
                        <div className="modal-header"><h2 className="modal-title">New Invoice</h2><button className="modal-close-btn" onClick={() => setShowForm(false)}>&times;</button></div>
                        <div className="modal-body">
                            <form onSubmit={handleCreate}>
                                {formErr && <div className="api-error">{formErr}</div>}
                                <div className="form-grid" style={{ marginBottom: '1.25rem' }}>
                                    <div className="form-group">
                                        <label className="form-label">Account *</label>
                                        <select className="form-input" value={form.account_id} onChange={setF('account_id')} required>
                                            <option value="">— Select —</option>
                                            {accounts.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                                        </select>
                                    </div>
                                    <div className="form-group">
                                        <label className="form-label">Contact</label>
                                        <select className="form-input" value={form.contact_id} onChange={setF('contact_id')}>
                                            <option value="">— None —</option>
                                            {contacts.map(c => <option key={c.id} value={c.id}>{c.first_name} {c.last_name}</option>)}
                                        </select>
                                    </div>
                                    <div className="form-group">
                                        <label className="form-label">Due Date</label>
                                        <input type="date" className="form-input" value={form.due_date} onChange={setF('due_date')} />
                                    </div>
                                    <div className="form-group full-width">
                                        <label className="form-label">Notes</label>
                                        <textarea className="form-input" style={{ minHeight: 60 }} value={form.notes} onChange={setF('notes')} />
                                    </div>
                                </div>
                                <h4 style={{ marginBottom: '0.75rem', color: '#374151', fontSize: '0.9375rem' }}>Line Items</h4>
                                <LineItemsEditor items={items} setItems={setItems} products={products} />
                                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '1rem' }}>
                                    <TotalsBlock items={items} taxRate={form.tax_rate} onTaxChange={v => setForm(p => ({ ...p, tax_rate: v }))} />
                                </div>
                                <div className="btn-group">
                                    <button type="button" className="btn btn-secondary" onClick={() => setShowForm(false)} disabled={saving}>Cancel</button>
                                    <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-check"></i> Create Invoice</>}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};