// Pet MBTI — Result, Type profile, Gallery. Exports: Reveal, ResultPage, TypesGallery, TypeDetail
const RC = window.PM_C;
const RS = window.PM_STR;
const { PawIcon, Sparkle, Btn, TraitBar, TypeThumb } = window;

// ── brief reveal ──
function Reveal() {
  return (
    <main style={{ minHeight: 'calc(100vh - 68px)', display: 'grid', placeItems: 'center', textAlign: 'center' }}>
      <div>
        <div style={{ position: 'relative', width: 120, height: 120, margin: '0 auto 26px' }}>
          <div className="pm-spin" style={{ position: 'absolute', inset: 0, borderRadius: 999,
            border: `5px solid ${RC.line}`, borderTopColor: RC.paw }} />
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
            <PawIcon size={44} color={RC.paw} className="pm-float" />
          </div>
          <Sparkle size={20} color={RC.pawDeep} style={{ position: 'absolute', top: -6, right: 4 }} className="pm-float2" />
        </div>
        <h2 style={{ margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 26, color: RC.ink }}>
          {RS.reading}<span className="pm-dots"></span>
        </h2>
        <p style={{ margin: '8px 0 0', fontFamily: "'Nunito', sans-serif", fontWeight: 700, fontSize: 15, color: RC.muted }}>
          {RS.matchingPet}
        </p>
      </div>
    </main>
  );
}

// ── compatibility pairing ──
function PairPortrait({ type, label, onClick }) {
  const g = type.colors;
  return (
    <button onClick={() => onClick(type.code)} className="pm-thumb" style={{
      border: 'none', background: 'none', cursor: 'pointer', padding: 0, display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 10, transition: 'transform .18s ease', flex: '0 1 190px' }}>
      <div style={{ width: '100%', maxWidth: 200, aspectRatio: '362 / 190', borderRadius: 20, overflow: 'hidden',
        background: g.soft, border: '4px solid #fff', boxShadow: `0 10px 26px ${g.deep}33` }}>
        <img src={type.img} alt={type.nick} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
      <div style={{ textAlign: 'center', lineHeight: 1.15 }}>
        {label && <div style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 11.5, letterSpacing: '.5px', color: RC.muted, textTransform: 'uppercase' }}>{label}</div>}
        <div style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 12, letterSpacing: '2px', color: g.ink, marginTop: 2 }}>{type.code}</div>
        <div style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 17, color: RC.ink }}>{type.nick}</div>
      </div>
    </button>
  );
}

function Heart({ size = 30, color }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 22" fill={color} aria-hidden="true">
      <path d="M12 21C5 16 1 12 1 7.2 1 3.9 3.5 1.5 6.6 1.5c1.9 0 3.7 1 4.4 2.6C11.7 2.5 13.5 1.5 15.4 1.5 18.5 1.5 21 3.9 21 7.2 21 12 17 16 12 21Z" />
    </svg>
  );
}

