// modal.jsx — Add Income / Expense modal
(function () {
  const { Icon, Toggle } = window;

  function CategoryDropdown({ cats, value, onChange }) {
    const [open, setOpen] = React.useState(false);
    const ref = React.useRef(null);
    React.useEffect(() => {
      const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
      document.addEventListener('mousedown', h);
      return () => document.removeEventListener('mousedown', h);
    }, []);
    const sel = cats.find((c) => c.id === value);
    return React.createElement('div', { className: 'dd-wrap', ref }, [
      React.createElement('button', {
        key: 't', type: 'button',
        className: 'dd-trigger' + (sel ? '' : ' placeholder'),
        onClick: () => setOpen((o) => !o),
      }, [
        sel
          ? React.createElement('span', { key: 'l', style: { display: 'flex', alignItems: 'center', gap: 10 } }, [
              React.createElement(Icon[sel.icon] || Icon.tag, { key: 'i', size: 16, stroke: sel.color }),
              sel.label,
            ])
          : React.createElement('span', { key: 'p' }, 'Select category'),
        React.createElement(Icon.chevDown, { key: 'c', size: 16, stroke: 'var(--text-3)' }),
      ]),
      open && React.createElement('div', { key: 'm', className: 'dd-menu' }, [
        ...cats.map((c) =>
          React.createElement('div', {
            key: c.id, className: 'dd-item',
            onClick: () => { onChange(c.id); setOpen(false); },
          }, [
            React.createElement(Icon[c.icon] || Icon.tag, { key: 'i', size: 16, stroke: c.color }),
            React.createElement('span', { key: 'l' }, c.label),
            value === c.id && React.createElement('span', { key: 'd', className: 'dd-sel-dot' }),
          ])),
        React.createElement('div', { key: 'add', className: 'dd-item dd-add' }, [
          React.createElement(Icon.plus, { key: 'i', size: 16, stroke: 'var(--accent-ink)' }),
          React.createElement('span', { key: 'l' }, 'Add Category'),
        ]),
      ]),
    ]);
  }

  function AddModal({ type, cats, onClose, onSubmit }) {
    const [amount, setAmount] = React.useState('');
    const [reason, setReason] = React.useState('');
    const [cat, setCat] = React.useState('');
    const [date, setDate] = React.useState(window.SEED.TODAY.toISOString().slice(0, 10));
    const [noteOpen, setNoteOpen] = React.useState(false);
    const [note, setNote] = React.useState('');
    const [recurring, setRecurring] = React.useState(false);
    const [freq, setFreq] = React.useState('Monthly');
    const [focused, setFocused] = React.useState(false);
    const [done, setDone] = React.useState(false);
    const isIncome = type === 'income';
    const amtRef = React.useRef(null);
    React.useEffect(() => { setTimeout(() => amtRef.current && amtRef.current.focus(), 150); }, []);

    const valid = parseFloat(amount) > 0 && reason.trim() && cat;
    const submit = () => {
      if (!valid || done) return;
      setDone(true);
      setTimeout(() => {
        onSubmit({ type, amount: parseFloat(amount), reason: reason.trim(), cat, date: new Date(date).toISOString(), note, recurring: recurring ? freq : null });
      }, 800);
    };

    return React.createElement('div', { className: 'backdrop', onMouseDown: (e) => { if (e.target === e.currentTarget) onClose(); } },
      React.createElement('div', { className: 'modal', 'data-screen-label': 'Add ' + (isIncome ? 'Income' : 'Expense') }, [
        React.createElement('div', { key: 'top', className: 'modal-top ' + type }),
        React.createElement('div', { key: 'head', className: 'modal-head' }, [
          React.createElement('h2', { key: 't' }, isIncome ? 'Add Income' : 'Add Expense'),
          React.createElement('button', { key: 'x', className: 'modal-close', onClick: onClose, 'aria-label': 'Close' },
            React.createElement(Icon.x, { size: 18 })),
        ]),
        React.createElement('div', { key: 'body', className: 'modal-body' }, [
          // Amount hero
          React.createElement('div', { key: 'amt', className: 'amount-input-wrap' + (focused ? ' focused' : '') }, [
            React.createElement('span', { key: 'p', className: 'amount-prefix' }, 'Rs.'),
            React.createElement('input', {
              key: 'i', ref: amtRef, className: 'amount-input', inputMode: 'decimal',
              placeholder: '0.00', value: amount,
              onFocus: () => setFocused(true), onBlur: () => setFocused(false),
              onChange: (e) => setAmount(e.target.value.replace(/[^0-9.]/g, '')),
            }),
          ]),
          React.createElement('div', { key: 'hint', className: 'amount-hint', style: { opacity: amount ? 0 : 1 } }, 'Enter amount'),

          // Reason
          React.createElement('div', { key: 'reason', className: 'form-field' }, [
            React.createElement('label', { key: 'l', className: 'field-label' }, 'Reason'),
            React.createElement('input', {
              key: 'i', className: 'input', value: reason,
              placeholder: isIncome ? 'e.g. Website project payment' : 'e.g. Office supplies',
              onChange: (e) => setReason(e.target.value),
            }),
          ]),

          // Category
          React.createElement('div', { key: 'cat', className: 'form-field' }, [
            React.createElement('label', { key: 'l', className: 'field-label' }, 'Category'),
            React.createElement(CategoryDropdown, { key: 'd', cats, value: cat, onChange: setCat }),
          ]),

          // Date
          React.createElement('div', { key: 'date', className: 'form-field' }, [
            React.createElement('label', { key: 'l', className: 'field-label' }, 'Date'),
            React.createElement('input', {
              key: 'i', type: 'date', className: 'input', value: date,
              onChange: (e) => setDate(e.target.value),
            }),
          ]),

          // Note (collapsible)
          !noteOpen
            ? React.createElement('button', { key: 'na', className: 'collapse-link', onClick: () => setNoteOpen(true) },
                [React.createElement(Icon.plus, { key: 'i', size: 14 }), 'Add note'])
            : React.createElement('div', { key: 'note', className: 'form-field' }, [
                React.createElement('label', { key: 'l', className: 'field-label' }, 'Note'),
                React.createElement('textarea', { key: 'i', className: 'input', placeholder: 'Optional details…', value: note, onChange: (e) => setNote(e.target.value) }),
              ]),

          // Recurring toggle
          React.createElement('div', { key: 'rec', className: 'toggle-field' }, [
            React.createElement('div', { key: 'l' }, [
              React.createElement('div', { key: 't', className: 'sr-label', style: { display: 'flex', alignItems: 'center', gap: 8 } },
                [React.createElement(Icon.repeat, { key: 'i', size: 15, stroke: 'var(--text-2)' }), 'Recurring']),
            ]),
            React.createElement(Toggle, { key: 'tg', on: recurring, onChange: setRecurring }),
          ]),
          recurring && React.createElement('div', { key: 'freq', className: 'form-field' },
            React.createElement('div', { className: 'segment', style: { width: '100%' } },
              ['Daily', 'Weekly', 'Monthly'].map((f) =>
                React.createElement('button', {
                  key: f, className: freq === f ? 'active' : '', style: { flex: 1 },
                  onClick: () => setFreq(f),
                }, f)))),

          // Submit
          React.createElement('button', {
            key: 'sub', className: 'submit-btn ' + type + (done ? ' done' : ''),
            disabled: !valid, onClick: submit,
          }, done
            ? [React.createElement(Icon.check, { key: 'c', size: 20 }), 'Added']
            : (isIncome ? 'Add Income' : 'Add Expense')),
        ]),
      ]));
  }

  window.AddModal = AddModal;
})();