/* TRAX — modals: Entry, Account, Data Source (Supabase), Confirm */

function Modal({ title, sub, onClose, children, footer, wide }) {
  useEffect(() => {
    const h = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  return React.createElement('div', { className: 'ov', onMouseDown: e => { if (e.target === e.currentTarget) onClose(); } },
    React.createElement('div', { className: 'dialog', style: wide ? { maxWidth: '600px' } : null },
      React.createElement('div', { className: 'dialog-hd' },
        React.createElement('div', null,
          React.createElement('h2', null, title),
          sub && React.createElement('p', null, sub)
        ),
        React.createElement('button', { className: 'icobtn', onClick: onClose, style: { width: 28, height: 28 } }, React.createElement(Icon, { name: 'close', w: 14 }))
      ),
      children,
      footer && React.createElement('div', { className: 'dialog-ft' }, footer)
    )
  );
}

/* ---------------- Entry Modal ---------------- */
function EntryModal({ editing, onClose }) {
  const S = TRAX.Store.data;
  const today = new Date().toISOString().slice(0, 10);
  const blank = { date: today, type: 'expense', account: '', desc: '', amount: '', ref: '', usdInrRate: 84, paidBy: '', paidTo: '', notes: '' };
  const [f, setF] = useState(editing ? { ...editing, amount: String(editing.amount) } : blank);
  const [saving, setSaving] = useState(false);
  const submittedRef = useRef(false); // guards against double-submit within one click burst
  const txnId = editing ? editing.txnId : TRAX.genTxnId(S.nextId);
  const upd = (k, v) => setF(p => ({ ...p, [k]: v }));

  const accountsOfType = S.accounts.filter(a => a.type === f.type);
  useEffect(() => {
    if (!accountsOfType.find(a => a.name === f.account)) upd('account', accountsOfType[0] ? accountsOfType[0].name : '');
  }, [f.type]);

  function submit() {
    if (submittedRef.current) return;
    if (!f.desc.trim()) { toast('Description is required', 'err'); return; }
    const amt = parseFloat(f.amount);
    if (!amt || amt <= 0) { toast('Enter a valid amount', 'err'); return; }
    // usdInrRate: blank keeps the default 84; otherwise must be finite, > 0 and within 50–150
    const rawRate = String(f.usdInrRate == null ? '' : f.usdInrRate).trim();
    const rate = rawRate === '' ? 84 : parseFloat(rawRate);
    if (!isFinite(rate) || rate <= 0) { toast('Enter a valid USD → INR rate', 'err'); return; }
    if (rate < 50 || rate > 150) { toast('USD → INR rate must be between 50 and 150', 'err'); return; }
    submittedRef.current = true;
    setSaving(true);
    const payload = {
      date: f.date, type: f.type, account: f.account, desc: f.desc.trim(),
      amount: amt, ref: f.ref.trim(), usdInrRate: rate,
      paidBy: f.paidBy.trim(), paidTo: f.paidTo.trim(), notes: f.notes.trim(),
    };
    if (editing) TRAX.updateEntry(editing.id, payload);
    else TRAX.addEntry(payload);
    window.__traxSave(editing ? 'Edit ' + txnId : 'Add ' + txnId);
    onClose();
  }

  const inrPreview = f.amount && f.usdInrRate ? '\u20B9' + (parseFloat(f.amount) * parseFloat(f.usdInrRate)).toLocaleString('en-US', { maximumFractionDigits: 0 }) : '';

  return React.createElement(Modal, {
    title: editing ? 'Edit Entry' : 'New Journal Entry',
    sub: 'Income, expense, asset, liability or equity movement.',
    onClose, wide: true,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-accent', onClick: submit, disabled: saving }, editing ? 'Update Entry' : 'Save Entry'),
    ],
  },
    React.createElement('div', { className: 'dialog-bd' },
      React.createElement('div', { className: 'fgrid' },
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'Transaction ID', React.createElement('span', { className: 'hint' }, 'AUTO')),
          React.createElement('input', { className: 'input readonly', value: txnId, readOnly: true })
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Date'),
          React.createElement('input', { className: 'input', type: 'date', value: f.date, onChange: e => upd('date', e.target.value) })
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Type'),
          React.createElement('select', { className: 'input', value: f.type, onChange: e => upd('type', e.target.value) },
            TRAX.TYPES.map(t => React.createElement('option', { key: t, value: t }, t[0].toUpperCase() + t.slice(1)))
          )
        ),
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'Account'),
          React.createElement('select', { className: 'input', value: f.account, onChange: e => upd('account', e.target.value) },
            accountsOfType.length === 0 && React.createElement('option', { value: '' }, '\u2014 no ' + f.type + ' accounts \u2014'),
            accountsOfType.map(a => React.createElement('option', { key: a.id, value: a.name }, a.code + ' \u00b7 ' + a.name))
          )
        ),
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'Description *'),
          React.createElement('input', { className: 'input', value: f.desc, placeholder: 'e.g. Monthly Renewal — Claude Pro', onChange: e => upd('desc', e.target.value) })
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Amount (USD) *'),
          React.createElement('div', { className: 'amt-wrap' },
            React.createElement('span', { className: 'cur' }, '$'),
            React.createElement('input', { className: 'input num', type: 'number', step: '0.01', min: '0', value: f.amount, placeholder: '0.00', onChange: e => upd('amount', e.target.value) })
          )
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Reference No.'),
          React.createElement('input', { className: 'input', value: f.ref, placeholder: 'Invoice / receipt ref', onChange: e => upd('ref', e.target.value) })
        ),
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'USD \u2192 INR Rate', inrPreview && React.createElement('span', { className: 'hint' }, '= ' + inrPreview)),
          React.createElement('div', { className: 'amt-wrap' },
            React.createElement('span', { className: 'cur' }, '\u20B9'),
            React.createElement('input', { className: 'input num', type: 'number', step: '0.01', value: f.usdInrRate, onChange: e => upd('usdInrRate', e.target.value) })
          )
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Paid By'),
          React.createElement('input', { className: 'input', list: 'dl-paidby', value: f.paidBy, placeholder: 'Name or entity', onChange: e => upd('paidBy', e.target.value) }),
          React.createElement('datalist', { id: 'dl-paidby' }, S.paidByList.map((n, i) => React.createElement('option', { key: i, value: n })))
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Paid To'),
          React.createElement('input', { className: 'input', list: 'dl-paidto', value: f.paidTo, placeholder: 'Name or entity', onChange: e => upd('paidTo', e.target.value) }),
          React.createElement('datalist', { id: 'dl-paidto' }, S.paidToList.map((n, i) => React.createElement('option', { key: i, value: n })))
        ),
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'Notes'),
          React.createElement('textarea', { className: 'input', value: f.notes, placeholder: 'Additional notes\u2026', onChange: e => upd('notes', e.target.value) })
        )
      )
    )
  );
}

