// New-transaction modal — appears from Overview / Transactions / House add buttons.
function AddTransactionModal({ houses, onClose, onSubmit, initial }) {
  const [form, setForm] = React.useState({
    date: new Date().toISOString().slice(0, 10),
    houseId: houses[0]?.id || '',
    type: 'expense',
    category: 'Cleaning Supplies',
    description: '',
    amount: '',
    ...initial,
  });
  const [dragOver, setDragOver] = React.useState(false);
  const [hasReceipt, setHasReceipt] = React.useState(false);

  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const cats = (window.CATEGORIES && window.CATEGORIES[form.type]) || [];

  React.useEffect(() => {
    if (cats.length && !cats.includes(form.category)) upd('category', cats[0]);
  }, [form.type]);

  const submit = () => {
    if (!form.amount || !form.description) return;
    onSubmit({
      ...form,
      amount: Number(form.amount),
      source: 'manual',
      autoImported: false,
      receiptUrl: hasReceipt ? 'receipt' : null,
    });
    onClose();
  };

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h2>New transaction</h2>
          <button className="icon-btn" onClick={onClose} style={{ border: 0, background: 'transparent' }}>{Icon.x}</button>
        </div>
        <div style={{ padding: 24, display: 'grid', gap: 16 }}>
          <div className="segmented" style={{ alignSelf: 'start' }}>
            <button className={form.type === 'income' ? 'active' : ''} onClick={() => upd('type', 'income')}>Income</button>
            <button className={form.type === 'expense' ? 'active' : ''} onClick={() => upd('type', 'expense')}>Expense</button>
          </div>

          <div className="grid cols-2">
            <div className="form-row">
              <label>Date</label>
              <input className="input" type="date" value={form.date} onChange={e => upd('date', e.target.value)}/>
            </div>
            <div className="form-row">
              <label>House</label>
              <select className="select" value={form.houseId} onChange={e => upd('houseId', e.target.value)}>
                {houses.map(h => <option key={h.id} value={h.id}>{h.name}</option>)}
              </select>
            </div>
          </div>

          <div className="grid cols-2">
            <div className="form-row">
              <label>Category</label>
              <select className="select" value={form.category} onChange={e => upd('category', e.target.value)}>
                {cats.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div className="form-row">
              <label>Amount</label>
              <div style={{ position: 'relative' }}>
                <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)' }}>$</span>
                <input className="input" type="number" placeholder="0.00" style={{ paddingLeft: 22 }}
                       value={form.amount} onChange={e => upd('amount', e.target.value)}/>
              </div>
            </div>
          </div>

          <div className="form-row">
            <label>Description</label>
            <input className="input" type="text" placeholder="e.g. New kitchen towels"
                   value={form.description} onChange={e => upd('description', e.target.value)}/>
          </div>

          <div className="form-row">
            <label>Receipt</label>
            <div
              onDragOver={e => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={e => { e.preventDefault(); setDragOver(false); setHasReceipt(true); }}
              onClick={() => setHasReceipt(h => !h)}
              style={{
                border: `1.5px dashed ${dragOver ? 'var(--accent)' : 'var(--border-strong)'}`,
                borderRadius: 10,
                padding: 20,
                textAlign: 'center',
                background: dragOver ? 'var(--accent-soft)' : hasReceipt ? 'var(--accent-soft)' : 'var(--bg-sunken)',
                transition: 'all 0.12s',
                cursor: 'default',
              }}>
              {hasReceipt ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }}>
                  <ReceiptThumb/>
                  <span style={{ color: 'var(--accent)', fontWeight: 500 }}>receipt-2026-04-24.jpg</span>
                  <span className="muted xs">· 248 KB</span>
                </div>
              ) : (
                <>
                  <div style={{ color: 'var(--text-tertiary)', marginBottom: 4 }}>{Icon.upload}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
                    Drop receipt here or <span style={{ color: 'var(--accent)', fontWeight: 500 }}>browse</span>
                  </div>
                  <div className="xs muted" style={{ marginTop: 4 }}>PNG, JPG, or PDF up to 10MB</div>
                </>
              )}
            </div>
          </div>
        </div>
        <div style={{ padding: '16px 24px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn accent" onClick={submit} disabled={!form.amount || !form.description}>
            Save transaction
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AddTransactionModal });