// OBS: alla .jsx laddas som vanliga skript i samma globala scope, så
// toppnivå-konstanter måste ha unika namn (kv-prefix här). Ett `ruta` i två
// filer ger tyst fel stil, inte ett felmeddelande.
// KundVal — steget "vem är offerten till?"
//
// Används i dialogen Ny offert och när man byter kund på en befintlig offert.
// Man söker i kundregistret; finns kunden inte slås den upp i bolagsregistret
// (allabolag), med AI:n som reserv. Resultatet lämnas som antingen en
// befintlig kund eller uppgifterna för en ny — själva kunden skapas först när
// offerten skapas, aldrig av en halvskriven text.
//
// onValt({ befintlig: kund }) eller onValt({ ny: { name, org_nr, contact, email, phone } })

function KundVal({ customers = [], onValt, autofokus = true }) {
  const [aiPa, setAiPa] = React.useState(false);
  const [namn, setNamn] = React.useState('');
  const [slag, setSlag] = React.useState(null); // { laddar, namn, steg, resultat, kandidater, tomt, fel }

  React.useEffect(() => {
    api('/api/ai/status').then(s => setAiPa(!!s.configured)).catch(() => setAiPa(false));
  }, []);

  const slaUppRegister = async (n) => {
    n = String(n || '').trim();
    if (!n) return;
    setSlag({ laddar: true, namn: n, steg: 'register' });
    try {
      const r = await api('/api/foretag/sok', { method: 'POST', body: JSON.stringify({ name: n }) });
      if (r.exakt) setSlag({ laddar: false, namn: n, steg: 'register', resultat: r.exakt });
      else if (r.kandidater.length) setSlag({ laddar: false, namn: n, steg: 'register', kandidater: r.kandidater });
      else if (r.kanAi) slaUppAi(n);
      else setSlag({ laddar: false, namn: n, steg: 'register', tomt: true });
    } catch (e) {
      if (aiPa) slaUppAi(n);
      else setSlag({ laddar: false, namn: n, steg: 'register', fel: e.message || 'Kunde inte nå bolagsregistret.' });
    }
  };

  const slaUppAi = async (n, orgNr, bas) => {
    n = String(n || '').trim();
    if (!n || !aiPa) return;
    setSlag({ laddar: true, namn: n, steg: 'ai', resultat: bas || null });
    try {
      const r = await api('/api/ai/foretag', { method: 'POST', body: JSON.stringify({ name: n, orgNr: orgNr || '' }) });
      if (bas) {
        const ihop = { ...bas };
        for (const f of ['phone', 'email', 'website']) if (!ihop[f] && r[f]) ihop[f] = r[f];
        ihop.aiKallor = r.sources || []; ihop.aiNot = r.note || '';
        setSlag({ laddar: false, namn: n, steg: 'ai', resultat: ihop, kompletterad: true });
      } else {
        setSlag({ laddar: false, namn: n, steg: 'ai', resultat: r.found ? r : null, tomt: !r.found, aiNot: r.note, aiKallor: r.sources || [] });
      }
    } catch (e) {
      setSlag({ laddar: false, namn: n, steg: 'ai', resultat: bas || null, fel: e.message || 'AI-uppslaget misslyckades.' });
    }
  };

  const valjBefintlig = (k) => { setSlag(null); onValt({ befintlig: k }); };
  const anvandForslag = () => {
    const r = slag && slag.resultat;
    if (!r) return;
    onValt({ ny: {
      name: r.name || slag.namn, org_nr: r.org_nr || '',
      contact: r.contact && r.contact.name ? r.contact.name : '',
      email: r.email || '', phone: r.phone || '',
    } });
    setSlag(null);
  };
  // Hittades inget alls får man lägga upp kunden med bara namnet.
  const laggUppUtanUppgifter = () => { onValt({ ny: { name: slag.namn, org_nr: '', contact: '', email: '', phone: '' } }); setSlag(null); };

  return (
    <div>
      <CustomerPicker
        value={namn}
        customers={customers}
        onChange={setNamn}
        onPick={(match, nyttNamn) => { if (match) valjBefintlig(match); else slaUppRegister(nyttNamn || namn); }}
        autofokus={autofokus}
        placeholder="Sök kund, org.nr — eller skriv ett nytt företagsnamn…" />
      {slag && (
        <Forslag slag={slag} aiPa={aiPa}
          onAnvand={anvandForslag}
          onUtan={laggUppUtanUppgifter}
          onStang={() => setSlag(null)}
          onIgen={() => slaUppRegister(slag.namn)}
          onAi={() => slaUppAi(slag.namn, slag.resultat && slag.resultat.org_nr, slag.resultat)}
          onValjKandidat={(k) => setSlag({ ...slag, kandidater: null, resultat: k })}
          onValjBefintlig={(b) => { const m = customers.find(c => c.id === b.id); if (m) valjBefintlig(m); }} />
      )}
      {!slag && (
        <div style={{ fontSize: 12.5, color: 'var(--fg-subtle)', marginTop: 10, lineHeight: 1.6 }}>
          Välj en kund i listan. Finns företaget inte: skriv hela namnet och välj <i>Lägg upp som ny kund</i> — då hämtas org.nr och adress från bolagsregistret.
        </div>
      )}
    </div>
  );
}

