// Screens, part 2: Historik, Dataskydd, Consent-modal, Errors.
// Helpers used via window.* to avoid scope collision with screens-1.jsx.

function ScreenHistorik({ onOpenScan, onNav, embed }) {
  const [period, setPeriod] = React.useState('all');
  const hist = window.HISTORY;
  const filtered = React.useMemo(() => {
    if (period === 'all') return hist;
    const now = new Date('2026-04-30');
    const cut = new Date(now);
    if (period === '1m') cut.setMonth(cut.getMonth() - 1);
    if (period === '3m') cut.setMonth(cut.getMonth() - 3);
    if (period === '1y') cut.setFullYear(cut.getFullYear() - 1);
    return hist.filter(h => new Date(h.scan_date) >= cut);
  }, [period]);
  const last = filtered[filtered.length - 1] || hist[hist.length - 1];
  const first = filtered[0] || hist[0];

  const metrics = [
    { key: 'inbody_score', label: 'InBody-poäng', unit: '/100', accent: 'var(--accent)' },
    { key: 'weight', label: 'Vikt', unit: 'kg' },
    { key: 'skeletal_muscle_mass', label: 'Muskelmassa', unit: 'kg' },
    { key: 'body_fat_percent', label: 'Kroppsfett', unit: '%' },
    { key: 'total_body_water', label: 'Vatten', unit: 'L' },
    { key: 'basal_metabolic_rate', label: 'Basförbr.', unit: 'kcal' },
  ];
  const periods = [['1m','1m'],['3m','3m'],['1y','1år'],['all','allt']];

  return (
    <div style={{ height: '100%', overflow: 'auto', background: 'var(--paper)', position: 'relative' }} className="ib-noscroll">
      {!embed && <StatusBar/>}
      <PageChrome section="02 · UTVECKLING" fileId={`N=${filtered.length}`} embed={embed}/>

      <div style={{ padding: '24px 22px 14px' }}>
        <div className="ib-eyebrow" style={{ marginBottom: 10 }}>
          <span className="ib-eyebrow-num">02</span>{window.fmtDateShort(first.scan_date)} → {window.fmtDateShort(last.scan_date)}
        </div>
        <h1 className="ib-h1" style={{ fontSize: 28, margin: 0 }}>
          {filtered.length} mätningar.<br/>
          <em style={{ color: 'var(--ink-soft)', fontStyle: 'italic' }}>Försiktigt åt rätt håll.</em>
        </h1>
        <div className="ib-mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 12 }}>
          Vikt <span style={{ color: 'var(--ink)' }}>{(last.weight - first.weight).toFixed(1)} kg</span> ·
          {' '}Muskel <span style={{ color: 'var(--ink)' }}>+{(last.skeletal_muscle_mass - first.skeletal_muscle_mass).toFixed(1)} kg</span> ·
          {' '}Fett <span style={{ color: 'var(--ink)' }}>{(last.body_fat_percent - first.body_fat_percent).toFixed(1)} %</span>
        </div>
      </div>

      {/* Period selector */}
      <div style={{ display: 'flex', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
        {periods.map(([k,l],i) => (
          <button key={k} onClick={() => setPeriod(k)} style={{ flex: 1, padding: '12px 0', border: 'none', borderRight: i < 3 ? '1px solid var(--rule-soft)' : 'none', background: period === k ? 'var(--ink)' : 'transparent', color: period === k ? 'var(--paper)' : 'var(--ink-soft)', fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', cursor: 'pointer', textTransform: 'uppercase' }}>{l}</button>
        ))}
      </div>

      {/* Sparkline grid */}
      <div>
        {metrics.map((m, i) => {
          const values = filtered.map(h => h[m.key]).filter(v => v != null);
          if (values.length < 2) return null;
          const v = last[m.key]; const v0 = first[m.key];
          const delta = +(v - v0).toFixed(1);
          const arrow = delta > 0 ? '↑' : delta < 0 ? '↓' : '·';
          return (
            <div key={m.key} style={{ padding: '16px 22px', display: 'grid', gridTemplateColumns: '1fr 120px', gap: 16, alignItems: 'center', borderBottom: '1px solid var(--rule-soft)' }}>
              <div>
                <div className="ib-eyebrow" style={{ marginBottom: 5 }}>{m.label}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span className="ib-num ib-serif" style={{ fontSize: 26, fontWeight: 400, color: m.accent || 'var(--ink)', letterSpacing: -0.4 }}>{v}</span>
                  <span className="ib-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>{m.unit}</span>
                  <span className="ib-mono" style={{ fontSize: 10, color: 'var(--ink-soft)', marginLeft: 'auto' }}>{arrow} {Math.abs(delta)}</span>
                </div>
              </div>
              <Sparkline values={values} accent={m.accent || 'var(--ink)'} area/>
            </div>
          );
        })}
      </div>

      <SectionHead num="2" title="Mätningar" right={<span className="ib-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>NYAST FÖRST</span>}/>
      <div>
        {[...filtered].reverse().map((h, i) => (
          <button key={h.id} onClick={() => onOpenScan(h)} style={{ width: '100%', display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 10, padding: '13px 22px', borderBottom: '1px solid var(--rule-soft)', alignItems: 'center', fontSize: 12, background: 'transparent', border: 'none', borderTop: 'none', cursor: 'pointer', textAlign: 'left' }}>
            <span className="ib-mono" style={{ color: 'var(--ink-soft)', fontSize: 11 }}>{window.fmtDateShort(h.scan_date)}</span>
            <span style={{ color: 'var(--ink)', fontWeight: 500 }} className="ib-num">{h.weight} kg <span style={{ color: 'var(--ink-mute)' }}>· {h.body_fat_percent}%</span></span>
            {h.confidence_score < 0.7 && <span className="ib-tag ib-tag-warn">LÅG</span>}
            {h.confidence_score >= 0.7 && <span style={{ width: 1 }}/>}
            <span className="ib-num ib-serif" style={{ color: 'var(--accent)', fontSize: 16 }}>{h.inbody_score}</span>
          </button>
        ))}
      </div>

      <div style={{ height: 100 }}/>
      <TabBar active="history" onNav={onNav} embed={embed}/>
    </div>
  );
}

// ─── DATASKYDD ──────────────────────────────────────────────────────
function ScreenDataskydd({ onNav, onOpenConsent, embed, consent }) {
  const c = consent || { version: '2026-05', given_at: '2026-04-30 21:04:35', scopes: ['store'], is_current_version: true };
  const scanCount = window.HISTORY.length;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: 'var(--paper)', position: 'relative' }} className="ib-noscroll">
      {!embed && <StatusBar/>}
      <PageChrome section="03 · DATASKYDD" fileId="GDPR/Art.9" embed={embed}/>

      <TitleBlock eyebrow="Din data" num="03" title={<>Du äger den. <em style={{ color: 'var(--ink-soft)', fontStyle: 'italic' }}>Vi förvarar.</em></>} sub={`${scanCount} mätningar i ditt arkiv. Krypterat. Lagrat i Sverige. Ingen tredjepart.`}/>

      <SectionHead num="1" title="Samtycke"/>
      <div style={{ padding: '14px 22px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'baseline', borderBottom: '1px solid var(--rule-soft)' }}>
        <div>
          <div className="ib-mono" style={{ fontSize: 11, color: 'var(--ink)', fontWeight: 500 }}>Version {c.version}</div>
          <div className="ib-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', marginTop: 3 }}>Givet {window.fmtDateShort(c.given_at)}</div>
        </div>
        <span className="ib-tag ib-tag-good">AKTIVT</span>
      </div>
      <div style={{ padding: '14px 22px', display: 'flex', gap: 10, borderBottom: '1px solid var(--rule)' }}>
        <button className="ib-btn ib-btn-ghost" style={{ flex: 1, padding: '12px', fontSize: 12 }} onClick={onOpenConsent}>Visa samtyckestexten</button>
        <button className="ib-btn ib-btn-ghost" style={{ flex: 1, padding: '12px', fontSize: 12, borderColor: 'var(--ink-mute)', color: 'var(--ink-mute)' }}>Återkalla</button>
      </div>

      <SectionHead num="2" title="Export"/>
      <div style={{ padding: '14px 22px', borderBottom: '1px solid var(--rule)' }}>
        <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: 0, lineHeight: 1.5 }}>
          Ladda ner all din data som JSON eller CSV. Lämpligt för att ta med till PT eller läkare.
        </p>
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <button className="ib-btn ib-btn-ghost" style={{ flex: 1, padding: '12px', fontSize: 12 }}>Exportera JSON</button>
          <button className="ib-btn ib-btn-ghost" style={{ flex: 1, padding: '12px', fontSize: 12 }}>Exportera CSV</button>
        </div>
      </div>

      <SectionHead num="3" title="Radera"/>
      <div style={{ padding: '14px 22px' }}>
        <div style={{ marginBottom: 14 }}>
          <div className="ib-mono" style={{ fontSize: 10, color: 'var(--ink)', fontWeight: 700, letterSpacing: '0.08em', marginBottom: 4 }}>3.1 · ENSKILD MÄTNING</div>
          <p style={{ fontSize: 12, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.5 }}>
            Öppna mätningen och välj <em>Radera</em>. Ångerbar i 30 dagar — sedan permanent.
          </p>
        </div>
        <div style={{ borderTop: '1px solid var(--rule-soft)', paddingTop: 14 }}>
          <div className="ib-mono" style={{ fontSize: 10, color: 'var(--bad)', fontWeight: 700, letterSpacing: '0.08em', marginBottom: 4 }}>3.2 · ALL DATA</div>
          <p style={{ fontSize: 12, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.5, marginBottom: 12 }}>
            Tar bort alla {scanCount} mätningar, ditt samtycke och kontot. Bekräftas i två steg. Genomförs inom 7 dygn.
          </p>
          <button className="ib-btn ib-btn-danger" style={{ width: '100%', padding: '14px' }}>Radera all min data</button>
        </div>
      </div>

      <div style={{ height: 100 }}/>
      <TabBar active="data" onNav={onNav} embed={embed}/>
    </div>
  );
}

// ─── CONSENT MODAL — first-time ────────────────────────────────────
function ScreenConsent({ onAgree, onDismiss, retro }) {
  const [checked, setChecked] = React.useState(false);
  return (
    <div style={{ height: '100%', background: 'var(--paper)', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <StatusBar/>
      {retro && (
        <div style={{ padding: '10px 22px', background: 'var(--accent-bg)', borderBottom: '1px solid var(--rule-soft)' }}>
          <span className="ib-mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.06em', fontWeight: 700 }}>RETROAKTIVT — DU HAR DATA SEDAN 2017</span>
        </div>
      )}

      <div style={{ flex: 1, overflow: 'auto' }} className="ib-noscroll">
        <TitleBlock eyebrow="Innan vi börjar" num="00" title={<>Inbody-mätningar är <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>hälsodata</em>. Vi behöver ditt samtycke.</>} sub="Detta är ett kort, läsbart kontrakt. Du kan när som helst återkalla det och radera all data."/>

        <ClauseBlock items={[
          ['01', 'Vad lagras',     'Vikt, BMI, muskelmassa, fettfördelning och övriga värden från ditt InBody-papper. Inga bilder bevaras efter tolkning.'],
          ['02', 'Var',            'Krypterat hos Core Gym Club. Server i Sverige. Ingen tredjepartsdelning.'],
          ['03', 'Hur länge',      'Tills du raderar själv, eller automatiskt 24 mån efter sista inloggning.'],
          ['04', 'Vem ser',        'Endast du. Personlig tränare endast om du själv aktiverar delning per relation.'],
          ['05', 'Återkallelse',   'När som helst, från Mitt arkiv. All data försvinner inom 7 dygn.'],
        ]}/>

        <div style={{ padding: '20px 22px', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <button onClick={() => setChecked(!checked)} style={{ width: 20, height: 20, border: '1.5px solid var(--ink)', background: checked ? 'var(--ink)' : 'transparent', flexShrink: 0, marginTop: 1, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {checked && <svg width="11" height="9" viewBox="0 0 11 9" fill="none" stroke="var(--paper)" strokeWidth="1.8" strokeLinecap="round"><path d="M1 5l3 3 6-7"/></svg>}
          </button>
          <span style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink)' }}>
            Jag förstår och samtycker till hantering enligt ovan. <a style={{ color: 'var(--ink)', textDecoration: 'underline' }}>Fullständig text (PDF)</a>
          </span>
        </div>
      </div>

      <div style={{ padding: '16px 22px 32px', background: 'var(--paper)', borderTop: '1px solid var(--rule)' }}>
        <button className="ib-btn" style={{ width: '100%', padding: '18px', opacity: checked ? 1 : 0.4 }} disabled={!checked} onClick={onAgree}>Jag samtycker</button>
        <button onClick={onDismiss} style={{ width: '100%', marginTop: 4, padding: '12px', border: 'none', background: 'transparent', color: 'var(--ink-mute)', fontFamily: 'var(--sans)', fontSize: 12, cursor: 'pointer' }}>Inte nu</button>
      </div>
    </div>
  );
}

// ─── ERROR STATES ───────────────────────────────────────────────────
function ErrorView({ code, title, body, primary, secondary, onPrimary, onSecondary }) {
  return (
    <div style={{ height: '100%', background: 'var(--paper)', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <StatusBar/>
      <PageChrome section="FEL" fileId={code}/>
      <div style={{ flex: 1, padding: '40px 22px 0' }}>
        <div className="ib-eyebrow" style={{ color: 'var(--bad)', marginBottom: 12 }}><span className="ib-eyebrow-num">!</span>Något gick inte fram</div>
        <h1 className="ib-h1" style={{ fontSize: 28, margin: 0, marginBottom: 14 }}>{title}</h1>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{body}</p>
        <div className="ib-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', marginTop: 24, padding: '10px 12px', background: 'var(--paper-2)', border: '1px solid var(--rule-soft)' }}>
          KOD · {code}
        </div>
      </div>
      <div style={{ padding: '20px 22px 32px' }}>
        {primary && <button className="ib-btn" style={{ width: '100%', padding: '16px' }} onClick={onPrimary}>{primary}</button>}
        {secondary && <button className="ib-btn ib-btn-ghost" style={{ width: '100%', padding: '14px', marginTop: 10 }} onClick={onSecondary}>{secondary}</button>}
      </div>
    </div>
  );
}

const ERRORS = {
  not_inbody: { code: 'AI/422', title: 'Det här ser inte ut som ett InBody-papper.', body: 'Vi kunde inte hitta de typiska värdena. Försök igen med pappret platt på en jämn yta, utan blixt.' },
  blurry:     { code: 'AI/422', title: 'Bilden är för otydlig.', body: 'Vikten gick inte att läsa av. Lägg pappret nära kamerans mitt och håll stilla i två sekunder.' },
  too_large:  { code: 'IMG/413', title: 'Bilden är för stor (>10 MB).', body: 'Försök med en lägre upplösning, eller välj från ditt bibliotek så komprimerar vi den åt dig.' },
  expired:    { code: 'AUTH/401', title: 'Du har loggats ut.', body: 'Av säkerhetsskäl gäller inloggningar i 24 timmar. Begär en ny länk så är du tillbaka.' },
  consent:    { code: 'GDPR/403', title: 'Ditt samtycke har gått ut.', body: 'En ny version av samtyckestexten finns. Läs igenom den och samtyck igen för att fortsätta använda arkivet.' },
};

Object.assign(window, { ScreenHistorik, ScreenDataskydd, ScreenConsent, ErrorView, ERRORS });