function CompatSection({ type, onOpenType }) {
  const g = type.colors;
  const best = window.PM_TYPES[type.matches[0]];
  const pals = type.matches.slice(1).map((c) => window.PM_TYPES[c]);
  return (
    <section style={{ maxWidth: 960, margin: '0 auto', padding: '20px 28px 8px' }}>
      <div style={{ background: RC.panel, borderRadius: 28, padding: 'clamp(24px, 4vw, 40px)', boxShadow: '0 6px 22px rgba(168,107,52,0.08)' }}>
        <div style={{ textAlign: 'center', marginBottom: 26 }}>
          <div style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13, letterSpacing: '2px', color: g.deep, textTransform: 'uppercase' }}>{RS.compatKicker}</div>
          <h2 style={{ margin: '8px 0 0', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(24px, 3.2vw, 32px)', color: RC.ink }}>{RS.bffTitle}</h2>
        </div>
        {/* featured pairing */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', justifyContent: 'center' }}>
          <PairPortrait type={type} label={RS.yourPet} onClick={onOpenType} />
          <div style={{ display: 'grid', placeItems: 'center', flex: '0 0 auto', paddingBottom: 44 }}>
            <span style={{ width: 52, height: 52, borderRadius: 999, background: g.soft, display: 'grid', placeItems: 'center', boxShadow: `0 4px 12px ${g.deep}22` }}>
              <Heart size={26} color={g.mid} />
            </span>
          </div>
          <PairPortrait type={best} label={RS.bestMatch} onClick={onOpenType} />
        </div>
        <p style={{ margin: '20px auto 0', maxWidth: 520, textAlign: 'center', fontFamily: "'Nunito', sans-serif",
          fontWeight: 600, fontSize: 16.5, lineHeight: 1.55, color: RC.ink2, textWrap: 'pretty' }}>{type.matchWhy}</p>

        {/* also pals with */}
        <div style={{ marginTop: 30, borderTop: `1px solid ${RC.line}`, paddingTop: 24 }}>
          <h3 style={{ margin: '0 0 16px', textAlign: 'center', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 18, color: RC.ink }}>{RS.alsoPals}</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 260px))', gap: 16, justifyContent: 'center' }}>
            {pals.map((t) => <TypeThumb key={t.code} type={t} onClick={onOpenType} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── shared full type profile (used by result + browse) ──
function TypeProfile({ type, pct, heading, mood = 'playful', onShare, onRetake, onAllTypes, onOpenType }) {
  const g = type.colors;
  const calm = mood === 'calm';
  const axes = window.PM_AXES.map((ax, i) => ({ ...ax, _winner: type.code[i], pct: pct ? pct[ax.key] : 68 }));
  const family = window.PM_ORDER[type.group].filter((c) => c !== type.code).map((c) => window.PM_TYPES[c]);

  return (
    <main>
      {/* colored hero */}
      <section style={{ background: calm ? g.soft : `linear-gradient(180deg, ${g.tint}, ${g.soft})`, position: 'relative', overflow: 'hidden' }}>
        {!calm && <Sparkle size={22} color="#fff" style={{ position: 'absolute', top: 40, left: '12%', opacity: .8 }} className="pm-float" />}
        {!calm && <Sparkle size={16} color="#fff" style={{ position: 'absolute', top: 120, right: '14%', opacity: .8 }} className="pm-float2" />}
        <div style={{ maxWidth: 960, margin: '0 auto', padding: '40px 28px 44px', display: 'grid',
          gridTemplateColumns: 'minmax(260px, 1fr) minmax(240px, 380px)', gap: 36, alignItems: 'center' }} className="pm-hero-grid">
          <div>
            {heading && <div style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13.5, letterSpacing: '1px',
              color: g.deep, textTransform: 'uppercase', marginBottom: 10 }}>{heading}</div>}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <span style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 15, letterSpacing: '4px',
                color: '#fff', background: g.deep, padding: '5px 14px', borderRadius: 999 }}>{type.code}</span>
              <span style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13.5, color: g.deep }}>{window.PM_GROUPS[type.group].name}</span>
            </div>
            <h1 style={{ margin: '4px 0 0', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(34px, 5vw, 52px)',
              lineHeight: 1.02, color: RC.ink, letterSpacing: '-.5px' }}>{type.nick}</h1>
            <p style={{ margin: '10px 0 0', fontFamily: "'Fredoka', sans-serif", fontWeight: 500, fontStyle: 'italic',
              fontSize: 'clamp(17px, 2.4vw, 21px)', color: g.deep, textWrap: 'balance' }}>“{type.tagline}”</p>
            <p style={{ margin: '16px 0 0', fontFamily: "'Nunito', sans-serif", fontWeight: 600, fontSize: 16, lineHeight: 1.55,
              color: RC.ink2, maxWidth: 460, textWrap: 'pretty' }}>{type.blurb}</p>
          </div>
          <div className="pm-pop" style={{ borderRadius: 24, overflow: 'hidden', background: '#fff',
            boxShadow: `0 16px 40px ${g.deep}44`, border: '5px solid #fff' }}>
            <img src={type.img} alt={type.nick} style={{ width: '100%', display: 'block' }} />
          </div>
        </div>
      </section>

      {/* detail body */}
      <section style={{ maxWidth: 960, margin: '0 auto', padding: '44px 28px 20px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 1.3fr) minmax(240px, 1fr)', gap: 36 }} className="pm-body-grid">
          <div>
            <h2 style={{ margin: '0 0 12px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 24, color: RC.ink }}>
              {RS.meetSpecies(type.species)}
            </h2>
            <p style={{ margin: 0, fontFamily: "'Nunito', sans-serif", fontWeight: 600, fontSize: 16.5, lineHeight: 1.62, color: RC.ink2, textWrap: 'pretty' }}>{type.long}</p>
            <h3 style={{ margin: '26px 0 12px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 19, color: RC.ink }}>{RS.lovesTitle}</h3>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {type.loves.map((l) => (
                <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: g.soft, color: g.ink,
                  fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 14, padding: '9px 16px', borderRadius: 999 }}>
                  <PawIcon size={14} color={g.mid} /> {l}
                </span>
              ))}
            </div>
          </div>
          {/* trait card */}
          <div style={{ background: RC.panel, borderRadius: 24, padding: 24, boxShadow: '0 6px 20px rgba(168,107,52,0.08)', alignSelf: 'start' }}>
            <h3 style={{ margin: '0 0 18px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 18, color: RC.ink }}>{RS.traitsTitle}</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {axes.map((ax) => <TraitBar key={ax.key} axis={ax} pct={ax.pct} colors={g} />)}
            </div>
          </div>
        </div>
      </section>

      {/* compatibility */}
      <CompatSection type={type} onOpenType={onOpenType} />

      {/* family row */}
      <section style={{ maxWidth: 960, margin: '0 auto', padding: '30px 28px 8px' }}>
        <h3 style={{ margin: '0 0 16px', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 20, color: RC.ink }}>
          {RS.restOf(window.PM_GROUPS[type.group].name)}
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 16 }}>
          {family.map((t) => <TypeThumb key={t.code} type={t} onClick={onOpenType} />)}
        </div>
      </section>

      {/* actions */}
      <section style={{ maxWidth: 960, margin: '0 auto', padding: '36px 28px 64px', textAlign: 'center' }}>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          {onShare && <Btn size="lg" onClick={() => onShare(type, pct)} color={RC.pawDeep}><PawIcon size={18} color="#fff" /> {heading ? RS.shareYourCard : RS.shareThisCard}</Btn>}
          {onRetake && <Btn size="lg" kind={onShare ? 'soft' : 'primary'} onClick={onRetake} color={RC.pawDeep}>{RS.testAnother}</Btn>}
          <Btn size="lg" kind="soft" onClick={onAllTypes}>{RS.browseAll}</Btn>
        </div>
        {heading && (
          <div style={{ marginTop: 34, background: RC.panel, borderRadius: 24, padding: 'clamp(24px, 4vw, 36px)',
            boxShadow: '0 6px 22px rgba(168,107,52,0.08)', display: 'flex', flexWrap: 'wrap', gap: 20,
            alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ maxWidth: 380, textAlign: 'left' }}>
              <h3 style={{ margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(21px, 2.6vw, 26px)', color: RC.ink }}>
                {RS.diaryOf(type.nick)}
              </h3>
              <p style={{ margin: '8px 0 0', fontFamily: "'Nunito', sans-serif", fontWeight: 600, fontSize: 15.5, lineHeight: 1.55, color: RC.ink2, textWrap: 'pretty' }}>
                {RS.diaryBody}
              </p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', justifyContent: 'center' }}>
              <window.AppStoreBadge />
              <window.AppQR size={92} />
            </div>
          </div>
        )}
      </section>
    </main>
  );
}

