/* Brainstorm X — Shortlist board (Finalists). */
(function () {
  const { useState } = React;
  const DS = window.BrainstormXDesignSystem_f2a458;
  const { Button, Card, NameCard, Chip, Badge, HeatBadge } = DS;
  const I = window.BXIcons;

  const FILTERS = ['Most liked', 'Most debated', 'Shortest', 'Most brandable', 'Best for .com'];

  function Shortlist({ names, setNames, goto, project = 'Pickle Paws' }) {
    const [filter, setFilter] = useState('Most liked');

    const sorted = [...names].sort((a, b) => {
      if (filter === 'Shortest') return a.name.length - b.name.length;
      if (filter === 'Most debated') return (b.counts.down + b.counts.ice) - (a.counts.down + a.counts.ice);
      if (filter === 'Most brandable') return (b.style === 'brandable') - (a.style === 'brandable');
      return b.score - a.score;
    });
    const finalists = sorted.filter((n) => n.shortlisted || n.score >= 8).slice(0, 4);
    const rest = sorted.filter((n) => !finalists.includes(n));

    const vote = (id, type) => setNames((ns) => ns.map((n) => {
      if (n.id !== id) return n;
      const heatFn = window.BXheatFromVotes || window.BXheatFromScore;
      if (type === 'star') {
        const sl = !n.shortlisted; const up = n.counts.up || 0, down = n.counts.down || 0;
        const score = up * 2 - down * 2 + (sl ? 5 : 0);
        return { ...n, shortlisted: sl, score, heat: heatFn(up, down) };
      }
      if (type !== 'up' && type !== 'down') return n;
      const counts = { ...n.counts, [type]: (n.counts[type] || 0) + 1 };
      const score = (counts.up || 0) * 2 - (counts.down || 0) * 2 + (n.shortlisted ? 5 : 0);
      return { ...n, counts, score, heat: heatFn(counts.up || 0, counts.down || 0) };
    }));

    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="" />
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--text-1)' }}>{project} · Shortlist</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Finalists & top names</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button variant="secondary" size="sm" onClick={() => goto('arena')} iconLeft={<I.ArrowLeft size={16} />}>Back to arena</Button>
            <Button size="sm" onClick={() => goto('report')} iconRight={<I.Layers size={16} />}>Generate report</Button>
          </div>
        </header>

        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '32px 28px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginRight: 4 }}>
              <I.Filter size={13} style={{ verticalAlign: 'middle', marginRight: 6 }} />Sort</span>
            {FILTERS.map((f) => <Chip key={f} selected={filter === f} onClick={() => setFilter(f)}>{f}</Chip>)}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <I.Star size={18} style={{ color: 'var(--heat-warm)' }} />
            <h2 style={{ fontSize: 22 }}>Finalists</h2>
            <Badge tone="fire">{finalists.length}</Badge>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16, marginBottom: 36, justifyItems: 'center' }}>
            {finalists.map((n) => (
              <div key={n.id} className="bx-nc-mount" style={{ position: 'relative' }}>
                <NameCard {...n} scale={1} onVote={(t) => vote(n.id, t)} />
                <button onClick={() => vote(n.id, 'star')} aria-label="Shortlist" data-overlay="1" title={n.shortlisted ? 'Shortlisted' : 'Add to shortlist'} style={{
                  position: 'absolute', top: 12, right: 12, zIndex: 6, width: 34, height: 34, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
                  border: `1px solid ${n.shortlisted ? 'var(--vote-star)' : 'var(--line-2)'}`,
                  background: n.shortlisted ? 'color-mix(in srgb, var(--vote-star) 22%, var(--surface-2))' : 'var(--surface-2)',
                  color: n.shortlisted ? 'var(--vote-star)' : 'var(--text-2)',
                  boxShadow: n.shortlisted ? '0 0 14px color-mix(in srgb, var(--vote-star) 45%, transparent)' : 'none',
                }}>
                  <I.Star size={17} fill={n.shortlisted ? 'var(--vote-star)' : 'none'} />
                </button>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <h2 style={{ fontSize: 20, color: 'var(--text-2)' }}>All names</h2>
            <Badge tone="neutral">{rest.length}</Badge>
          </div>
          <Card style={{ padding: 0, overflow: 'hidden' }}>
            {rest.map((n, i) => (
              <div key={n.id} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 20px', borderTop: i ? '1px solid var(--line-1)' : 'none' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-3)', width: 24 }}>{i + 1}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: 'var(--text-1)', minWidth: 140 }}>{n.name}</span>
                <Badge tone="cyan" mono size="sm">{n.style}</Badge>
                <HeatBadge state={n.heat} size="sm" />
                <span style={{ flex: 1 }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700, color: n.score >= 0 ? 'var(--heat-warm)' : 'var(--cold-cool)' }}>{n.score > 0 ? '+' + n.score : n.score}</span>
                <Button variant="ghost" size="sm" onClick={() => vote(n.id, 'star')} iconLeft={<I.Star size={16} />}>{n.shortlisted ? 'Listed' : 'Shortlist'}</Button>
              </div>
            ))}
          </Card>
        </div>
      </div>
    );
  }

  window.BXShortlist = Shortlist;
})();