// "Klar att skicka?" — kontrollen som körs innan en offert går till kund.
//
// Det fanns tidigare ingenting som hindrade en halvfärdig offert från att
// skrivas ut och mejlas: saknades giltighetsdatum stod det bara "—" på
// försättsbladet, saknades ämne fick kunden ULAB:s generiska slogan som scRubrik,
// och en rad utan pris räknades som 0 kr. Allt underlag fanns redan i
// programmet — det var bara aldrig samlat på ett ställe.
//
// Knappen "Skicka offert" öppnar den här rutan. Den skickar INGET mejl själv
// (det är ett medvetet val — inget mejl lämnar verktyget utan att du gjort det
// från din egen e‑post); den sammanfattar vad som saknas, markerar offerten som
// skickad och sätter ett bevakningsdatum.

function granskaOffert(offer, sheetStatus) {
  const stopp = [];
  const varning = [];
  const t = (v) => String(v || '').trim();

  if (!t(offer.customer)) stopp.push('Kundens företagsnamn saknas.');
  if (!t(offer.subject)) stopp.push('Offertens ämne saknas — det blir rubriken på försättsbladet.');
  if (!t(offer.valid)) stopp.push('Giltig t.o.m. saknas — dokumentet visar bara ett streck.');

  const lines = offer.lines || [];
  const services = offer.services || [];
  if (!lines.length && !services.length) stopp.push('Offerten har inga rader alls.');

  // Finansierat: det är månadspriset (från finansiären) som ska finnas på varje
  // rad — köppriset visas inte i dokumentet. Kontant: köppriset. Båda: båda.
  const lage = offer.pricingMode || 'kontant';
  const namnLista = (r) => r.map(l => l.name || 'namnlös rad').slice(0, 3).join(', ') + (r.length > 3 ? '…' : '');
  const utanPris = [...(lage === 'hyra' ? [] : lines), ...services].filter(l => l.price == null);
  if (utanPris.length) stopp.push(`${utanPris.length} rad(er) saknar pris: ${namnLista(utanPris)}`);
  if (lage !== 'kontant') {
    const utanHyra = lines.filter(l => l.monthly == null || l.monthly === '');
    if (utanHyra.length) stopp.push(`${utanHyra.length} rad(er) saknar månadspris (kr/mån): ${namnLista(utanHyra)}`);
    const kopierade = lines.filter(l => l.monthlyFrom && l.monthly != null);
    if (kopierade.length) varning.push(`Månadspriserna på ${kopierade.length} rad(er) är kopierade från offert #${kopierade[0].monthlyFrom} — kontrollera dem mot finansiärens aktuella offert.`);
  }
  const utanNamn = [...lines, ...services].filter(l => !t(l.name));
  if (utanNamn.length) stopp.push(`${utanNamn.length} rad(er) saknar namn.`);

  if (!t(offer.contact)) varning.push('Ingen kontaktperson angiven.');
  if (!t(offer.email)) varning.push('Ingen e‑postadress till kunden — du behöver den för att skicka offerten.');
  if (lage !== 'kontant' && !(Number(offer.term) > 0)) {
    stopp.push('Avtalstid saknas — den står i offerten ("… kr/mån i 48 mån"). Fyll i rätt avtalstid under Pris & villkor.');
  }
  const saknarBlad = (offer.lines || []).filter(l => l.sheet && l.sku && sheetStatus && sheetStatus[l.sku] === false);
  if (saknarBlad.length) varning.push(`Produktblad saknas för ${saknarBlad.map(l => l.name || l.sku).join(', ')} — bilagan kommer inte med.`);
  const utkastBlad = (offer.lines || []).filter(l => l.sheet && l.sku && sheetStatus && sheetStatus[l.sku] === 'utkast');
  if (utkastBlad.length) varning.push(`Produktbladet för ${utkastBlad.map(l => l.name || l.sku).join(', ')} är ett AI-utkast som ingen granskat.`);

  return { stopp, varning };
}

