// b/detail.jsx — project detail + build guide.

function Detail({ project, onBack, onBuild, onSave, saved, onAddAll, inList }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.paper, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
      {/* hero */}
      <div style={{ position: 'relative', height: 280,
        background: `radial-gradient(120% 100% at 50% 20%, ${project.palette[0]}22 0%, ${T.paper} 70%)` }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .4,
          backgroundImage: 'radial-gradient(' + T.line + ' 1px, transparent 1px)', backgroundSize: '16px 16px' }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <SetArt project={project} size={230} />
        </div>
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between' }}>
          <button onClick={onBack} style={iconBtn}>←</button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={onSave} style={{ ...iconBtn, color: saved ? 'var(--accent)' : T.ink, borderColor: saved ? 'var(--accent)' : T.line }}>{saved ? '♥' : '♡'}</button>
            <button style={iconBtn}>↗</button>
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 12, left: 14 }}>
          <Chip accent={project.match >= 90} solid={project.match >= 90}>{project.match}% match</Chip>
        </div>
      </div>

      {/* body */}
      <div style={{ padding: '4px 18px 120px' }}>
        <div style={{ fontFamily: mono, fontSize: 10.5, color: T.ink2, letterSpacing: 0.5, marginTop: 14 }}>{project.cat.toUpperCase()}</div>
        <div style={{ fontFamily: disp, fontSize: 30, fontWeight: 700, color: T.ink, lineHeight: 1.05, marginTop: 2 }}>{project.name}</div>
        <div style={{ fontFamily: disp, fontSize: 14.5, color: T.ink2, lineHeight: 1.5, marginTop: 8 }}>{project.blurb}</div>

        {/* spec strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8, marginTop: 16 }}>
          <Spec k="sværhedsgrad" v={<Diff level={project.diff} />} />
          <Spec k="årgang" v={project.year || '—'} />
          <Spec k="antal dele" v={project.parts + ' stk'} />
          <Spec k="match" v={project.match + '%'} />
        </div>

        {/* missing parts */}
        <div style={{ marginTop: 22 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: disp, fontSize: 16, fontWeight: 700, color: T.ink }}>
              {project.missTotal ? `Mangler ${project.missTotal} klodser` : 'Du har alle delene'}
            </div>
            {project.missing.length > 0 && (
              <button onClick={onAddAll} disabled={inList} style={{ background: 'none', border: 'none', cursor: inList ? 'default' : 'pointer',
                fontFamily: mono, fontSize: 11, color: inList ? T.ink2 : 'var(--accent)' }}>
                {inList ? '✓ på listen' : '+ alle til liste'}
              </button>
            )}
          </div>

          {project.missing.length > 0 ? (
            <div style={{ marginTop: 10, border: '1px solid ' + T.line, borderRadius: 14, overflow: 'hidden' }}>
              {project.missing.map((m, i) => (
                <div key={m.name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
                  borderBottom: i < project.missing.length - 1 ? '1px solid ' + T.line : 'none' }}>
                  <span style={{ width: 26, height: 16, borderRadius: 3, background: T.faint, border: '1px solid rgba(0,0,0,.15)' }} />
                  <span style={{ flex: 1, fontFamily: disp, fontSize: 14, color: T.ink }}>{m.name}</span>
                  <span style={{ fontFamily: mono, fontSize: 11, color: T.ink2 }}>×{m.q}</span>
                  <span style={{ fontFamily: mono, fontSize: 11, color: T.ink }}>{m.price} kr</span>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ marginTop: 10, fontFamily: disp, fontSize: 14, color: T.ink2, lineHeight: 1.5 }}>
              Alle {project.parts} dele findes i dit inventar. Klar til at bygge.
            </div>
          )}

          <div style={{ marginTop: 10, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <span style={{ fontFamily: mono, fontSize: 11, color: 'var(--accent)' }}>tip</span>
            <span style={{ fontFamily: disp, fontSize: 13, color: T.ink2, lineHeight: 1.45 }}>{project.tip}</span>
          </div>
        </div>
      </div>

      {/* sticky CTA */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '14px 18px calc(14px + env(safe-area-inset-bottom))',
        background: 'linear-gradient(transparent, ' + T.paper + ' 26%)' }}>
        <Btn onClick={onBuild}>Åbn byggevejledning ↗</Btn>
        {project.url && (
          <a href={project.url} target="_blank" rel="noopener noreferrer"
            style={{ display: 'block', textAlign: 'center', marginTop: 9, fontFamily: mono, fontSize: 11, color: T.ink2, textDecoration: 'none' }}>
            se sættet på Rebrickable ↗
          </a>
        )}
      </div>
    </div>
  );
}

function Spec({ k, v }) {
  return (
    <div style={{ border: '1px solid ' + T.line, borderRadius: 12, padding: '11px 13px' }}>
      <div style={{ fontFamily: mono, fontSize: 9.5, color: T.ink2, letterSpacing: 0.5, textTransform: 'uppercase' }}>{k}</div>
      <div style={{ fontFamily: disp, fontSize: 16, fontWeight: 600, color: T.ink, marginTop: 5, display: 'flex', alignItems: 'center' }}>{v}</div>
    </div>
  );
}

