// Quiz: 5-step lead form for billigste a-kasse.dk
// Exposes: window.Quiz, window.ThankYou

const A_KASSER = [
  { name: '3F', price: 528 },
  { name: 'HK', price: 504 },
  { name: 'FOA', price: 519 },
  { name: 'Krifa', price: 532 },
  { name: 'Akademikernes', price: 555 },
  { name: 'Min A-kasse', price: 412 },
  { name: 'ASE', price: 489 },
  { name: 'Magistrenes', price: 561 },
  { name: 'BUPL-A', price: 542 },
  { name: 'Lærernes', price: 538 },
  { name: 'Ingen / ved ikke', price: 0 },
];

const BRANCHER = [
  'Kontor & administration',
  'Handel & service',
  'Bygge & anlæg',
  'Industri & produktion',
  'Sundhed & omsorg',
  'IT & kommunikation',
  'Undervisning',
  'Transport & logistik',
  'Hotel & restauration',
  'Selvstændig / freelance',
  'Studerende',
  'Andet',
];

const STEPS = [
  { id: 'job',     title: 'Er du i job lige nu?',       sub: 'Vi finder den bedste a-kasse til din situation.', label: 'Hurtigt spørgsmål' },
  { id: 'kontakt', title: 'Dine oplysninger',           sub: 'Vi indsamler ikke CPR på hjemmesiden.',            label: 'Sidste step ✨' },
];

const JOB_OPTIONS = [
  { value: 'job',      label: 'Ja, jeg er i arbejde' },
  { value: 'ledig',    label: 'Nej, jeg er ledig' },
  { value: 'studerer', label: 'Jeg studerer' },
];

const TICKER_MESSAGES = [
  'Mette fra Aarhus tog lige pristjekket',
  '127 har taget pristjekket i dag',
  'Jonas, 28, sparede 1.092 kr.',
  '3 personer er i gang lige nu',
  'Sara fra København skiftede netop',
  'Anders, 52, sparede 1.716 kr.',
];

/* ---------- Wave underline ---------- */
function Wavy({ children }) {
  return <span className="wavy">{children}</span>;
}

function CheckBadge() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="#00E5B8"/>
      <path d="M 7 12.5 L 10.5 16 L 17 9" stroke="#1F1057" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ---------- Step progress ---------- */
function Progress({ step, total, label }) {
  return (
    <div className="quiz-progress">
      <div className="quiz-progress__top">
        <div className="quiz-progress__label">{label}</div>
        <div className="quiz-progress__count">{step + 1} / {total}</div>
      </div>
      <div className="quiz-progress__bar">
        <div className="quiz-progress__fill" style={{ width: `${((step + 1) / total) * 100}%` }} />
      </div>
    </div>
  );
}

/* ---------- Live ticker ---------- */
function LiveTicker() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % TICKER_MESSAGES.length), 3200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="quiz-ticker">
      <span className="quiz-ticker__pulse" />
      <span className="quiz-ticker__msg" key={idx}>{TICKER_MESSAGES[idx]}</span>
    </div>
  );
}

/* ---------- Savings preview ---------- */
function SavingsPreview({ step, total, target }) {
  // grows from 0 to target as the user progresses through steps
  const pct = (step + 1) / total;
  const value = Math.round(target * pct / 100) * 100;
  return (
    <div className="quiz-saving">
      <div className="quiz-saving__label">Din mulige besparelse</div>
      <div className="quiz-saving__row">
        <div className="quiz-saving__value">
          <span className="quiz-saving__num" key={value}>{value.toLocaleString('da-DK')}</span>
          <span className="quiz-saving__unit">kr./år</span>
        </div>
        <div className="quiz-saving__bar">
          <div className="quiz-saving__bar-fill" style={{ width: `${pct * 100}%` }} />
        </div>
      </div>
    </div>
  );
}

