/* HallOfFameView · InsightsView */

function HallOfFameView() {
  const [expandedId, setExpandedId] = useState(null);
  const [chamberId, setChamberId] = useState('komposer');

  const chambers = [
    {
      id: 'komposer',
      label: 'Komposer',
      sub: 'Pencipta Melodi',
      role: 'Komposer',
      title: 'Dewan Komposer',
      body: 'Mereka yang menulis nota pertama. Tanpa melodi yang tersusun di kepala seorang komposer, tiada lagu yang menjadi sejarah. Inilah dewan untuk para pengarah orkestra di sebalik sebuah negara — daripada Manan Ngah pada 1986 hingga Hael Husaini & Ezra Kong pada dekad keempat.',
      pull: 'Sebuah lagu hidup dua kali — pertama di kepala komposer, kemudian di hati negara.'
    },
    {
      id: 'lirik',
      label: 'Penulis Lirik',
      sub: 'Penyair Bahasa',
      role: 'Penulis Lirik',
      title: 'Dewan Penulis Lirik',
      body: 'Penyair yang menukar bunyi menjadi makna. Daripada metafora alam Habsah Hassan, falsafah Loloq, sehingga keberanian moden Aina Abdul — dewan ini meraikan tukang yang membentuk bagaimana sebuah generasi bercakap tentang cinta, takdir, dan jati diri.',
      pull: 'Bahasa Melayu di pentas AJL bukan sekadar lirik; ia adalah arkib bahasa hati negara.'
    },
    {
      id: 'penyanyi',
      label: 'Penyanyi',
      sub: 'Pemilik Pentas',
      role: 'Penyanyi',
      title: 'Dewan Penyanyi, Kumpulan & Duo',
      body: 'Suara yang menjadikan lagu sebagai milik bersama. Daripada vokal jernih Siti Nurhaliza ke ledakan rock Search, daripada bisikan Adibah Noor ke ketegasan Joe Flizzow — dewan ini meraikan mereka yang menyampaikan setiap nota dengan jiwa yang menghuni bait-bait tersebut.',
      pull: 'Vokal yang lantang tidak semestinya menang. Vokal yang jujur sentiasa diingati.'
    },
    {
      id: 'persembahan',
      label: 'Persembahan',
      sub: 'Arkitek Visual',
      role: 'Visual',
      title: 'Dewan Persembahan',
      body: 'Mereka yang menjadikan pentas sebagai kanvas. Setiap dekad melahirkan seniman yang melampaui nyanyian — koreografi M. Nasir dalam *Hud Hud*, busana avant-garde Aina Abdul, teaterikal Noraniza Idris. Dewan ini menghormati seni mendalangi tiga minit yang tidak akan dilupakan.',
      pull: 'Pentas AJL bukan sekadar tempat menyanyi. Ia adalah dewan persembahan empat dekad.'
    }
  ];

  const chamber = chambers.find((c) => c.id === chamberId);
  const filtered = useMemo(
    () => window.legendsData.filter((l) => l.role.includes(chamber.role)),
    [chamber]
  );

  return (
    <section className="view" aria-labelledby="hof-title">
      <div className="view__inner hof">
        <div
          className="view__bg-number"
          style={{ fontSize: 'clamp(120px, 16vw, 280px)' }}
          aria-hidden="true"
        >
          KEMASYHURAN
        </div>

        <header className="hof__head fade-up">
          <p className="eyebrow">Dewan Kemasyhuran AJL · 1986–2025</p>
          <h2 id="hof-title" className="hof__title">
            Empat Dewan, <em>Empat Seni</em>, Satu Warisan
          </h2>
          <p className="hof__lede">
            Tidak semua warisan ditulis oleh pemegang mikrofon. Anugerah Juara Lagu
            dibentuk oleh empat tangan kreatif &mdash; komposer, penulis lirik,
            penyanyi, dan seniman pentas. Inilah dewan untuk masing-masing.
          </p>
        </header>

        <nav className="dewan-nav" aria-label="Dewan Kemasyhuran">
          {chambers.map((c, i) => {
            const count = window.legendsData.filter((l) => l.role.includes(c.role)).length;
            return (
              <button
                key={c.id}
                className={'dewan-tab' + (chamberId === c.id ? ' dewan-tab--active' : '')}
                onClick={() => { setChamberId(c.id); setExpandedId(null); }}
                aria-pressed={chamberId === c.id}
              >
                <span className="dewan-tab__no">Dewan {String(i + 1).padStart(2, '0')}</span>
                <span className="dewan-tab__count">{count}</span>
                <h3 className="dewan-tab__title">{c.label}</h3>
                <span className="dewan-tab__sub">{c.sub}</span>
              </button>
            );
          })}
        </nav>

        <div className="dewan-room fade-in" key={chamberId}>
          <aside className="dewan-room__intro">
            <span className="dewan-room__eyebrow">Dewan {String(chambers.findIndex((c) => c.id === chamberId) + 1).padStart(2, '0')} · {chamber.label}</span>
            <h3 className="dewan-room__title">{chamber.title}</h3>
            <p className="dewan-room__body">{chamber.body}</p>
            <blockquote className="dewan-room__pull">&ldquo;{chamber.pull}&rdquo;</blockquote>
          </aside>

          <div className="hof__grid">
            {filtered.map((legend, i) => (
              <LegendCard
                key={legend.id}
                legend={legend}
                open={expandedId === legend.id}
                onToggle={() =>
                  setExpandedId(expandedId === legend.id ? null : legend.id)
                }
                delay={Math.min(i, 9) * 60}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function LegendCard({ legend, open, onToggle, delay }) {
  return (
    <article className="legend fade-up" style={{ animationDelay: `${delay}ms` }}>
      <div className="legend__portrait" onClick={onToggle} role="button" tabIndex={0}
           onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onToggle(); }}>
        <div className="legend__placeholder">{legend.initials}</div>
        <div className="legend__portrait-info">
          <div>
            <span className="legend__focus">{legend.focus}</span>
            <h3 className="legend__name">{legend.name}</h3>
          </div>
          <button
            className={'legend__toggle' + (open ? ' legend__toggle--open' : '')}
            onClick={(e) => { e.stopPropagation(); onToggle(); }}
            aria-label={open ? 'Tutup butiran' : 'Buka butiran'}
          >
            <Icons.ChevronDown size={14} />
          </button>
        </div>
      </div>

      <div className={'legend__expand' + (open ? ' legend__expand--open' : '')}>
        <div className="legend__expand-inner">
          <div className="legend__roles">
            {legend.role.map((r) => (
              <span key={r} className="legend__role">
                <RoleIcon role={r} />
                {r}
              </span>
            ))}
          </div>
          <p className="legend__bio">{legend.bio}</p>
          <div className="legend__credits-label">Peta Sumbangan Terbaik</div>
          <div>
            {legend.credits.map((c, i) => (
              <div key={i} className="legend__credit">
                <span className="legend__credit-year">{c.year}</span>
                <span className="legend__credit-title">{c.title}</span>
                <span className="legend__credit-ach">{c.achievement}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}

function RoleIcon({ role }) {
  const r = role.toLowerCase();
  if (r.includes('komposer')) return <Icons.Music size={11} />;
  if (r.includes('penyanyi')) return <Icons.Mic size={11} />;
  if (r.includes('lirik')) return <Icons.Feather size={11} />;
  return <Icons.Award size={11} />;
}

/* ============================================================= */
/*                          InsightsView                          */
/* ============================================================= */

function InsightsView() {
  const [activeDecade, setActiveDecade] = useState(0);

  // Hand-rolled genre evolution data — % of an era leaning toward each genre
  const genreData = [
    { era: 'Era Perintis (86–95)',   Balada: 50, Rock: 25, Irama: 18, Hip: 7 },
    { era: 'Prasasti Emas (96–05)',  Balada: 55, Rock: 12, Irama: 28, Hip: 5 },
    { era: 'Revolusi Muzik (06–15)', Balada: 40, Rock: 30, Irama: 8,  Hip: 22 },
    { era: 'Jati Diri (16–25)',      Balada: 38, Rock: 14, Irama: 12, Hip: 36 }
  ];

  const awardPriority = [
    { decade: '86–95', persembahan: 90, vokal: 12 },
    { decade: '96–05', persembahan: 85, vokal: 42 },
    { decade: '06–15', persembahan: 70, vokal: 85 },
    { decade: '16–25', persembahan: 80, vokal: 98 }
  ];

  const themeBreakdown = [
    { label: 'Cinta & Patah Hati', pct: 64 },
    { label: 'Kekuatan Diri', pct: 15 },
    { label: 'Ketuhanan', pct: 12 },
    { label: 'Harapan', pct: 9 }
  ];

  const decades = [
    { year: '1980s', title: 'Asas & Instrumental',
      desc: 'Fokus kepada kualiti vokal murni dan band iringan langsung. Penataan cahaya asas dengan latar belakang statik.',
      meta: 'Set dewan ringkas · Orkestra RTM · Minimalis' },
    { year: '1990s', title: 'Era Emas Orkestrasi',
      desc: 'Pengenalan pemuzik iringan simfoni berskala besar. Prop fizikal dan koreografi mula mengambil tempat.',
      meta: 'Live Orkestra · Prop fizikal (Cindai) · Warna primer' },
    { year: '2000s', title: 'Transisi Milenium',
      desc: 'Skrin LED menjadi kanvas utama menggantikan prop fizikal. Konsep penceritaan linear mulai popular mengiringi penyanyi.',
      meta: 'Skrin LED resolusi rendah · Koreografi · Piroteknik asas' },
    { year: '2010s', title: 'Teatrikal & Prop Mega',
      desc: 'Pentas bertukar menjadi panggung teater. Replika gergasi, pelakon tambahan, dan elemen kejutan (wirework).',
      meta: 'Prop gergasi (Awan Nano) · Wirework · Set 3D' },
    { year: '2020s', title: 'Digital & Imersif',
      desc: 'Integrasi Augmented Reality, kinetik lighting, dan laser precision. Simbiosis antara manusia dan algoritma visual.',
      meta: 'AR / MR · Mapping unjuran · Lasers & Kinetic' }
  ];

  return (
    <section className="view" aria-labelledby="insights-title">
      <div className="view__inner insights">
        <div
          className="view__bg-number"
          style={{ fontSize: 'clamp(120px, 14vw, 240px)' }}
          aria-hidden="true"
        >
          DATA &amp; INSIGHTS
        </div>

        <div className="insights__head fade-up">
          <p className="eyebrow">Blueprint Juara Lagu</p>
          <h2 id="insights-title" className="insights__title">
            Membaca <em>Evolusi</em> Muzik
          </h2>
          <p className="insights__lede">
            Menganalisis 40 tahun sejarah melalui lensa data. Daripada dominasi balada
            90-an hingga ledakan algoritma digital, mari singkap corak bunyi Malaysia.
          </p>
        </div>

        <div className="card fade-up delay-1">
          <div className="card__head">
            <span className="card__head-icon"><Icons.BarChart size={16} /></span>
            <h3 className="card__head-title">Evolusi Genre (Empat Penggal AJL)</h3>
          </div>
          <GenreStackedArea data={genreData} />
          <div className="legend-row">
            <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: 'var(--ivory-80)' }} />Balada &amp; Pop</span>
            <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: 'var(--era-1)' }} />Irama Malaysia</span>
            <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: 'var(--era-3)' }} />Rock &amp; Indie</span>
            <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: '#C84B3A' }} />Hip-Hop &amp; Digital</span>
          </div>
        </div>

        <div className="card__grid-2">
          <div className="card fade-up delay-2">
            <div className="card__head">
              <span className="card__head-icon"><Icons.Database size={16} /></span>
              <h3 className="card__head-title">Tema Lirik Pilihan Majoriti</h3>
            </div>
            <div className="theme-block">
              {themeBreakdown.map((t, i) => (
                <div key={i} className="theme-tile">
                  <span className="theme-tile__pct">{t.pct}%</span>
                  <span className="theme-tile__label">{t.label}</span>
                  <span className="theme-tile__bar" style={{ width: `${t.pct}%` }} />
                </div>
              ))}
            </div>
          </div>

          <div className="card fade-up delay-2">
            <div className="card__head">
              <span className="card__head-icon"><Icons.Trend size={16} /></span>
              <h3 className="card__head-title">Anjakan Prioriti Anugerah</h3>
            </div>
            <p style={{ color: 'var(--ivory-60)', fontSize: 13.5, lineHeight: 1.55, margin: '0 0 20px', maxWidth: 360 }}>
              Evolusi kepentingan persembahan vs. vokal terbaik merentas dekad
              <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ivory-40)' }}> (indeks 0–100)</span>.
            </p>
            <AwardPriorityChart data={awardPriority} />
          </div>
        </div>

        <div className="card fade-up delay-3">
          <div className="card__head">
            <span className="card__head-icon"><Icons.Monitor size={16} /></span>
            <h3 className="card__head-title">Evolusi Persembahan Visual</h3>
          </div>
          <div className="staging">
            <div className="staging__decades">
              {decades.map((d, i) => (
                <button
                  key={i}
                  className={'staging__decade' + (activeDecade === i ? ' staging__decade--active' : '')}
                  onClick={() => setActiveDecade(i)}
                >
                  <span>{d.year}</span>
                  <Icons.ChevronRight size={14} />
                </button>
              ))}
            </div>
            <div className="staging__panel">
              <h4 className="staging__panel-title">{decades[activeDecade].title}</h4>
              <p className="staging__panel-desc">{decades[activeDecade].desc}</p>
              <div className="staging__panel-meta">
                <strong>Teknik Staging</strong>
                {decades[activeDecade].meta}
              </div>
              <div className="staging__thumbs">
                {[0, 1, 2].map((i) => (
                  <div key={i} className="staging__thumb">
                    Footage {decades[activeDecade].year} · {i + 1}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Stacked area chart — pure SVG */
function GenreStackedArea({ data }) {
  const w = 800, h = 320, pad = { top: 16, right: 20, bottom: 40, left: 36 };
  const innerW = w - pad.left - pad.right;
  const innerH = h - pad.top - pad.bottom;
  const keys = ['Balada', 'Irama', 'Rock', 'Hip'];
  const colors = {
    Balada: 'rgba(244,239,230,0.85)',
    Irama:  'var(--era-1)',
    Rock:   'var(--era-3)',
    Hip:    '#C84B3A'
  };
  const fillColors = {
    Balada: 'rgba(244,239,230,0.18)',
    Irama:  'rgba(184,148,90,0.30)',
    Rock:   'rgba(90,139,176,0.30)',
    Hip:    'rgba(200,75,58,0.30)'
  };
  // Normalize stacked
  const stacked = data.map((d) => {
    let cum = 0;
    const total = keys.reduce((sum, k) => sum + d[k], 0);
    return keys.reduce((acc, k) => {
      const v = (d[k] / total) * 100;
      const start = cum;
      cum += v;
      acc[k] = { start, end: cum };
      return acc;
    }, {});
  });
  const xAt = (i) => pad.left + (i / (data.length - 1)) * innerW;
  const yAt = (val) => pad.top + ((100 - val) / 100) * innerH;

  const layer = (key, idx) => {
    let topPath = `M ${xAt(0)},${yAt(stacked[0][key].end)}`;
    for (let i = 1; i < data.length; i++) topPath += ` L ${xAt(i)},${yAt(stacked[i][key].end)}`;
    let bottomPath = '';
    for (let i = data.length - 1; i >= 0; i--) bottomPath += ` L ${xAt(i)},${yAt(stacked[i][key].start)}`;
    return (
      <g key={key}>
        <path d={topPath + bottomPath + ' Z'} fill={fillColors[key]} stroke={colors[key]} strokeWidth="1.5" />
      </g>
    );
  };

  return (
    <div style={{ width: '100%', overflowX: 'auto' }}>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', minWidth: 480, height: 320, display: 'block' }}>
        {/* Y gridlines */}
        {[0, 25, 50, 75, 100].map((g) => (
          <g key={g}>
            <line x1={pad.left} x2={w - pad.right} y1={yAt(g)} y2={yAt(g)} stroke="var(--ivory-10)" strokeDasharray="2,3" />
            <text x={pad.left - 8} y={yAt(g) + 3} fontFamily="var(--font-mono)" fontSize="10" fill="var(--ivory-40)" textAnchor="end">{g}%</text>
          </g>
        ))}
        {keys.map((k, i) => layer(k, i))}
        {/* X labels */}
        {data.map((d, i) => (
          <text
            key={d.era}
            x={xAt(i)} y={h - pad.bottom + 22}
            fontFamily="var(--font-mono)" fontSize="10"
            fill="var(--ivory-60)" textAnchor="middle"
            letterSpacing="0.1em" style={{ textTransform: 'uppercase' }}
          >
            {d.era.split(' (')[1].replace(')', '')}
          </text>
        ))}
        {/* axes */}
        <line x1={pad.left} x2={w - pad.right} y1={h - pad.bottom} y2={h - pad.bottom} stroke="var(--ivory-20)" />
      </svg>
    </div>
  );
}

function AwardPriorityChart({ data }) {
  const w = 380, h = 220, pad = { top: 12, right: 16, bottom: 36, left: 28 };
  const innerW = w - pad.left - pad.right;
  const innerH = h - pad.top - pad.bottom;
  const xAt = (i) => pad.left + (i / (data.length - 1)) * innerW;
  const yAt = (v) => pad.top + ((100 - v) / 100) * innerH;

  const line = (key, color) => {
    let p = `M ${xAt(0)},${yAt(data[0][key])}`;
    for (let i = 1; i < data.length; i++) p += ` L ${xAt(i)},${yAt(data[i][key])}`;
    return (
      <g>
        <path d={p} fill="none" stroke={color} strokeWidth="2" />
        {data.map((d, i) => (
          <circle key={i} cx={xAt(i)} cy={yAt(d[key])} r="3.5" fill={color} />
        ))}
      </g>
    );
  };

  return (
    <div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 220, display: 'block' }}>
        {[0, 50, 100].map((g) => (
          <g key={g}>
            <line x1={pad.left} x2={w - pad.right} y1={yAt(g)} y2={yAt(g)} stroke="var(--ivory-10)" strokeDasharray="2,3" />
            <text x={pad.left - 6} y={yAt(g) + 3} fontFamily="var(--font-mono)" fontSize="9" fill="var(--ivory-40)" textAnchor="end">{g}</text>
          </g>
        ))}
        {line('persembahan', 'var(--gold)')}
        {line('vokal', 'var(--era-3)')}
        {data.map((d, i) => (
          <text
            key={d.decade}
            x={xAt(i)} y={h - pad.bottom + 18}
            fontFamily="var(--font-mono)" fontSize="9"
            fill="var(--ivory-60)" textAnchor="middle"
          >{d.decade}</text>
        ))}
      </svg>
      <div className="legend-row" style={{ marginTop: 10 }}>
        <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: 'var(--gold)' }} />Persembahan</span>
        <span className="legend-row__item"><span className="legend-row__swatch" style={{ background: 'var(--era-3)' }} />Vokal Terbaik</span>
      </div>
    </div>
  );
}

Object.assign(window, { HallOfFameView, InsightsView });