/* ---------------- Account Modal ---------------- */
function AccountModal({ editing, onClose }) {
  const [f, setF] = useState(editing || { name: '', type: 'expense', code: TRAX.nextAccountCode('expense') });
  const upd = (k, v) => setF(p => ({ ...p, [k]: v }));
  const submittedRef = useRef(false); // guards against double-submit within one click burst
  function onType(t) { setF(p => ({ ...p, type: t, code: editing ? p.code : TRAX.nextAccountCode(t) })); }
  function submit() {
    if (submittedRef.current) return;
    if (!f.name.trim()) { toast('Account name is required', 'err'); return; }
    submittedRef.current = true;
    if (editing) TRAX.updateAccount(editing.id, { name: f.name.trim(), type: f.type, code: f.code.trim() });
    else TRAX.addAccount({ name: f.name.trim(), type: f.type, code: f.code.trim() });
    window.__traxSave(editing ? 'Edit account ' + f.name : 'Add account ' + f.name);
    onClose();
  }
  return React.createElement(Modal, {
    title: editing ? 'Edit Account' : 'Add Account',
    sub: 'Define a line in the chart of accounts.',
    onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-accent', onClick: submit }, editing ? 'Update' : 'Save Account'),
    ],
  },
    React.createElement('div', { className: 'dialog-bd' },
      React.createElement('div', { className: 'fgrid' },
        React.createElement('div', { className: 'fg full' },
          React.createElement('label', null, 'Account Name *'),
          React.createElement('input', { className: 'input', value: f.name, placeholder: 'e.g. SaaS Subscription', onChange: e => upd('name', e.target.value) })
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Type'),
          React.createElement('select', { className: 'input', value: f.type, onChange: e => onType(e.target.value) },
            TRAX.TYPES.map(t => React.createElement('option', { key: t, value: t }, t[0].toUpperCase() + t.slice(1)))
          )
        ),
        React.createElement('div', { className: 'fg' },
          React.createElement('label', null, 'Account Code'),
          React.createElement('input', { className: 'input num', value: f.code, onChange: e => upd('code', e.target.value) })
        )
      )
    )
  );
}

