// Lost-reason capture modal — mandatory when a deal is marked Lost
function LostReasonModal({ deal, onClose, onConfirm }) {
  const REASONS = [
    'Too expensive / price',
    'Changed their mind',
    'Not happy with the design',
    'Timeframe didn\u2019t suit',
    'Went with a competitor',
    'Not responding / went cold',
    'Budget fell through',
    'Project cancelled',
    'Other',
  ];
  const [reason, setReason] = React.useState('');
  const [note, setNote] = React.useState('');
  const valid = !!reason;

  return (
    <div>
      <div className="detail-overlay" onClick={onClose} style={{ zIndex: 56 }}/>
      <div className="invite-modal" style={{ zIndex: 57, width: 460 }}>
        <div style={{ padding: '18px 22px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>Why was this lost?</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>
                {deal ? deal.customer : ''}{deal && deal.value ? ' · ' + fmt.money(deal.value, true) : ''} — a reason is required to mark a deal Lost.
              </div>
            </div>
            <button className="detail-close" style={{ marginLeft: 'auto' }} onClick={onClose}>
              <Icon name="close" size={16}/>
            </button>
          </div>
        </div>
        <div style={{ padding: '18px 22px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {REASONS.map(r => (
              <div
                key={r}
                className={`reassign-row ${reason === r ? 'on' : ''}`}
                onClick={() => setReason(r)}
              >
                <span className={`radio ${reason === r ? 'on' : ''}`}>
                  {reason === r && <span className="radio-dot"></span>}
                </span>
                <span style={{ fontSize: 13 }}>{r}</span>
              </div>
            ))}
          </div>
          <div className="detail-field" style={{ marginTop: 14 }}>
            <span className="lbl">Comments {reason === 'Other' ? '(required)' : '(optional)'}</span>
            <textarea
              value={note}
              onChange={(e) => setNote(e.target.value)}
              rows="3"
              placeholder="Any detail that helps the team learn from this…"
              style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--border)', borderRadius: 6, fontFamily: 'inherit', fontSize: 12.5, resize: 'vertical', outline: 'none' }}
            />
          </div>
        </div>
        <div style={{ padding: '14px 22px', borderTop: '1px solid var(--border)', background: 'var(--surface-2)', display: 'flex', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button
            className="btn primary"
            disabled={!valid || (reason === 'Other' && !note.trim())}
            style={{ marginLeft: 'auto', opacity: (!valid || (reason === 'Other' && !note.trim())) ? 0.5 : 1, background: 'var(--lost)', borderColor: 'var(--lost)' }}
            onClick={() => onConfirm(reason, note)}
          >
            <Icon name="check" size={12}/> Mark as Lost
          </button>
        </div>
      </div>
    </div>
  );
}

window.LostReasonModal = LostReasonModal;