function ResultPage(props) {
  return <TypeProfile {...props} heading={RS.yourPetIs} />;
}

// ── gallery of all 16, grouped by family ──
function GroupBlock({ gk, onOpenType }) {
  const g = window.PM_GROUPS[gk];
  const codes = window.PM_ORDER[gk];
  return (
    <div style={{ marginBottom: 44 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <span style={{ width: 14, height: 14, borderRadius: 999, background: g.mid }} />
        <h2 style={{ margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 25, color: g.ink }}>{g.name}</h2>
        <span style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13, color: RC.muted,
          background: g.soft, padding: '4px 12px', borderRadius: 999, whiteSpace: 'nowrap' }}>{g.role} · {g.letters}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 16 }}>
        {codes.map((c) => <TypeThumb key={c} type={window.PM_TYPES[c]} onClick={onOpenType} size="lg" />)}
      </div>
    </div>
  );
}

function TypesGallery({ onOpenType, onStart }) {
  return (
    <main style={{ maxWidth: 1160, margin: '0 auto', padding: '44px 28px 40px' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <p style={{ margin: 0, fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 13, letterSpacing: '2px', color: RC.pawDeep, textTransform: 'uppercase' }}>{RS.galleryKicker}</p>
        <h1 style={{ margin: '8px 0 0', fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 'clamp(30px, 4.4vw, 46px)', color: RC.ink }}>{RS.galleryTitle}</h1>
        <p style={{ margin: '12px auto 0', maxWidth: 500, fontFamily: "'Nunito', sans-serif", fontWeight: 600, fontSize: 16.5, color: RC.ink2, textWrap: 'pretty' }}>
          {RS.gallerySub}
        </p>
      </div>
      {['analyst','diplomat','sentinel','explorer'].map((gk) => <GroupBlock key={gk} gk={gk} onOpenType={onOpenType} />)}
      <div style={{ textAlign: 'center', marginTop: 8 }}>
        <Btn size="lg" onClick={onStart} color={RC.pawDeep}>{RS.heroTake} <span style={{ fontSize: 22, marginTop: -2 }}>→</span></Btn>
      </div>
    </main>
  );
}

function TypeDetail(props) {
  return <TypeProfile {...props} heading={null} />;
}

Object.assign(window, { Reveal, ResultPage, TypesGallery, TypeDetail, TypeProfile, CompatSection });