/* ---------------- Data Source Modal (Supabase) ---------------- */
function DataSourceModal({ onClose }) {
  const S = TRAX.Store;
  const SB = TRAX.SB;
  const connected = S.source === 'supabase' && !S.loadWarning;
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState(null);
  const projectRef = (SB.url.match(/https?:\/\/([^.]+)\./) || [])[1] || SB.url;

  async function reload() {
    setBusy(true); setStatus({ kind: 'info', msg: 'Reading from Supabase\u2026' });
    try {
      await TRAX.reloadCloud();
      setStatus({ kind: 'ok', msg: 'Reloaded \u00b7 ' + S.data.entries.length + ' entries' });
      toast('Reloaded from cloud', 'ok');
    } catch (e) {
      setStatus({ kind: 'err', msg: String(e.message || e).slice(0, 120) });
    } finally { setBusy(false); }
  }

  return React.createElement(Modal, {
    title: 'Data Source', sub: 'All ledger data is stored in and read from Supabase.', onClose,
    footer: [
      React.createElement('button', { key: 'r', className: 'btn btn-ghost', onClick: reload, disabled: busy },
        busy && React.createElement(Icon, { name: 'refresh', w: 13 }), busy ? 'Reading\u2026' : 'Reload from cloud'),
      React.createElement('button', { key: 'c', className: 'btn btn-accent', onClick: onClose }, 'Done'),
    ],
  },
    React.createElement('div', { className: 'dialog-bd' },
      connected
        ? React.createElement('div', { className: 'gh-status ok' }, React.createElement(Icon, { name: 'check', w: 14 }),
            'Connected to Supabase \u00b7 ', React.createElement('strong', { className: 'mono' }, projectRef), ' \u00b7 ', S.data.entries.length + ' entries')
        : React.createElement('div', { className: 'gh-status err' }, React.createElement(Icon, { name: 'refresh', w: 14 }),
            S.loadWarning || 'Offline \u2014 showing the local cached copy. Changes sync to Supabase when the connection returns.'),
      React.createElement('div', { className: 'gh-note' },
        'Entries and accounts live in the ', React.createElement('code', null, SB.table),
        ' table (row ', React.createElement('code', null, SB.row),
        '). Every add, edit or delete is written straight to Supabase and cached in this browser for offline use. Use Export to download a JSON backup.')
    )
  );
}

/* ---------------- Confirm Modal ---------------- */
function ConfirmModal({ message, onConfirm, onClose, title, confirmLabel }) {
  return React.createElement(Modal, {
    title: title || 'Confirm Delete',
    onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 'd', className: 'btn btn-danger', onClick: () => { onConfirm(); onClose(); } }, confirmLabel || 'Delete'),
    ],
  },
    React.createElement('div', { className: 'dialog-bd' },
      React.createElement('p', { style: { margin: '4px 0 8px', color: 'var(--text)' } }, message)
    )
  );
}

Object.assign(window, { Modal, EntryModal, AccountModal, DataSourceModal, ConfirmModal });