const ProductsView = ({ currentUser }) => {
    const [products, setProducts] = React.useState([]);
    const [loading, setLoading]   = React.useState(true);
    const [search, setSearch]     = React.useState('');
    const [editing, setEditing]   = React.useState(null); // null | 'new' | product object
    const [saving, setSaving]     = React.useState(false);
    const [formErr, setFormErr]   = React.useState('');
    const canEdit = currentUser.role !== 'rep';

    const emptyForm = { sku: '', name: '', description: '', category: '', unit_price: '', unit_cost: '', stock_qty: 0, is_active: true };
    const [form, setForm] = React.useState(emptyForm);
    const set = k => e => setForm(p => ({ ...p, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));

    const load = () => api.getProducts().then(setProducts).catch(console.error).finally(() => setLoading(false));
    React.useEffect(() => { load(); }, []);

    const startEdit = (p) => { setForm(p ? { ...p } : emptyForm); setEditing(p || 'new'); setFormErr(''); };

    const handleSave = async (e) => {
        e.preventDefault();
        if (!form.name) { setFormErr('Name is required.'); return; }
        setSaving(true); setFormErr('');
        try {
            const data = { ...form, unit_price: parseFloat(form.unit_price) || 0, unit_cost: form.unit_cost ? parseFloat(form.unit_cost) : null, stock_qty: parseInt(form.stock_qty) || 0, sku: form.sku || null };
            if (editing === 'new') await api.createProduct(data);
            else await api.updateProduct(editing.id, data);
            await load();
            setEditing(null);
        } catch(err) { setFormErr(err.message); }
        finally { setSaving(false); }
    };

    const handleDelete = async (p) => {
        if (!window.confirm(`Delete product "${p.name}"? This cannot be undone.`)) return;
        try { await api.deleteProduct(p.id); await load(); }
        catch(err) { alert(err.message); }
    };

    const handleStockAdj = async (p, delta) => {
        const newQty = Math.max(0, p.stock_qty + delta);
        try { await api.updateProduct(p.id, { stock_qty: newQty }); await load(); }
        catch(err) { alert(err.message); }
    };

    const filtered = products.filter(p =>
        !search || p.name.toLowerCase().includes(search.toLowerCase()) ||
        (p.sku || '').toLowerCase().includes(search.toLowerCase()) ||
        (p.category || '').toLowerCase().includes(search.toLowerCase())
    );

    return (
        <div className="view-content">
            <div className="list-view-header">
                <div className="list-view-title"><i className="fas fa-boxes" style={{ marginRight: '0.5rem', color: '#3b82f6' }}></i>Inventory</div>
                <div className="list-view-actions">
                    <input className="form-input" style={{ width: 200 }} placeholder="Search…" value={search} onChange={e => setSearch(e.target.value)} />
                    {canEdit && <button className="btn btn-primary btn-small" onClick={() => startEdit(null)}><i className="fas fa-plus"></i> Add Item</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>SKU</th><th>Name</th><th>Category</th><th>Price</th><th>Cost</th><th>Stock</th><th>Status</th>
                            {canEdit && <th></th>}
                        </tr>
                    </thead>
                    <tbody>
                        {filtered.length === 0 ? (
                            <tr><td colSpan={canEdit ? 8 : 7} style={{ textAlign: 'center', color: '#6b7280', padding: '2rem' }}>No products yet</td></tr>
                        ) : filtered.map(p => (
                            <tr key={p.id}>
                                <td style={{ color: '#6b7280', fontSize: '0.8125rem' }}>{p.sku || '—'}</td>
                                <td style={{ fontWeight: 500 }}>{p.name}{p.description && <div style={{ fontSize: '0.75rem', color: '#6b7280' }}>{p.description.slice(0, 60)}{p.description.length > 60 ? '…' : ''}</div>}</td>
                                <td style={{ color: '#6b7280' }}>{p.category || '—'}</td>
                                <td>${parseFloat(p.unit_price).toFixed(2)}</td>
                                <td style={{ color: '#6b7280' }}>{p.unit_cost ? '$' + parseFloat(p.unit_cost).toFixed(2) : '—'}</td>
                                <td>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
                                        {canEdit && <button className="btn-icon-sm" onClick={() => handleStockAdj(p, -1)} title="Remove 1"><i className="fas fa-minus"></i></button>}
                                        <span style={{ fontWeight: 600, minWidth: '2rem', textAlign: 'center', color: p.stock_qty < 5 ? '#ef4444' : '#0f172a' }}>{p.stock_qty}</span>
                                        {canEdit && <button className="btn-icon-sm" onClick={() => handleStockAdj(p, 1)} title="Add 1"><i className="fas fa-plus"></i></button>}
                                    </div>
                                </td>
                                <td><span className={`status-badge ${p.is_active ? 'active' : 'inactive'}`}>{p.is_active ? 'Active' : 'Inactive'}</span></td>
                                {canEdit && (
                                    <td>
                                        <div style={{ display: 'flex', gap: '0.25rem' }}>
                                            <button className="btn-icon-sm" onClick={() => startEdit(p)} title="Edit"><i className="fas fa-pencil-alt"></i></button>
                                            <button className="btn-icon-sm danger" onClick={() => handleDelete(p)} title="Delete"><i className="fas fa-trash"></i></button>
                                        </div>
                                    </td>
                                )}
                            </tr>
                        ))}
                    </tbody>
                </table>
            )}

            {/* Product form modal */}
            {editing && (
                <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && setEditing(null)}>
                    <div className="modal modal-medium">
                        <div className="modal-header">
                            <h2 className="modal-title">{editing === 'new' ? 'New Product' : `Edit: ${editing.name}`}</h2>
                            <button className="modal-close-btn" onClick={() => setEditing(null)}>&times;</button>
                        </div>
                        <div className="modal-body">
                            <form onSubmit={handleSave}>
                                {formErr && <div className="api-error">{formErr}</div>}
                                <div className="form-grid">
                                    <div className="form-group full-width"><label className="form-label">Name *</label><input className="form-input" value={form.name} onChange={set('name')} required /></div>
                                    <div className="form-group"><label className="form-label">SKU</label><input className="form-input" value={form.sku || ''} onChange={set('sku')} placeholder="Optional" /></div>
                                    <div className="form-group"><label className="form-label">Category</label><input className="form-input" value={form.category || ''} onChange={set('category')} /></div>
                                    <div className="form-group"><label className="form-label">Unit Price</label><input type="number" step="0.01" className="form-input" value={form.unit_price} onChange={set('unit_price')} /></div>
                                    <div className="form-group"><label className="form-label">Unit Cost</label><input type="number" step="0.01" className="form-input" value={form.unit_cost || ''} onChange={set('unit_cost')} /></div>
                                    <div className="form-group"><label className="form-label">Stock Qty</label><input type="number" className="form-input" value={form.stock_qty} onChange={set('stock_qty')} /></div>
                                    <div className="form-group" style={{ justifyContent: 'flex-end' }}>
                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', marginTop: '1.5rem' }}>
                                            <input type="checkbox" checked={form.is_active} onChange={set('is_active')} /> Active
                                        </label>
                                    </div>
                                    <div className="form-group full-width"><label className="form-label">Description</label><textarea className="form-input form-textarea" value={form.description || ''} onChange={set('description')} /></div>
                                </div>
                                <div className="btn-group">
                                    <button type="button" className="btn btn-secondary" onClick={() => setEditing(null)} 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> Save Product</>}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};