// ---- Build guide -----------------------------------------------------------
function BuildGuide({ project, steps, loading, onExit, onFinish, motion }) {
  const [step, setStep] = React.useState(0);
  const list = steps || [];
  const total = list.length;
  const done = !loading && total > 0 && step >= total;
  const s = list[step];

  if (loading || total === 0) {
    return (
      <div style={{ position: 'absolute', inset: 0, background: T.paper, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 30, gap: 16 }}>
        <button onClick={onExit} style={{ ...iconBtn, position: 'absolute', top: 14, left: 14 }}>✕</button>
        <div style={{ width: 46, height: 46, borderRadius: 46, border: '3px solid ' + T.faint, borderTopColor: 'var(--accent)', animation: 'spin 0.8s linear infinite' }} />
        <div style={{ fontFamily: disp, fontSize: 16, fontWeight: 600, color: T.ink }}>Skriver byggevejledning…</div>
        <div style={{ fontFamily: disp, fontSize: 13, color: T.ink2, textAlign: 'center', lineHeight: 1.5, maxWidth: 240 }}>
          Tilpasser trinene til <b>{project.name}</b> og dine klodser.
        </div>
      </div>
    );
  }

  if (done) {
    return (
      <div style={{ position: 'absolute', inset: 0, background: T.paper, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 30, textAlign: 'center' }}>
        <div style={{ animation: motion ? 'pop .4s cubic-bezier(.2,.9,.3,1.4)' : 'none' }}>
          <ModelArt project={project} size={180} />
        </div>
        <div style={{ fontFamily: disp, fontSize: 26, fontWeight: 700, color: T.ink, marginTop: 8 }}>Færdig! 🎉</div>
        <div style={{ fontFamily: disp, fontSize: 15, color: T.ink2, lineHeight: 1.5, marginTop: 8, maxWidth: 260 }}>
          Du byggede <b>{project.name}</b> på {total} trin. Godt gået.
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 24, width: '100%' }}>
          <Btn kind="ghost" onClick={() => setStep(0)}>Byg igen</Btn>
          <Btn onClick={onFinish}>Næste model →</Btn>
        </div>
      </div>
    );
  }

  return (
    <div style={{ position: 'absolute', inset: 0, background: T.paper, display: 'flex', flexDirection: 'column' }}>
      {/* step visual */}
      <div style={{ position: 'relative', height: '54%',
        background: `radial-gradient(120% 100% at 50% 30%, ${project.palette[0]}1f 0%, ${T.paper2} 75%)` }}>
        <div style={{ position: 'absolute', inset: 0, opacity: .4, backgroundImage: 'radial-gradient(' + T.line + ' 1px, transparent 1px)', backgroundSize: '16px 16px' }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* progressively reveal more of the model */}
          <div style={{ clipPath: `inset(${Math.max(0, 100 - ((step + 1) / total) * 100)}% 0 0 0)`, transition: 'clip-path .35s ease' }}>
            <ModelArt project={project} size={230} />
          </div>
        </div>
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={onExit} style={iconBtn}>✕</button>
          <span style={{ fontFamily: mono, fontSize: 11, color: T.ink, background: 'rgba(247,245,238,.85)', padding: '6px 12px', borderRadius: 999, border: '1px solid ' + T.line }}>
            TRIN {step + 1} / {total}
          </span>
          <button style={iconBtn}>?</button>
        </div>
        {/* progress dots */}
        <div style={{ position: 'absolute', bottom: 14, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 4 }}>
          {list.map((_, i) => (
            <span key={i} style={{ width: i === step ? 18 : 6, height: 6, borderRadius: 3, transition: 'all .25s',
              background: i <= step ? 'var(--accent)' : T.faint }} />
          ))}
        </div>
      </div>

      {/* step instructions */}
      <div style={{ flex: 1, padding: '18px 20px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: mono, fontSize: 10.5, color: 'var(--accent)', letterSpacing: 0.5 }}>TRIN {step + 1}</div>
        <div style={{ fontFamily: disp, fontSize: 23, fontWeight: 700, color: T.ink, marginTop: 4, lineHeight: 1.1 }}>{s.t}</div>
        <div style={{ fontFamily: disp, fontSize: 15, color: T.ink2, lineHeight: 1.5, marginTop: 8 }}>{s.d}</div>

        <div style={{ marginTop: 14, display: 'flex', gap: 7, flexWrap: 'wrap' }}>
          {s.use.map(u => <Chip key={u} accent>{u}</Chip>)}
        </div>

        {/* nav */}
        <div style={{ marginTop: 'auto', display: 'flex', gap: 10, paddingBottom: 6 }}>
          <Btn kind="ghost" onClick={() => setStep(x => Math.max(0, x - 1))} disabled={step === 0} style={{ flex: '0 0 96px' }}>← forrige</Btn>
          <Btn onClick={() => setStep(x => x + 1)} style={{ flex: 1 }}>{step === total - 1 ? 'Færdig ✓' : 'Næste trin →'}</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Detail, BuildGuide });