// ============================================================
// FRAGTA — External demo (demo.fragta.com)
//   • lead-capture onboarding (navn, firma, mail)
//   • generic/anonymous instance
//   • guided tour (per-screen tips, skippable)
//   • Frida chat assistant
// Reuses all the same screens as the internal sales demo.
// ============================================================

const TRY_NAV = [
  { id: 'dashboard', label: 'Overblik', ico: 'grid' },
  { id: 'pipeline',  label: 'Indbakke', ico: 'inbox' },
  { id: 'tender',    label: 'Tender',   ico: 'catalog', beta: true },
  { id: 'katalog',   label: 'Katalog',  ico: 'catalog' },
  { id: 'prospects', label: 'Prospects',ico: 'network' },
];

const LEAD_KEY = 'fragta-try-lead-v1';
const TOUR_KEY = 'fragta-try-tour-done-v1';

// ---------- LOADING SKELETON (shared with internal app) ---------------------
function LoadingView({ screen, detail }) {
  const rows = detail ? 3 : 6;
  return (
    <div className="page">
      <div className="wrap">
        <div className="sk-stat" style={{ marginBottom: 18, display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 1, padding: 0, border: 'none' }}>
          {[0,1,2,3,4].map(i => <div className="sk-stat" key={i}><div className="sk-bar w40"></div><div className="sk-bar sm w80"></div></div>)}
        </div>
        <div className="skeleton" style={{ border: '1px solid var(--border)' }}>
          {Array.from({ length: rows }).map((_, i) => (
            <div className="sk-row" key={i}>
              <span className="sk-dot"></span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}><div className="sk-bar w60"></div><div className="sk-bar sm w40"></div></div>
              <div className="sk-bar sm"></div>
              <div className="sk-bar sm w60"></div>
              <div className="sk-bar sm w80"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- LEAD CAPTURE ----------------------------------------------------
function TryCarousel() {
  const slides = [
    { tag: 'Indbakke', t: 'Mails læses automatisk', b: 'Rute, gods og krav trækkes ud — også på flere sprog.', ico: 'inbox' },
    { tag: 'AI-analyse', t: 'Behovet forstået på sekunder', b: 'Struktureret forespørgsel klar, uden manuelt arbejde.', ico: 'spark' },
    { tag: 'Match', t: 'De rigtige vognmænd', b: 'Scoret mod jeres katalog efter rute, pris og erfaring.', ico: 'network' },
    { tag: 'Tilbud', t: 'Svar til kunden, klar', b: 'Tilbuddene samlet ét sted — I godkender før afsendelse.', ico: 'send' },
  ];
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % slides.length), 3600);
    return () => clearInterval(t);
  }, []);
  const s = slides[i];
  return (
    <div className="try-carousel">
      <div className="tc-card" key={i}>
        <span className="tc-ico"><Icon n={s.ico} /></span>
        <div className="tc-body">
          <span className="tc-tag">{s.tag}</span>
          <div className="tc-t">{s.t}</div>
          <div className="tc-b">{s.b}</div>
        </div>
      </div>
      <div className="tc-dots">
        {slides.map((_, x) => <button key={x} className={'tc-dot' + (x === i ? ' on' : '')} onClick={() => setI(x)} aria-label={'Slide ' + (x + 1)}></button>)}
      </div>
    </div>
  );
}