/* ---------- Field building blocks ---------- */
function Select({ label, value, onChange, options, placeholder = 'Vælg', renderOption }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);
  return (
    <div className="field" ref={ref}>
      <label>{label}</label>
      <button
        type="button"
        className={`select-trigger${open ? ' is-open' : ''}${value ? ' has-value' : ''}`}
        onClick={() => setOpen(o => !o)}
      >
        <span>{value ? (renderOption ? renderOption(value) : value) : placeholder}</span>
        <svg width="14" height="14" viewBox="0 0 14 14" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
          <path d="M 3 5 L 7 9 L 11 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <div className="select-menu">
          {options.map(opt => {
            const v = typeof opt === 'string' ? opt : opt.value;
            const lbl = typeof opt === 'string' ? opt : opt.label;
            return (
              <button
                key={v}
                type="button"
                className={`select-option${v === value ? ' is-selected' : ''}`}
                onClick={() => { onChange(v); setOpen(false); }}
              >
                {lbl}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function TextInput({ label, value, onChange, placeholder, type = 'text', error, hint, autoFocus }) {
  return (
    <div className={`field${error ? ' has-error' : ''}`}>
      <label>{label}</label>
      <input
        className="text-input"
        type={type}
        value={value}
        autoFocus={autoFocus}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
      />
      {hint && !error && <div className="field-hint">{hint}</div>}
      {error && <div className="field-error">{error}</div>}
    </div>
  );
}

function CheckboxTile({ label, checked, onToggle }) {
  return (
    <button type="button" className={`checkbox-tile${checked ? ' is-checked' : ''}`} onClick={onToggle}>
      <span className="box" />
      <span>{label}</span>
    </button>
  );
}

/* ---------- Quiz component ---------- */
function Quiz({ onComplete, savingsAmount = 6000, embedded = false }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    job: '',
    navn: '',
    email: '',
    telefon: '',
    consent: false,
  });
  const [errors, setErrors] = React.useState({});

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

  const validate = () => {
    const e = {};
    if (step === 0 && !data.job) e.job = 'Vælg en mulighed';
    if (step === 1) {
      if (!data.navn.trim() || data.navn.trim().split(/\s+/).length < 2) e.navn = 'Indtast dit fulde navn';
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) e.email = 'Indtast en gyldig e-mail';
      if (!/^\+?[\d\s]{8,}$/.test(data.telefon)) e.telefon = 'Indtast et gyldigt telefonnummer';
      if (!data.consent) e.consent = 'Du skal acceptere for at modtage tilbud';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => {
    if (!validate()) return;
    if (step < STEPS.length - 1) setStep(s => s + 1);
    else {
      const yearly = savingsAmount;
      const monthly = Math.round(yearly / 12);
      const fornavn = (data.navn || '').trim().split(/\s+/)[0] || '';

      const jobLabel = { job: 'I arbejde', ledig: 'Ledig', studerer: 'Studerende' }[data.job] || data.job;

      // Google Sheets via Apps Script
      const SHEETS_URL = 'https://script.google.com/macros/s/AKfycbyPFPnWZzpFvuLpVipawNo0aEez7A1le639P0IZVuAREDXOD6M7SGZtVOP4mjW0LKo3/exec';
      if (SHEETS_URL !== 'INDSÆT_WEB_APP_URL_HER') {
        fetch(SHEETS_URL, {
          method: 'POST',
          mode: 'no-cors',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            tidspunkt:  new Date().toLocaleString('da-DK'),
            navn:       data.navn,
            email:      data.email,
            telefon:    data.telefon,
            job_status: jobLabel,
          }),
        }).catch(() => {});
      }

      emailjs.send('service_30fmr0s', 'template_rid8lms', {
        fra_navn:   data.navn,
        fra_email:  data.email,
        telefon:    data.telefon,
        job_status: jobLabel,
        message:    `Navn: ${data.navn}\nEmail: ${data.email}\nTelefon: ${data.telefon}\nStatus: ${jobLabel}`,
      }, { publicKey: 'E74gHhEHkfTUJgHYH' })
        .then(() => console.log('EmailJS: mail sendt'))
        .catch(err => console.error('EmailJS fejl:', JSON.stringify(err)));

      onComplete && onComplete({ ...data, fornavn, monthlySaving: monthly, yearlySaving: yearly });
    }
  };

  const back = () => setStep(s => Math.max(0, s - 1));
  const current = STEPS[step];

  return (
    <div className={`quiz-card${embedded ? ' is-embedded' : ''}`}>
      <div className="quiz-headline">
        <div className="quiz-headline__num">{savingsAmount.toLocaleString('da-DK')} kr.</div>
        <div className="quiz-headline__txt">
          <strong>Spar op til {savingsAmount.toLocaleString('da-DK')} kr. om året</strong>
          <span>ved skift til billigste a-kasse</span>
        </div>
      </div>
      <Progress step={step} total={STEPS.length} label={current.label} />

      <h3 className="quiz-title">{current.title}</h3>
      <p className="quiz-sub">{current.sub}</p>

      <div className="quiz-body" key={`step-${step}`}>
        {step === 0 && (
          <div>
            <div className="job-tiles">
              {JOB_OPTIONS.map(opt => (
                <button
                  key={opt.value}
                  type="button"
                  className={`job-tile${data.job === opt.value ? ' is-selected' : ''}`}
                  onClick={() => { update('job', opt.value); setStep(1); }}
                >
                  <span className="job-tile__dot" />
                  <span className="job-tile__label">{opt.label}</span>
                </button>
              ))}
            </div>
            {errors.job && <div className="field-error" style={{ marginTop: 12 }}>{errors.job}</div>}
          </div>
        )}

        {step === 1 && (
          <div className="stack">
            <TextInput label="Navn"    value={data.navn}    onChange={(v) => update('navn', v)}    placeholder="Fx Mette Jensen"   error={errors.navn}    autoFocus />
            <TextInput label="E-mail"  value={data.email}   onChange={(v) => update('email', v)}   placeholder="mette@eksempel.dk" type="email" error={errors.email} />
            <TextInput label="Telefon" value={data.telefon} onChange={(v) => update('telefon', v)} placeholder="+45 ··· ··· ··"   type="tel"   error={errors.telefon} />
            <label className={`consent${data.consent ? ' is-checked' : ''}${errors.consent ? ' has-error' : ''}`}>
              <input type="checkbox" checked={data.consent} onChange={(e) => update('consent', e.target.checked)} />
              <span className="consent__shield" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                  <path d="M 12 2 L 4 6 V 12 C 4 17 8 21 12 22 C 16 21 20 17 20 12 V 6 Z" stroke="currentColor" strokeWidth="2" fill="rgba(0,229,184,0.2)"/>
                  <path className="consent__check" d="M 8 12 L 11 15 L 16 9" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
              <span className="consent__txt">
                <strong>Ja tak, kontakt mig med tilbud.</strong>
                <span>Jeg accepterer at <b>billig-a-kasse.dk</b> og deres samarbejdspartnere må kontakte mig på telefon og e-mail. Kan trækkes tilbage når som helst.</span>
              </span>
              <span className="consent__indicator" aria-hidden="true">
                <span className="consent__indicator-dot"/>
              </span>
            </label>
            {errors.consent && <div className="field-error">{errors.consent}</div>}
          </div>
        )}
      </div>

      <div className="quiz-actions">
        {step > 0 ? (
          <button type="button" className="btn-back" onClick={back}>
            <svg width="16" height="16" viewBox="0 0 24 24"><path d="M 15 6 L 9 12 L 15 18" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Tilbage
          </button>
        ) : <span />}
        <button type="button" className="btn-next" onClick={next} style={step === 0 ? { display: 'none' } : {}}>
          {step === STEPS.length - 1 ? 'Få mit pristjek' : 'Næste'}
          <span className="btn-next__icon">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <circle cx="12" cy="12" r="10" fill="#1F1057"/>
              <path d="M 6 13.5 Q 8.5 9.5, 12 13.5 T 18 13.5" stroke="#00E5B8" strokeWidth="2" fill="none" strokeLinecap="round"/>
            </svg>
          </span>
        </button>
      </div>

      <div className="quiz-trust">
        <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M 12 2 L 4 6 V 12 C 4 17 8 21 12 22 C 16 21 20 17 20 12 V 6 Z" stroke="currentColor" strokeWidth="2" fill="rgba(0,229,184,0.15)"/></svg> Gratis & uforpligtende</span>
        <span>·</span>
        <span>GDPR-sikker</span>
      </div>
    </div>
  );
}

/* ---------- Thank-You screen with loading sequence ---------- */
const LOADING_STAGES = [
  { msg: 'Modtager din forespørgsel',     detail: 'Sikrer dine oplysninger' },
  { msg: 'Kontakter vores partnere',      detail: 'Vi spørger Danmarks førende a-kasser' },
  { msg: 'Indhenter de bedste tilbud',    detail: 'Sammenligner pris, dækning og service' },
  { msg: 'Finder den billigste til dig',  detail: 'Klargør dit personlige resultat' },
];

function LoadingExperience() {
  const [stage, setStage] = React.useState(0);
  const [offerCount, setOfferCount] = React.useState(0);
  const [activePartners, setActivePartners] = React.useState(0);

  React.useEffect(() => {
    const STAGE_MS = 1500;
    const timers = [];
    for (let i = 1; i < LOADING_STAGES.length; i++) {
      timers.push(setTimeout(() => setStage(i), STAGE_MS * i));
    }

    // Partners pop in one by one over ~3.5s
    const partnerIv = setInterval(() => {
      setActivePartners(p => {
        if (p >= 12) { clearInterval(partnerIv); return 12; }
        return p + 1;
      });
    }, 280);
    timers.push(() => clearInterval(partnerIv));

    // Offer count tick-up to 47 over ~4s
    let count = 0;
    const offerIv = setInterval(() => {
      count = Math.min(47, count + Math.max(1, Math.floor((47 - count) / 8)));
      setOfferCount(count);
      if (count >= 47) clearInterval(offerIv);
    }, 90);
    timers.push(() => clearInterval(offerIv));

    return () => timers.forEach(t => typeof t === 'function' ? t() : clearTimeout(t));
  }, []);

  // 12 partner positions on a circle
  const partners = Array.from({ length: 12 }, (_, i) => {
    const angle = (i / 12) * Math.PI * 2 - Math.PI / 2;
    return {
      x: 180 + Math.cos(angle) * 130,
      y: 180 + Math.sin(angle) * 130,
    };
  });

  const cur = LOADING_STAGES[stage];

  return (
    <div className="loading-exp">
      <div className="loading-exp__viz">
        <svg viewBox="0 0 360 360" width="100%" height="100%">
          <defs>
            <radialGradient id="centerGlow" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0" stopColor="#00E5B8" stopOpacity="0.5"/>
              <stop offset="1" stopColor="#00E5B8" stopOpacity="0"/>
            </radialGradient>
          </defs>

          {/* Pulse rings */}
          <circle cx="180" cy="180" r="40" fill="#00E5B8" opacity="0.15" className="pulse-ring"/>
          <circle cx="180" cy="180" r="40" fill="#00E5B8" opacity="0.15" className="pulse-ring pulse-ring--2"/>
          <circle cx="180" cy="180" r="40" fill="#00E5B8" opacity="0.15" className="pulse-ring pulse-ring--3"/>

          {/* Connecting lines */}
          {partners.map((p, i) => (
            <line
              key={'line-' + i}
              x1="180" y1="180"
              x2={p.x} y2={p.y}
              stroke="#00E5B8"
              strokeWidth="1.5"
              strokeDasharray="4 4"
              opacity={i < activePartners ? 0.55 : 0.08}
              className={i < activePartners ? 'line-active' : ''}
              style={{ transition: 'opacity .4s' }}
            />
          ))}

          {/* Partner dots */}
          {partners.map((p, i) => {
            const on = i < activePartners;
            return (
              <g
                key={'p-' + i}
                style={{
                  opacity: on ? 1 : 0.25,
                  transform: on ? 'scale(1)' : 'scale(0.7)',
                  transformOrigin: `${p.x}px ${p.y}px`,
                  transition: 'opacity .35s, transform .35s cubic-bezier(.5,1.5,.5,1)',
                }}
              >
                <circle cx={p.x} cy={p.y} r="20" fill={on ? '#00E5B8' : 'rgba(255,255,255,0.08)'} stroke={on ? '#00E5B8' : 'rgba(255,255,255,0.15)'} strokeWidth="2"/>
                {on && <circle cx={p.x} cy={p.y} r="8" fill="#1F1057"/>}
              </g>
            );
          })}

          {/* Center glow */}
          <circle cx="180" cy="180" r="60" fill="url(#centerGlow)"/>

          {/* Center node */}
          <circle cx="180" cy="180" r="38" fill="#1F1057" stroke="#00E5B8" strokeWidth="2"/>
          <g transform="translate(180 180)">
            <circle r="30" fill="#1F1057"/>
            <path d="M -22 8 C -10 8, -6 -6, 0 -6 C 6 -6, 10 8, 22 8" stroke="#00E5B8" strokeWidth="6" fill="none" strokeLinecap="round"/>
          </g>
        </svg>
      </div>

      <div className="loading-exp__text">
        <div className="loading-exp__msg" key={'msg-' + stage}>{cur.msg}<span className="loading-exp__dots"><span/><span/><span/></span></div>
        <div className="loading-exp__detail" key={'detail-' + stage}>{cur.detail}</div>
      </div>

      <div className="loading-exp__stats">
        <div className="loading-exp__stat">
          <div className="loading-exp__stat-num" key={'partners-' + activePartners}>{activePartners}</div>
          <div className="loading-exp__stat-label">partnere kontaktet</div>
        </div>
        <div className="loading-exp__stat-divider"/>
        <div className="loading-exp__stat">
          <div className="loading-exp__stat-num" key={'offers-' + offerCount}>{offerCount}</div>
          <div className="loading-exp__stat-label">tilbud sammenlignet</div>
        </div>
      </div>

      <div className="loading-exp__progress">
        {LOADING_STAGES.map((_, i) => (
          <div key={i} className={`loading-exp__progress-bar${i <= stage ? ' is-done' : ''}${i === stage ? ' is-active' : ''}`}/>
        ))}
      </div>
    </div>
  );
}

function ThankYou({ result, onReset }) {
  const [revealed, setRevealed] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setRevealed(true), LOADING_STAGES.length * 1500 + 400);
    return () => clearTimeout(t);
  }, []);

  if (!revealed) {
    return (
      <div className="thankyou thankyou--loading">
        <LoadingExperience />
      </div>
    );
  }

  const fornavn = result.fornavn || 'der';

  return (
    <div className="thankyou">
      <div className="thankyou-card thankyou-card--enter">
        <div className="thankyou-eyebrow">Pristjek modtaget</div>
        <h2 className="thankyou-title">
          Du bliver snart ringet op, <Wavy>{fornavn}.</Wavy>
        </h2>
        <p className="thankyou-sub">
          …så du kan vælge den bedste a-kasse for dig.
        </p>

        <ol className="process-steps">
          <li className="process-step is-done">
            <div className="process-step__badge">
              <svg viewBox="0 0 24 24" width="22" height="22"><path d="M 6 12.5 L 10 16.5 L 18 8.5" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div className="process-step__body">
              <div className="process-step__top">
                <h4>Start</h4>
                <span className="process-step__status">Udført</span>
              </div>
              <p>Du har udfyldt dine oplysninger</p>
            </div>
          </li>
          <li className="process-step is-active">
            <div className="process-step__badge"><span>2</span></div>
            <div className="process-step__body">
              <div className="process-step__top">
                <h4>Afvent kontakt</h4>
                <span className="process-step__status process-step__status--active">I gang</span>
              </div>
              <p>Få gode tilbud fra vores partnere, typisk inden for 24 timer på <strong>{result.telefon}</strong></p>
            </div>
          </li>
          <li className="process-step">
            <div className="process-step__badge"><span>3</span></div>
            <div className="process-step__body">
              <div className="process-step__top">
                <h4>Vælg det bedste tilbud</h4>
              </div>
              <p>Vi hjælper dig hele vejen igennem, gratis og uforpligtende</p>
            </div>
          </li>
        </ol>

        <div className="thankyou-meta">
          <div className="thankyou-meta__item">
            <CheckBadge/> Gratis & uforpligtende
          </div>
          <div className="thankyou-meta__item">
            <CheckBadge/> Vi skifter for dig
          </div>
          <div className="thankyou-meta__item">
            <CheckBadge/> GDPR-sikker
          </div>
        </div>

        <button className="btn-back-link" onClick={onReset}>← Lav et nyt pristjek</button>
      </div>
    </div>
  );
}

window.Quiz = Quiz;
window.ThankYou = ThankYou;
window.Wavy = Wavy;
window.LiveTicker = LiveTicker;