// Ny offert — i två steg: först kund, sedan mall.
//
// Tidigare skapades offerten först och kunden skrevs in efteråt i ett
// fritextfält, medan autosparet lyssnade. Det gjorde att varje paus i
// skrivandet blev en ny kund i registret ("lars te", "lars textil"...). Nu
// finns ingen offert förrän kunden är vald, och en kund är antingen en
// befintlig ur registret eller en ny som slagits upp i bolagsregistret.
//
// Samma nodDialog används för att byta kund på en befintlig offert (bara steg 1).
//
// onSkapa({ kund: { befintlig } | { ny }, mall, fromLatest })
// onBytKund({ befintlig } | { ny })

function NewOfferDialog({ open, lage, kund: forvaldKund, customers, onClose, onSkapa, onBytKund }) {
  const [steg, setSteg] = React.useState(1);
  const [kund, setKund] = React.useState(null);   // { befintlig } | { ny }
  const [busy, setBusy] = React.useState(false);
  const [fel, setFel] = React.useState('');

  React.useEffect(() => {
    if (!open) return;
    setFel(''); setBusy(false);
    if (forvaldKund) { setKund({ befintlig: forvaldKund }); setSteg(2); }
    else { setKund(null); setSteg(1); }
  }, [open, forvaldKund]);

  React.useEffect(() => {
    if (!open) return;
    const t = (e) => {
      if (e.key !== 'Escape') return;
      // Kundväljarens egen lista fångar Esc först (stopPropagation) — hit
      // kommer vi bara när listan är stängd.
      e.stopPropagation();
      if (steg === 2 && !forvaldKund) { setSteg(1); setKund(null); } else onClose();
    };
    window.addEventListener('keydown', t, true);
    return () => window.removeEventListener('keydown', t, true);
  }, [open, steg, forvaldKund, onClose]);

  if (!open) return null;

  const valdKund = (v) => {
    setKund(v);
    if (lage === 'byt') { onBytKund(v); return; }
    setSteg(2);
  };

  const skapa = async (mall, fromLatest) => {
    if (busy || !kund) return;
    setBusy(true); setFel('');
    try { await onSkapa({ kund, mall, fromLatest }); }
    catch (e) { setFel(e.message || 'Kunde inte skapa offerten.'); setBusy(false); }
  };

  const namn = kund ? (kund.befintlig ? kund.befintlig.name : kund.ny.name) : '';
  const befintlig = kund && kund.befintlig;
  // Kunden kan komma från kundlistan (antal_offerter) eller från kundkortet
  // (offerter[]) — båda ska ge knappen "Utgå från senaste".
  const senasteNr = befintlig && ((befintlig.offerter && befintlig.offerter[0] && befintlig.offerter[0].number) || befintlig.senaste_nummer || '');
  const harOfferter = befintlig && (Number(befintlig.antal_offerter) > 0 || (befintlig.offerter || []).length > 0);

  return (
    <div onClick={onClose} style={nodOverlay}>
      <div role="dialog" aria-modal="true" aria-label={lage === 'byt' ? 'Byt kund' : 'Ny offert'} onClick={e => e.stopPropagation()}
           style={steg === 1 ? nodDialog : { ...nodDialog, maxHeight: '88vh' }}>
        <div style={nodHuvud}>
          <div>
            <div style={nodEyebrow}>{lage === 'byt' ? 'Byt kund' : 'Ny offert'}{lage !== 'byt' && <span style={{ marginLeft: 10, color: 'var(--fg-subtle)', letterSpacing: 0, textTransform: 'none', fontWeight: 500 }}>steg {steg} av 2</span>}</div>
            <h2 style={nodRubrik}>{steg === 1 ? (lage === 'byt' ? 'Vem ska offerten gå till istället?' : 'Vem är offerten till?') : 'Vad ska offerten handla om?'}</h2>
            {steg === 2 && (
              <p style={{ margin: '6px 0 0', fontSize: 14, color: 'var(--fg-muted)' }}>
                Till <b style={{ color: 'var(--ulab-navy)' }}>{namn}</b>
                {kund.ny && <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: '#8a5a12', background: '#fff7ed', border: '1px solid #f0b866', borderRadius: 999, padding: '1px 7px', verticalAlign: 'middle' }}>ny kund</span>}
                {!forvaldKund && <button type="button" onClick={() => { setSteg(1); setKund(null); }} style={nodLank}>Byt</button>}
                {' — '}välj en utgångspunkt för texten. Produkter lägger du till från katalogen efteråt.
              </p>
            )}
          </div>
          <button onClick={onClose} aria-label="Stäng" style={nodStang}><Icon name="close" size={22}/></button>
        </div>

        {/* Steg 1 får aldrig overflow:auto — kundlistan ritas som en absolut
            panel under sökfältet, och en ruta med overflow:auto klipper den.
            Minimihöjden gör att dialogen reserverar plats för listan istället
            för att krympa till sökfältets höjd och kapa den. */}
        <div style={steg === 1 ? nodKropp1 : nodKropp2}>
          {steg === 1 && <KundVal customers={customers} onValt={valdKund} />}

          {steg === 2 && (
            <div>
              {fel && <div role="alert" style={nodFelRuta}>{fel}</div>}
              {harOfferter && (
                <button type="button" disabled={busy} onClick={() => skapa(null, true)} style={{ ...nodMallKnapp, borderColor: 'var(--ulab-navy)', background: 'var(--ulab-cream)', marginBottom: 14, width: '100%' }}>
                  <div style={nodIkonRund}><Icon name="duplicate" size={22} stroke="var(--ulab-navy)"/></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ulab-navy)', marginBottom: 4 }}>Utgå från kundens senaste offert</div>
                    <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5 }}>
                      Kopierar texter och rader från {senasteNr ? 'offert ' + senasteNr : 'den senaste offerten'} till {namn}. Priserna följer med som de var — kontrollera dem.
                    </div>
                  </div>
                </button>
              )}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 14 }}>
                {(window.TEMPLATES || []).map(t => (
                  <button key={t.id} type="button" disabled={busy} onClick={() => skapa(t, false)} style={nodMallKnapp}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--ulab-navy)'; e.currentTarget.style.background = 'var(--ulab-cream)'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.background = '#fff'; }}>
                    <div style={nodIkonRund}><Icon name={t.icon} size={22} stroke="var(--ulab-navy)"/></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ulab-navy)', marginBottom: 4 }}>{t.name}</div>
                      <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{t.blurb}</div>
                    </div>
                  </button>
                ))}
              </div>
              {busy && <div style={{ marginTop: 14, fontSize: 13, color: 'var(--fg-muted)' }}>Skapar offerten…</div>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Overlayen scrollar (steg 1 har ingen maxhöjd — blir uppslaget långt växer
// rutan i stället för att klippa det). margin:auto håller den centrerad även
// när den är högre än fönstret, vilket alignItems:center inte klarar.
const nodOverlay = { position: 'fixed', inset: 0, background: 'rgba(0,54,95,.32)', zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, overflowY: 'auto' };
const nodDialog = { width: 'min(960px, 100%)', margin: 'auto', flex: 'none', background: '#fff', borderRadius: 8, boxShadow: 'var(--shadow-modal)', display: 'flex', flexDirection: 'column', overflow: 'visible', fontFamily: 'var(--font-sans)' };
// Minimihöjden följer kundlistans höjd (samma min(316px, 34vh) som i
// CustomerPicker) plus sökfält, panelhuvud och panelfot — så hamnar hela
// listan innanför den vita rutan i stället för att hänga ut under den.
const nodKropp1 = { padding: 24, overflow: 'visible', minHeight: 'calc(min(316px, 34vh) + 116px)' };
const nodKropp2 = { padding: 24, overflow: 'auto' };
const nodHuvud = { padding: '22px 28px', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 };
const nodEyebrow = { fontSize: 11, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-muted)' };
const nodRubrik = { margin: '4px 0 0', fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 28, color: 'var(--ulab-navy)' };
const nodStang = { background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--ulab-navy)', width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 4, flex: 'none' };
const nodMallKnapp = { textAlign: 'left', background: '#fff', border: '1px solid var(--border)', borderRadius: 6, padding: 18, cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'flex-start', fontFamily: 'var(--font-sans)' };
const nodIkonRund = { width: 44, height: 44, borderRadius: '50%', background: 'var(--ulab-cream)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 };
const nodLank = { fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--ulab-blue)', background: 'transparent', border: 'none', padding: 0, marginLeft: 8, cursor: 'pointer', textDecoration: 'underline' };
const nodFelRuta = { background: '#fdf0ee', border: '1px solid #eab5ac', color: '#8a3b30', borderRadius: 4, padding: '9px 12px', fontSize: 12.5, marginBottom: 12 };

window.NewOfferDialog = NewOfferDialog;