function LeadCapture({ onDone }) {
  const [f, setF] = useState({ name: '', company: '', email: '' });
  const [touched, setTouched] = useState(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email);
  const valid = f.name.trim() && emailOk;
  const submit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;
    try { localStorage.setItem(LEAD_KEY, JSON.stringify({ ...f, at: new Date().toISOString() })); } catch (er) {}
    // Send lead to backend relay (functions/api/lead.js) → Fragta admin-modul.
    // Fire-and-forget: never block access on a backend hiccup.
    try {
      fetch('/api/lead', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({
          name: (f.name || '').trim(),
          company: (f.company || '').trim(),
          email: (f.email || '').trim(),
          source: 'demo.fragta.com',
          referrer: document.referrer || '',
          userAgent: navigator.userAgent || '',
        }),
        keepalive: true,
      }).catch(function () {});
    } catch (er2) {}
    onDone(f);
  };
  return (
    <div className="login-screen try-login">
      <div className="login-aside">
        <div className="la-grid"></div>
        <div className="la-glow"></div>
        <div className="brand"><BrandMark /><span className="brand-name">Fragta</span></div>
        <div className="la-q">Prøv Fragta <span className="g">på 2 minutter.</span></div>
        <TryCarousel />
        <div className="la-foot">
          {[['10', 'Forespørgsler klar'], ['8', 'Vognmænd i katalog'], ['100%', 'Klikbart'], ].map(([n, l], i) => (
            <div key={i}><div className="lf-n">{n}</div><div className="lf-l">{l}</div></div>
          ))}
        </div>
      </div>

      <div className="login-main">
        <form className="login-card" onSubmit={submit}>
          <div className="lc-brand"><BrandMark /><span className="brand-name" style={{ fontSize: 19 }}>Fragta</span><span className="beta-pill sm" style={{ marginLeft: 2 }}>Demo</span></div>
          <div>
            <div className="lc-ey">Gratis demo</div>
            <h1>Prøv systemet selv</h1>
            <p className="lc-sub" style={{ marginTop: 8 }}>Fortæl os kort hvem du er, så åbner vi demoen. Vi bruger det kun til at følge op — ingen spam.</p>
          </div>
          <div className="field">
            <label>Navn *</label>
            <input placeholder="Dit navn" value={f.name} onChange={e => set('name', e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label>Firma</label>
            <input placeholder="Virksomhed (valgfrit)" value={f.company} onChange={e => set('company', e.target.value)} />
          </div>
          <div className="field">
            <label>Arbejds-mail *</label>
            <input type="email" placeholder="dig@firma.dk" value={f.email} onChange={e => set('email', e.target.value)} className={touched && !emailOk ? 'inp-err' : ''} />
            {touched && !valid && <span className="hint" style={{ color: 'var(--danger)' }}>Udfyld navn og en gyldig mail.</span>}
          </div>
          <button className="btn btn-primary btn-arrow" type="submit" style={{ width: '100%', padding: '13px' }}>Åbn demoen</button>
          <p className="lc-fine">Ved at fortsætte accepterer du, at Fragta må kontakte dig om demoen. Se vores <a href="#" onClick={e => e.preventDefault()}>privatlivspolitik</a>.</p>
        </form>
      </div>
    </div>
  );
}

// ---------- GUIDED TOUR -----------------------------------------------------
const TOUR_REQ = 'NR-44823';
const TOUR_STEPS = [
  { screen: 'dashboard', title: 'Overblik', body: 'Din forside. Her ser du status på alle forespørgsler, travleste ruter, dit vognmandskatalog og den seneste aktivitet — alt sammen live. Det giver disponenten ro i maven før der dykkes ned.' },
  { screen: 'pipeline', title: 'Indbakken', body: 'Hjertet i Fragta. Indkommende mails læses automatisk, og rute, gods og krav trækkes ud. Statusfarven viser hvor langt hver forespørgsel er. Lad os åbne én og følge den hele vejen.' },
  { screen: 'pipeline', req: TOUR_REQ, title: '1 · Forespørgsel & AI-analyse', body: 'Til venstre ser du den originale mail — til højre har Fragta automatisk trukket rute, gods, vægt og krav ud med sikkerheds-score. Du kan rette felterne eller køre analysen igen.' },
  { screen: 'pipeline', req: TOUR_REQ, title: '2 · Match & send', body: 'Klik “Match vognmænd”. Fragta scorer hver vognmand i kataloget mod ruten, godset og jeres erfaringer — og foreslår de bedste. I godkender, og forespørgslen sendes i jeres navn.' },
  { screen: 'pipeline', req: TOUR_REQ, title: '3 · Tilbud & valg', body: 'Efterhånden som svarene kommer ind, samles de her — rangeret som guld, sølv og bronze med begrundelse. Vælg det bedste, og send svaret til kunden direkte fra Fragta.' },
  { screen: 'tender', title: 'Tender (Beta)', body: 'Større udbud med mange ruter på én gang. Upload et Excel/CSV, og Fragta laver det om til et arbejdsområde hvor hver rute kan prissættes og besvares samlet.' },
  { screen: 'katalog', title: 'Kataloget', body: 'Alle jeres vognmænd ét sted — med service, ruter, pålidelighed og papirer (CMR, forsikring, ADR). Fragta matcher hver forespørgsel mod netop dette katalog.' },
  { screen: 'prospects', title: 'Prospects', body: 'Nye vognmænd Fragta har mødt i indkommende mails, men som endnu ikke er i kataloget. Gennemse deres oplysninger og godkend dem ind i netværket med ét klik.' },
];
function TourTip({ step, idx, total, onNext, onPrev, onSkip }) {
  if (!step) return null;
  const t = step;
  return (
    <div className="tour-wrap">
      <div className="tour-card">
        <div className="tour-head">
          <span className="tour-step">Tip {idx + 1} af {total}</span>
          <button className="tour-x" onClick={onSkip} title="Spring over"><Icon n="x" /></button>
        </div>
        <div className="tour-title"><span className="tt-spark"><Icon n="spark" /></span>{t.title}</div>
        <p className="tour-body">{t.body}</p>
        <div className="tour-foot">
          <button className="tour-skip" onClick={onSkip}>Spring guiden over</button>
          <div className="tour-nav">
            {idx > 0 && <button className="btn btn-ghost btn-sm" onClick={onPrev}>Tilbage</button>}
            <button className="btn btn-primary btn-sm" onClick={onNext}>{idx + 1 === total ? 'Afslut' : 'Næste'} <Icon n="chevR" /></button>
          </div>
        </div>
        <div className="tour-dots">
          {Array.from({ length: total }).map((_, i) => <span key={i} className={'td' + (i === idx ? ' on' : '')}></span>)}
        </div>
      </div>
    </div>
  );
}

// ---------- FRIDA CHAT — flyttet til delt fragta-frida.jsx (samme avatar overalt) ----------
// <Frida/> kommer fra window via fragta-frida.jsx, som loades før denne fil.

// ---------- TOPNAV (external, no Demo/Admin) --------------------------------
function TryTopNav({ route, go, onRestart, theme, onThemeToggle }) {
  const reqs = useLiveRequests();
  const newCount = reqs.filter(r => r.status === 'new').length;
  const prospectCount = useLiveProspects().length;
  return (
    <div className="topnav">
      <div className="brand"><BrandMark /><span className="brand-name">Fragta</span><span className="beta-pill sm" style={{ marginLeft: 2 }}>Demo</span></div>
      <div className="nav-links">
        {TRY_NAV.map(n => (
          <a key={n.id} className={'nav-link' + (route.screen === n.id ? ' on' : '')} onClick={() => go(n.id)}>
            <Icon n={n.ico} /> {n.label}
            {n.beta ? <span className="beta-pill sm">Beta</span> : null}
            {n.id === 'pipeline' && newCount > 0 ? <span className="nav-count">{newCount}</span> : null}
            {n.id === 'prospects' && prospectCount > 0 ? <span className="nav-count">{prospectCount}</span> : null}
          </a>
        ))}
      </div>
      <div className="nav-spacer"></div>
      <div className="nav-right">
        <a className="btn btn-primary btn-sm" href="https://fragta.com" target="_blank" rel="noopener">Book rigtig demo</a>
        <button className="icon-btn" title={theme === 'light' ? 'Mørk tilstand' : 'Lys tilstand'} onClick={onThemeToggle}><Icon n={theme === 'light' ? 'moon' : 'sun'} /></button>
        <button className="icon-btn" title="Start forfra" onClick={onRestart}><Icon n="refresh" /></button>
      </div>
    </div>
  );
}

// ---------- ROOT ------------------------------------------------------------
function TryApp() {
  const [t, setTweak] = useTweaks({ theme: 'light', density: 'default', font: 'geist' });
  const [stage, setStage] = useState('lead'); // lead | app
  const [route, setRoute] = useState({ screen: 'dashboard', id: null });
  const [loading, setLoading] = useState(false);
  const [tourOn, setTourOn] = useState(false);
  const [tourIdx, setTourIdx] = useState(0);
  const goStep = (i, instant) => {
    const s = TOUR_STEPS[i];
    setTourIdx(i);
    setRoute({ screen: s.screen, id: s.req || null });
    window.scrollTo(0, 0);
    // Første trin (efter onboarding) er allerede på dashboardet — undlad
    // loading-skelettet, så det ikke ser ud som om demoen loader to gange.
    if (instant) { setLoading(false); clearTimeout(window.__navTimer); return; }
    setLoading(true);
    clearTimeout(window.__navTimer);
    window.__navTimer = setTimeout(() => setLoading(false), 320);
  };

  useEffect(() => {
    const accent = '#00FF94';
    document.documentElement.style.setProperty('--accent', accent);
    document.documentElement.style.setProperty('--accent-ink', '#06130c');
    document.documentElement.style.setProperty('--accent-deep', t.theme === 'light' ? '#0a8f54' : accent);
    document.body.classList.toggle('theme-deep', t.theme === 'deep');
  }, [t.theme]);

  // generic anonymous instance
  useEffect(() => {
    setDemo({ workspace: 'Demo Spedition', logo: null, accent: '#00FF94', contactName: 'Demo Bruger', contactUser: 'demo', tagline: 'Prøv Fragta — demo-miljø.' });
  }, []);

  const go = (screen, id = null, filter = null) => {
    setLoading(true);
    setRoute({ screen, id, filter });
    window.scrollTo(0, 0);
    clearTimeout(window.__navTimer);
    window.__navTimer = setTimeout(() => setLoading(false), 320);
    if (tourOn) setTourOn(false); // free navigation ends the guided tour
  };

  const startTour = () => { setTourOn(true); goStep(0, true); };
  const tourNext = () => { if (tourIdx + 1 >= TOUR_STEPS.length) { endTour(); } else { goStep(tourIdx + 1); } };
  const tourPrev = () => { if (tourIdx > 0) goStep(tourIdx - 1); };
  const endTour = () => { setTourOn(false); try { localStorage.setItem(TOUR_KEY, '1'); } catch (e) {} };

  const enter = (lead) => {
    if (lead && lead.name) setDemo({ contactName: lead.name.trim(), workspace: (lead.company || '').trim() || 'Demo Spedition' });
    setStage('app');
    setRoute({ screen: 'dashboard', id: null });
    setTimeout(startTour, 550);
  };

  if (stage === 'lead') return <LeadCapture onDone={enter} />;

  let view = null;
  if (route.screen === 'dashboard') view = <Dashboard go={go} />;
  else if (route.screen === 'pipeline') view = route.id
    ? <RequestDetail id={route.id} onBack={() => go('pipeline')} />
    : <Pipeline onOpen={id => go('pipeline', id)} initialFilter={route.filter} />;
  else if (route.screen === 'katalog') view = route.id
    ? <CompanyDetail id={route.id} onBack={() => go('katalog')} onEdit={() => {}} />
    : <Katalog onOpen={id => go('katalog', id)} onAdd={() => {}} />;
  else if (route.screen === 'prospects') view = <Prospects />;
  else if (route.screen === 'tender') view = <Tender />;

  return (
    <div className="app">
      <TryTopNav route={route} go={go} theme={t.theme}
        onThemeToggle={() => setTweak('theme', t.theme === 'light' ? 'deep' : 'light')}
        onRestart={() => { try { localStorage.removeItem(TOUR_KEY); } catch (e) {} setStage('lead'); }} />
      <div className="main">{loading ? <LoadingView screen={route.screen} detail={!!route.id} /> : view}</div>
      {!tourOn && stage === 'app' && (
        <button className="tour-replay" onClick={startTour} title="Vis rundvisning"><Icon n="spark" /> Rundvisning</button>
      )}
      {tourOn && <TourTip step={TOUR_STEPS[tourIdx]} idx={tourIdx} total={TOUR_STEPS.length} onNext={tourNext} onPrev={tourPrev} onSkip={endTour} />}
      <Frida />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TryApp />);