function SendCheck({ open, offer, onClose, onMarkSent }) {
  const [sheetStatus, setSheetStatus] = React.useState({});
  const [bevakning, setBevakning] = React.useState('');
  const rutaRef = React.useRef(null);

  React.useEffect(() => {
    if (!open || !offer) return;
    const skus = (offer.lines || []).filter(l => l.sheet && l.sku).map(l => l.sku).join(',');
    if (!skus) { setSheetStatus({}); return; }
    let avbruten = false;
    api(`/api/product-assets/lookup?skus=${encodeURIComponent(skus)}`)
      .then(rows => {
        if (avbruten) return;
        const m = {};
        for (const r of rows) m[r.sku] = (r.description || r.imageUrl) ? (r.status || 'granskad') : false;
        setSheetStatus(m);
      })
      .catch(() => {});
    return () => { avbruten = true; };
  }, [open, offer && offer.id]);

  React.useEffect(() => {
    if (!open) return;
    const om10 = new Date(Date.now() + 10 * 86400000);
    const pad = n => String(n).padStart(2, '0');
    setBevakning(offer && offer.followUpAt ? offer.followUpAt
      : `${om10.getFullYear()}-${pad(om10.getMonth() + 1)}-${pad(om10.getDate())}`);
    // Fokus in i rutan, annars ligger tangentbordet kvar bakom överlägget.
    setTimeout(() => { if (rutaRef.current) rutaRef.current.focus(); }, 30);
  }, [open, offer && offer.id]);

  if (!open || !offer) return null;
  const { stopp, varning } = granskaOffert(offer, sheetStatus);
  const klar = stopp.length === 0;

  return (
    <div onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }} style={scOverlay}>
      <div role="dialog" aria-modal="true" aria-label="Klar att skicka" tabIndex={-1} ref={rutaRef} style={scRuta}>
        <div style={{ padding: '22px 24px 16px', borderBottom: '1px solid var(--border)' }}>
          <div style={scEyebrow}>Innan du skickar</div>
          <h2 style={scRubrik}>{offer.number} · {offer.customer || 'Ingen kund angiven'}</h2>
        </div>

        <div style={{ padding: '18px 24px', maxHeight: '54vh', overflow: 'auto' }}>
          {stopp.length > 0 && (
            <div style={{ ...box, background: '#fdf0ee', borderColor: '#eab5ac' }}>
              <div style={{ ...boxRubrik, color: '#8a3b30' }}>Det här måste åtgärdas först</div>
              <ul style={lista}>{stopp.map((s, i) => <li key={i} style={{ marginBottom: 4 }}>{s}</li>)}</ul>
            </div>
          )}
          {varning.length > 0 && (
            <div style={{ ...box, background: '#fff7ed', borderColor: '#f0b866' }}>
              <div style={{ ...boxRubrik, color: '#8a5a12' }}>Värt att kolla</div>
              <ul style={lista}>{varning.map((s, i) => <li key={i} style={{ marginBottom: 4 }}>{s}</li>)}</ul>
            </div>
          )}
          {klar && varning.length === 0 && (
            <div style={{ ...box, background: '#eef7f4', borderColor: '#9fcfc1' }}>
              <div style={{ ...boxRubrik, color: '#2b7d70' }}>Offerten ser komplett ut</div>
              <div style={{ fontSize: 13 }}>Kund, ämne, giltighetstid och priser är ifyllda.</div>
            </div>
          )}

          <div style={{ marginTop: 18 }}>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--ulab-navy)', marginBottom: 6 }}>
              Bevaka svar den
            </label>
            <input type="date" value={bevakning} onChange={e => setBevakning(e.target.value)} style={{
              fontFamily: 'var(--font-sans)', fontSize: 14, padding: '9px 11px',
              border: '1px solid var(--border-strong)', borderRadius: 4, color: 'var(--ulab-navy)',
            }} />
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 6 }}>
              Offerten hamnar i <b>Att följa upp</b> tills den fått besked.
            </div>
          </div>

          <div style={{ marginTop: 18, fontSize: 12.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>
            Verktyget skickar inget mejl åt dig. Spara PDF:en och skicka den från din egen
            e‑post — då hamnar konversationen där kunden svarar.
          </div>
        </div>

        <div style={{ padding: '14px 24px 20px', borderTop: '1px solid var(--border)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <button onClick={() => onMarkSent(bevakning)} disabled={!klar} style={{
            ...scKnapp, background: klar ? 'var(--ulab-navy)' : 'var(--border-strong)',
            color: '#fff', cursor: klar ? 'pointer' : 'not-allowed',
          }}>Markera som skickad</button>
          <button onClick={onClose} style={{ ...scKnapp, background: '#fff', color: 'var(--ulab-navy)', border: '1px solid var(--border-strong)' }}>
            Tillbaka till offerten
          </button>
        </div>
      </div>
    </div>
  );
}

const scOverlay = {
  position: 'fixed', inset: 0, background: 'rgba(0,54,95,.32)', zIndex: 200,
  display: 'flex', justifyContent: 'center', alignItems: 'flex-start', padding: '8vh 16px 16px',
};
const scRuta = {
  background: '#fff', borderRadius: 8, width: '100%', maxWidth: 560,
  boxShadow: '0 24px 64px rgba(0,54,95,.3)', fontFamily: 'var(--font-sans)', color: 'var(--ulab-navy)',
};
const scEyebrow = { fontSize: 11, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-muted)' };
const scRubrik = { fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 22, margin: '6px 0 0' };
const box = { border: '1px solid', borderRadius: 5, padding: '12px 14px', marginBottom: 12 };
const boxRubrik = { fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 6 };
const lista = { margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.5 };
const scKnapp = {
  fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, padding: '10px 16px',
  borderRadius: 4, border: '1px solid transparent',
};

window.SendCheck = SendCheck;
window.granskaOffert = granskaOffert;