// Förslaget från uppslaget: vad som hittades, var det kommer ifrån, och vad
// som skulle läggas upp — innan något skapas.
function Forslag({ slag, aiPa, onAnvand, onUtan, onStang, onIgen, onAi, onValjKandidat, onValjBefintlig }) {
  const r = slag.resultat;
  const rad = (etikett, varde, bara) => varde ? (
    <div key={etikett} style={{ display: 'flex', gap: 10, fontSize: 13, padding: '4px 0', alignItems: 'baseline', flexWrap: 'wrap' }}>
      <span style={{ width: 84, flex: 'none', fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>{etikett}</span>
      <span style={{ color: 'var(--ulab-navy)' }}>{varde}</span>
      {bara && <span style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>visas bara — inget fält för det än</span>}
    </div>
  ) : null;
  const rubrik = slag.steg === 'ai' ? '✦ AI-uppslag' : 'Bolagsregistret';
  const saknarKontakt = r && !r.phone && !r.email;

  return (
    <div style={kvRuta}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ulab-navy)' }}>{rubrik} · {slag.namn}</span>
        <button type="button" onClick={onStang} aria-label="Stäng förslaget" style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--fg-muted)', fontSize: 18, lineHeight: 1, width: 28, height: 28 }}>×</button>
      </div>

      {slag.laddar && <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{slag.steg === 'ai' ? 'AI:n söker — tar oftast 10–20 sekunder…' : 'Slår upp i bolagsregistret…'}</div>}
      {slag.fel && <div role="alert" style={{ fontSize: 13, color: '#8a3b30' }}>{slag.fel} <button type="button" onClick={onIgen} style={kvLank}>Försök igen</button></div>}

      {!slag.laddar && slag.tomt && (
        <div style={{ fontSize: 13, color: 'var(--ulab-navy)' }}>
          {slag.steg === 'ai'
            ? <React.Fragment>Varken bolagsregistret eller AI:n hittade ”{slag.namn}”. {slag.aiNot}</React.Fragment>
            : <React.Fragment>Hittade inget bolag som heter ”{slag.namn}” i registret. Kontrollera stavningen.</React.Fragment>}
          <div style={{ marginTop: 8, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <button type="button" onClick={onUtan} style={kvPrimar}>Lägg upp ”{slag.namn}” ändå</button>
            <button type="button" onClick={onIgen} style={kvLank}>Sök igen</button>
            {slag.steg !== 'ai' && aiPa && <button type="button" onClick={onAi} style={kvLank}>Låt AI:n leta</button>}
          </div>
        </div>
      )}

      {!slag.laddar && slag.kandidater && (
        <div>
          <div style={{ fontSize: 13, color: 'var(--ulab-navy)', marginBottom: 8 }}>Ingen exakt träff på ”{slag.namn}”. Är det något av de här?</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {slag.kandidater.map(k => (
              <button key={k.org_nr} type="button" onClick={() => onValjKandidat(k)} style={kvKandidat}>
                <span style={{ fontWeight: 600, color: 'var(--ulab-navy)' }}>{k.name}</span>
                <span style={{ color: 'var(--fg-muted)', fontSize: 12 }}>{k.org_nr}{k.city ? ' · ' + k.city : ''}{k.befintlig ? ' · finns redan i registret' : ''}</span>
              </button>
            ))}
          </div>
          <div style={{ marginTop: 8, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button type="button" onClick={onUtan} style={kvLank}>Inget av dem — lägg upp ”{slag.namn}” ändå</button>
            <button type="button" onClick={onIgen} style={kvLank}>Sök igen</button>
            {aiPa && <button type="button" onClick={onAi} style={kvLank}>Låt AI:n leta</button>}
          </div>
        </div>
      )}

      {!slag.laddar && r && (
        <div>
          {r.befintlig && (
            <div style={{ background: '#fff7ed', border: '1px solid #f0b866', color: '#8a5a12', borderRadius: 4, padding: '8px 11px', fontSize: 12.5, marginBottom: 10 }}>
              Org.nr {r.org_nr} finns redan i registret som <b>{r.befintlig.name}</b> — troligen samma kund.
              <button type="button" onClick={() => onValjBefintlig(r.befintlig)} style={{ ...kvLank, marginLeft: 8 }}>Använd den kunden istället</button>
            </div>
          )}
          {rad('Företag', r.name)}
          {rad('Org.nr', r.org_nr)}
          {rad('Telefon', r.phone)}
          {rad('E-post', r.email)}
          {rad('Kontakt', r.contact && r.contact.name ? r.contact.name + (r.contact.role ? ' (' + r.contact.role.toLowerCase() + ')' : '') : '')}
          {rad('Adress', [r.address, [r.postal_code, r.city].filter(Boolean).join(' ')].filter(Boolean).join(', '), true)}
          {rad('Webb', r.website, true)}
          {!r.org_nr && <div style={{ fontSize: 12.5, color: '#8a5a12', marginTop: 4 }}>Inget säkert org.nr hittades — fyll i det på kundkortet efteråt.</div>}
          {saknarKontakt && !slag.kompletterad && (
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 4 }}>
              Registret har inga kontaktuppgifter för bolaget.
              {aiPa && <React.Fragment> <button type="button" onClick={onAi} style={kvLank}>Låt AI:n leta efter telefon och e-post</button></React.Fragment>}
            </div>
          )}
          {slag.kompletterad && saknarKontakt && <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 4 }}>AI:n hittade inga kontaktuppgifter heller.</div>}
          {(r.note || r.aiNot || slag.aiNot) && <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 6, fontStyle: 'italic' }}>{r.note || r.aiNot || slag.aiNot}</div>}
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginTop: 10 }}>
            <button type="button" onClick={onAnvand} style={kvPrimar}>{r.befintlig ? 'Lägg upp som ny kund ändå' : 'Lägg upp kunden'}</button>
            <button type="button" onClick={onIgen} style={kvLank}>Sök igen</button>
            {r.confidence && <span style={{ fontSize: 11.5, color: { 'hög': '#2b7d70', 'medel': '#8a5a12', 'låg': '#8a3b30' }[r.confidence] || 'var(--fg-muted)' }}>Säkerhet: {r.confidence}</span>}
            <span style={{ fontSize: 11.5, color: 'var(--fg-subtle)' }}>
              Källa: {r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ulab-blue)' }}>allabolag.se</a> : (r.kalla || 'AI-sökning')}
              {(r.aiKallor || slag.aiKallor || r.sources || []).slice(0, 3).map((k) => (
                <React.Fragment key={k.url}>, <a href={k.url} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ulab-blue)' }}>{kortDoman(k.url)}</a></React.Fragment>
              ))}
            </span>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--fg-subtle)', marginTop: 8 }}>
            {slag.steg === 'ai' ? 'Kontrollera uppgifterna innan offerten går ut — AI:n kan ha hittat fel bolag med liknande namn.' : 'Uppgifterna kommer från bolagsregistret. Kontakt är den styrelseledamot registret listar — byt på offerten om den ska till någon annan.'}
          </div>
        </div>
      )}
    </div>
  );
}

function kortDoman(url) { try { return new URL(url).hostname.replace(/^www\./, ''); } catch (e) { return url; } }
const kvRuta = { marginTop: 10, border: '1px solid #cfe0ee', background: '#f3f8fc', borderRadius: 6, padding: '12px 14px' };
const kvKandidat = { display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline', width: '100%', textAlign: 'left', background: '#fff', border: '1px solid #cfe0ee', borderRadius: 4, padding: '8px 11px', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13 };
const kvPrimar = { fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, color: '#fff', background: 'var(--ulab-navy)', border: '1px solid var(--ulab-navy)', borderRadius: 4, padding: '7px 12px', cursor: 'pointer' };
const kvLank = { fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, color: 'var(--ulab-blue)', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', textDecoration: 'underline' };

window.KundVal = KundVal;