// New Lead/Deal creation modal
function NewDealModal({ stages, reps, showrooms, currentUser, defaultShowroom, prefillContact, allContacts, allDeals, onClose, onCreate }) {
  const isLeadership = currentUser.role === 'admin' || currentUser.role === 'leadership';
  const isManager = currentUser.role === 'manager';
  const isSalesDesigner = currentUser.role === 'sales_designer';

  // Allowed showrooms based on role
  const allowedShowroomList = isLeadership
    ? showrooms
    : isManager
      ? showrooms.filter(s => (currentUser.manages || []).includes(s.id))
      : showrooms.filter(s => (currentUser.works || []).includes(s.id));

  // Default rep selection
  const defaultRepId = prefillContact?.owner
    ? (reps.find(r => r.name === prefillContact.owner)?.id || reps[0]?.id || '')
    : (currentUser.repId || (reps.find(r => (r.works || []).includes(defaultShowroom))?.id) || reps[0]?.id || '');
  const safeShowroom = prefillContact?.homeShowroom
    || (defaultShowroom && defaultShowroom !== 'all' ? defaultShowroom : null)
    || (currentUser.home)
    || allowedShowroomList[0]?.id
    || showrooms[0]?.id;

  const [draft, setDraft] = React.useState({
    customer: prefillContact?.name || '',
    phone: prefillContact?.phone || '',
    email: prefillContact?.email || '',
    suburb: prefillContact?.suburb || '',
    address: prefillContact?.address || '',
    product: 'Kitchen',
    showroom: safeShowroom,
    rep: defaultRepId,
    value: '',
    budgetRange: '',
    onsiteVisitDone: false,
    designApptDate: new Date().toISOString().slice(0, 10),
    quotePresentationDate: '',
    forecastDepositMonth: '',
    stage: 'possible',
    notes: prefillContact ? `Created from contact ${prefillContact.id}` : '',
    contactId: prefillContact?.id || null,
  });

  // When user picks a match in the lookup, prefill from that contact
  const useMatch = (c) => {
    setDraft(prev => ({
      ...prev,
      customer: c.name || prev.customer,
      phone: c.phone || prev.phone,
      email: c.email || prev.email,
      suburb: c.suburb || prev.suburb,
      address: c.address || prev.address,
      showroom: c.homeShowroom || prev.showroom,
      contactId: c.id,
    }));
  };

  const update = (k, v) => setDraft(prev => ({ ...prev, [k]: v }));

  // Filter reps to those who work at the selected showroom
  const eligibleReps = reps.filter(r => (r.works || []).includes(draft.showroom));
  React.useEffect(() => {
    if (!eligibleReps.find(r => r.id === draft.rep)) {
      update('rep', eligibleReps[0]?.id || draft.rep);
    }
  }, [draft.showroom]);

  const valid = draft.customer.trim().length > 1 && draft.rep && draft.showroom;

  const submit = () => {
    if (!valid) return;
    const rep = reps.find(r => r.id === draft.rep);
    onCreate({
      ...draft,
      value: parseFloat(draft.value) || 0,
      repName: rep.name,
      customer: draft.customer.trim(),
    });
  };

  const productOptions = ['Kitchen', 'Laundry', 'Walk-in robe', 'Built-in robes', 'Butler\'s pantry', 'Kitchen + Laundry', 'Vanity', 'Storage / media wall', 'Other'];
  const stageOptions = stages.filter(s => s.id === 'possible' || s.id === 'in_progress');

  return (
    <div>
      <div className="detail-overlay" onClick={onClose} style={{ zIndex: 52 }}/>
      <div className="invite-modal" style={{ zIndex: 53, width: 600 }}>
        <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' }}>{prefillContact ? 'New deal for ' + prefillContact.name : 'New lead'}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>
                {prefillContact
                  ? `Linking new quote to contact ${prefillContact.id}. Their existing details are pre-filled.`
                  : 'Create a new customer enquiry. They\u2019ll appear in your pipeline immediately.'}
              </div>
            </div>
            <button className="detail-close" style={{ marginLeft: 'auto' }} onClick={onClose}>
              <Icon name="close" size={16}/>
            </button>
          </div>
        </div>

        <div style={{ padding: '18px 22px', maxHeight: '65vh', overflowY: 'auto' }}>
          <div className="detail-section">
            <h4>Customer</h4>
            <div className="detail-grid">
              <div className="detail-field" style={{ gridColumn: '1 / -1' }}>
                <span className="lbl">Full name *</span>
                <input
                  value={draft.customer}
                  onChange={(e) => update('customer', e.target.value)}
                  placeholder="e.g. Sarah & James Wilson"
                  autoFocus
                />
              </div>
              <div className="detail-field">
                <span className="lbl">Phone</span>
                <input
                  value={draft.phone}
                  onChange={(e) => update('phone', e.target.value)}
                  placeholder="04xx xxx xxx"
                  className="mono"
                />
              </div>
              <div className="detail-field">
                <span className="lbl">Email</span>
                <input
                  value={draft.email}
                  onChange={(e) => update('email', e.target.value)}
                  placeholder="customer@example.com"
                  className="mono"
                  type="email"
                />
              </div>
              <div className="detail-field">
                <span className="lbl">Suburb</span>
                <input
                  value={draft.suburb}
                  onChange={(e) => update('suburb', e.target.value)}
                  placeholder="e.g. Bayswater"
                />
              </div>
              <div className="detail-field">
                <span className="lbl">Job type</span>
                <select value={draft.product} onChange={(e) => update('product', e.target.value)}>
                  {productOptions.map(p => <option key={p} value={p}>{p}</option>)}
                </select>
              </div>
              <div className="detail-field" style={{ gridColumn: '1 / -1' }}>
                <span className="lbl">Address <span style={{ fontSize: 10, color: 'var(--ink-3)' }}>· optional</span></span>
                <input
                  value={draft.address}
                  onChange={(e) => update('address', e.target.value)}
                  placeholder="e.g. 12 Orchard St, Bayswater VIC 3153"
                />
              </div>
            </div>
            {allContacts && !prefillContact && (
              <CustomerLookup
                allContacts={allContacts}
                allDeals={allDeals || []}
                showrooms={showrooms}
                name={draft.customer}
                phone={draft.phone}
                email={draft.email}
                address={draft.address}
                onMerge={useMatch}
              />
            )}
          </div>

          <div className="detail-section">
            <h4>Assignment</h4>
            <div className="detail-grid">
              <div className="detail-field">
                <span className="lbl">Showroom *</span>
                <select value={draft.showroom} onChange={(e) => update('showroom', e.target.value)}>
                  {allowedShowroomList.map(s => <option key={s.id} value={s.id}>{s.name} ({s.state})</option>)}
                </select>
              </div>
              <div className="detail-field">
                <span className="lbl">Assigned designer *</span>
                <select value={draft.rep} onChange={(e) => update('rep', e.target.value)}>
                  {eligibleReps.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                </select>
              </div>
              <div className="detail-field">
                <span className="lbl">Initial stage</span>
                <select value={draft.stage} onChange={(e) => update('stage', e.target.value)}>
                  {stageOptions.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
                </select>
              </div>
              <div className="detail-field">
                <span className="lbl">Estimated value (AUD)</span>
                <input
                  type="number"
                  value={draft.value}
                  onChange={(e) => update('value', e.target.value)}
                  placeholder="0"
                  className="num"
                />
              </div>
            </div>
          </div>

          <div className="detail-section">
            <h4>Dates & details</h4>
            <div className="detail-grid">
              <div className="detail-field">
                <span className="lbl">First design appointment</span>
                <input type="date" value={draft.designApptDate} onChange={(e) => update('designApptDate', e.target.value)}/>
              </div>
              <div className="detail-field">
                <span className="lbl">Quote presentation date</span>
                <input type="date" value={draft.quotePresentationDate} onChange={(e) => update('quotePresentationDate', e.target.value)}/>
              </div>
              <div className="detail-field">
                <span className="lbl">Forecast deposit month</span>
                <input type="date" value={draft.forecastDepositMonth} onChange={(e) => update('forecastDepositMonth', e.target.value)}/>
              </div>
              <div className="detail-field">
                <span className="lbl">Budget range</span>
                <input value={draft.budgetRange} onChange={(e) => update('budgetRange', e.target.value)} placeholder="e.g. $20–30k"/>
              </div>
              <div className="detail-field" style={{ gridColumn: '1 / -1' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
                  <input
                    type="checkbox"
                    checked={draft.onsiteVisitDone}
                    onChange={(e) => update('onsiteVisitDone', e.target.checked)}
                    style={{ margin: 0 }}
                  />
                  Onsite visit completed
                </label>
              </div>
            </div>
          </div>

          <div className="detail-section">
            <h4>Notes</h4>
            <textarea
              placeholder="How did they find us, what they want, next action…"
              value={draft.notes}
              onChange={(e) => update('notes', e.target.value)}
              rows="3"
              style={{
                width: '100%',
                padding: '10px 12px',
                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"
            style={{ marginLeft: 'auto', opacity: !valid ? 0.5 : 1, cursor: !valid ? 'not-allowed' : 'pointer' }}
            disabled={!valid}
            onClick={submit}
          >
            <Icon name="plus" size={12}/> Create lead
          </button>
        </div>
      </div>
    </div>
  );
}

window.NewDealModal = NewDealModal;