/* Brainstorm X — Final naming report ("Naming Snapshot"). */
(function () {
  const DS = window.BrainstormXDesignSystem_f2a458;
  const { Button, Card, Badge, HeatBadge } = DS;
  const I = window.BXIcons;

  function Report({ names, goto, project = 'Pickle Paws' }) {
    const finalists = [...names].sort((a, b) => b.score - a.score).filter((n) => n.shortlisted || n.score >= 8).slice(0, 4);
    const taglines = ['Playful pet accessories, picked with love.', 'For pets with personality.', 'Quirky kit for very good animals.'];

    return (
      <div className="bx-nebula-bg" style={{ minHeight: '100vh', padding: '0 0 110px' }}>
        <header style={{ position: 'sticky', top: 0, zIndex: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 28px', borderBottom: '1px solid var(--line-1)', background: 'rgba(10,10,24,0.6)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="../assets/mark-spark.svg" width="26" height="26" alt="" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--text-1)' }}>Naming Snapshot</span>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button variant="secondary" size="sm" onClick={() => goto('shortlist')} iconLeft={<I.ArrowLeft size={16} />}>Back</Button>
            <Button size="sm" iconLeft={<I.Download size={16} />}>Export PDF</Button>
          </div>
        </header>

        <div style={{ maxWidth: 860, margin: '0 auto', padding: '44px 28px 0' }}>
          <span className="bx-eyebrow">{project} · Naming report</span>
          <h1 style={{ fontSize: 'clamp(34px,5vw,52px)', margin: '14px 0 16px', lineHeight: 1.04 }}>
            Your team's <span className="bx-text-nebula">strongest names</span>
          </h1>

          <Card glass glow="cyan" style={{ padding: '24px 28px', marginBottom: 32 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Session taste profile</div>
            <p style={{ fontSize: 17, color: 'var(--text-1)', lineHeight: 1.5 }}>
              The team is responding well to <strong>short, energetic, playful</strong> names and rejecting anything that feels too corporate or literal. Boosted keywords: <span style={{ color: 'var(--neon-cyan)' }}>quirky</span>, <span style={{ color: 'var(--neon-cyan)' }}>playful</span>, <span style={{ color: 'var(--neon-cyan)' }}>cute</span>.
            </p>
          </Card>

          <h2 style={{ fontSize: 24, marginBottom: 16 }}>Finalists</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 36 }}>
            {finalists.map((n, i) => (
              <Card key={n.id} style={{ padding: '22px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-3)' }}>0{i + 1}</span>
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: 'var(--text-1)' }}>{n.name}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-3)' }}>{n.pronunciation}</span>
                      <Badge tone="cyan" mono size="sm">{n.style}</Badge>
                      <HeatBadge state={n.heat} size="sm" />
                    </div>
                    <p style={{ fontSize: 15, color: 'var(--text-2)', marginTop: 10, lineHeight: 1.5 }}>{n.reason}</p>
                    <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 13, color: 'var(--text-3)', fontFamily: 'var(--font-mono)', flexWrap: 'wrap' }}>
                      <span>⚠ Risk: check existing pet brands & domain availability.</span>
                    </div>
                  </div>
                  <div style={{ textAlign: 'center', flex: 'none' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: 'var(--heat-fire)' }}>{n.score > 0 ? '+' + n.score : n.score}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-3)' }}>conf {n.confidence}%</div>
                  </div>
                </div>
              </Card>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 30 }}>
            <Card style={{ padding: '22px 24px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}><I.Sparkles size={18} style={{ color: 'var(--neon-magenta)' }} /><h3 style={{ fontSize: 17 }}>Tagline directions</h3></div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                {taglines.map((t) => <li key={t} style={{ fontSize: 14, color: 'var(--text-2)', paddingLeft: 14, position: 'relative' }}><span style={{ position: 'absolute', left: 0, color: 'var(--neon-magenta)' }}>·</span>{t}</li>)}
              </ul>
            </Card>
            <Card style={{ padding: '22px 24px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}><I.Check size={18} style={{ color: 'var(--neon-lime)' }} /><h3 style={{ fontSize: 17 }}>Suggested next checks</h3></div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                {['Domain & social handle availability', 'Trademark search (handle separately)', 'Say each name out loud with the team'].map((t) => <li key={t} style={{ fontSize: 14, color: 'var(--text-2)', paddingLeft: 14, position: 'relative' }}><span style={{ position: 'absolute', left: 0, color: 'var(--neon-lime)' }}>·</span>{t}</li>)}
              </ul>
            </Card>
          </div>

          <Card style={{ padding: '16px 20px', background: 'var(--surface-inset)' }}>
            <p style={{ fontSize: 13, color: 'var(--text-3)' }}>
              Brainstorm X helps with creative naming. Final trademark and legal checks should still be handled separately — name availability is never guaranteed.
            </p>
          </Card>
        </div>
      </div>
    );
  }

  window.BXReport = Report;
})();