/* FutureView · PanteonPuncakDashboard · useAmbientSynth */

function useAmbientSynth() {
  const ctxRef = useRef(null);
  const gainRef = useRef(null);
  const oscsRef = useRef([]);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => () => {
    if (ctxRef.current && ctxRef.current.state !== 'closed') {
      try { ctxRef.current.close(); } catch {}
    }
  }, []);

  const init = () => {
    const Ctx = window.AudioContext || window.webkitAudioContext;
    if (!Ctx) return false;
    const ctx = new Ctx();
    ctxRef.current = ctx;
    const main = ctx.createGain();
    main.gain.value = 0;
    main.connect(ctx.destination);
    gainRef.current = main;

    const delay = ctx.createDelay(2);
    delay.delayTime.value = 0.85;
    const fb = ctx.createGain(); fb.gain.value = 0.55;
    const filter = ctx.createBiquadFilter();
    filter.type = 'lowpass';
    filter.frequency.value = 900;
    delay.connect(fb); fb.connect(delay); delay.connect(filter); filter.connect(main);

    const freqs = [110, 130.81, 164.81, 196, 246.94, 55];
    freqs.forEach((f, i) => {
      const osc = ctx.createOscillator();
      osc.type = i % 2 === 0 ? 'sine' : 'triangle';
      osc.frequency.value = f;
      const g = ctx.createGain(); g.gain.value = 0.14;
      const lfo = ctx.createOscillator();
      lfo.type = 'sine'; lfo.frequency.value = 0.05 + i * 0.015;
      const lfoGain = ctx.createGain(); lfoGain.gain.value = 0.09;
      lfo.connect(lfoGain); lfoGain.connect(g.gain);
      osc.connect(g); g.connect(main); g.connect(delay);
      osc.start(); lfo.start();
      oscsRef.current.push({ osc, lfo });
    });
    main.gain.setTargetAtTime(0.42, ctx.currentTime, 2.2);
    return true;
  };

  const toggle = () => {
    if (isPlaying) {
      if (gainRef.current && ctxRef.current) {
        gainRef.current.gain.setTargetAtTime(0, ctxRef.current.currentTime, 1);
        setTimeout(() => {
          if (ctxRef.current && ctxRef.current.state === 'running') {
            ctxRef.current.suspend();
          }
        }, 1400);
      }
      setIsPlaying(false);
    } else {
      if (!ctxRef.current) {
        if (!init()) return;
      } else {
        ctxRef.current.resume();
        gainRef.current?.gain.setTargetAtTime(0.42, ctxRef.current.currentTime, 1.5);
      }
      setIsPlaying(true);
    }
  };

  return { isPlaying, toggle };
}

function FutureView() {
  const { isPlaying, toggle } = useAmbientSynth();

  return (
    <section className="view" aria-labelledby="future-title">
      <div className="future">
        <div className="future__bg" aria-hidden="true">
          <div className="future__bg-glow future__bg-glow--1" />
          <div className="future__bg-glow future__bg-glow--2" />
          <div className="future__bg-grid" />
        </div>

        <div className="future__inner">
          <header className="future__head fade-up">
            <div className="future__chip">
              <Icons.Sparkles size={12} />
              Esei Masa Hadapan
            </div>
            <h1 id="future-title" className="future__h1">
              Menggubah Simfoni Berjiwa Malaysia Menuju <span className="glow">2065</span>
            </h1>
            <div className="future__rule" />
            <button onClick={toggle} className="future__synth-btn" aria-pressed={isPlaying}>
              {isPlaying
                ? <><Icons.Volume size={14} /> Hentikan Simfoni</>
                : <><Icons.VolumeOff size={14} /> Aktifkan Simfoni 2065</>
              }
            </button>
          </header>

          <PanteonPuncakDashboard />

          <FutureSection
            title="Gema Warisan di Ambang Senjakala Digital"
            Icon={Icons.Shield}
            paragraphs={[
              'Selama hampir empat dekad, tiga nota keramat yang membuka tirai Anugerah Juara Lagu (AJL) bukan sekadar alunan melodi; ia adalah degup jantung budaya sebuah negara. Pentasnya telah menjadi sebuah cermin agung, sebuah arkib sonik yang merakamkan setiap riak zaman, daripada gemerlap pop 80-an, raungan rock kapak, hingga kebangkitan Irama Malaysia yang memartabatkan warisan.',
              'Namun, naratif gemilang ini kini tiba di babak yang paling genting. Industri muzik Malaysia tidak lagi berdiri di persimpangan, tetapi tercegat di pinggir sebuah jurang perubahan yang radikal. Dalam ekosistem digital di mana algoritma menabalkan melodi 15 saat, satu soalan fundamental kini bergema: apakah lagi nilai sebenar sebuah karya muzik?'
            ]}
          />

          <FutureSection
            title="Simfoni Hibrid: Seniman, Algoritma, dan Jiwa Nusantara"
            Icon={Icons.Brain}
            paragraphs={[
              'Untuk membayangkan simfoni Malaysia 40 tahun akan datang, kita harus melihat melangkaui pentas AJL hari ini. Menjelang 2065, perdebatan lapuk antara manusia dan mesin akan reda, digantikan oleh sebuah kenyataan harmoni: kolaborasi antara seniman dan AI sebagai rakan kongsi kreatif yang berdialog dengan komposer untuk menemui progresi kord yang belum pernah terfikirkan.',
              'Serentak dengan itu, di tengah-tengah arus globalisasi, akan lahir sebuah gerakan penentangan yang berakar umbi. Masa depan muzik Malaysia tidak akan ditemui dengan meniru K-Pop atau Pop Barat. Sebaliknya, ia terletak pada kebijaksanaan untuk mengadunkan DNA tempatan dengan cita-cita global — sebuah gelombang Nusantara-Pop yang autentik.'
            ]}
          />

          <FutureSection
            title="Ekonomi Jiwa: Dari Royalti ke Sebuah Perikatan"
            Icon={Icons.Coins}
            paragraphs={[
              'Revolusi ini tidak hanya terhenti di studio rakaman; ia akan merombak sepenuhnya model ekonomi kreatif. Model penstriman yang kita junjung hari ini akan dilihat sebagai sebuah artifak usang. Artis yang akan bertahan dan berkembang menjelang 2065 adalah mereka yang telah berevolusi menjadi usahawan budaya, membina ekosistem ekonomi mereka sendiri.',
              'Dalam ekosistem ini, peminat bukan lagi pengguna pasif, tetapi pelabur dan rakan kongsi. Hubungan antara artis dan peminat akan berubah daripada sebuah transaksi kepada sebuah perikatan jiwa, di mana sokongan diukur melalui kesetiaan dan penglibatan yang mendalam.'
            ]}
          />

          <FutureSection
            title="Menggubah Takdir: Pentas Baharu untuk Jiwa Zaman"
            Icon={Icons.Globe}
            paragraphs={[
              'Dalam realiti baharu ini, di manakah letaknya AJL? Untuk terus bernafas dan relevan, ia mesti berevolusi menjadi dua perkara serentak: seorang kurator inovasi yang berani dan seorang penjaga warisan yang setia. Mungkin AJL masa depan tidak lagi memahkotakan satu Juara Lagu, tetapi meraikan sebuah spektrum kecemerlangan.',
              'Pencarian untuk Juara Lagu tidak akan pernah berakhir, tetapi takrifannya akan sentiasa diperbaharui. Ia bukan lagi tentang mencari satu lagu terunggul, tetapi sebuah perjuangan berterusan untuk menangkap dan memateri jiwa zaman dalam sebuah simfoni yang tidak pernah berhenti berevolusi.'
            ]}
          />
        </div>
      </div>
    </section>
  );
}

function FutureSection({ title, Icon, paragraphs }) {
  return (
    <div className="future__section fade-up">
      <div className="future__section-head">
        <div className="future__section-icon"><Icon size={18} /></div>
        <h2 className="future__section-title">{title}</h2>
      </div>
      <div className="future__section-body">
        {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </div>
  );
}

/* ============================================================= */
/*                  Panteon Puncak — Radar Chart                  */
/* ============================================================= */

function PanteonPuncakDashboard() {
  const [songA, setSongA] = useState('cindai');
  const [songB, setSongB] = useState('hudhud');
  const [selectedMetric, setSelectedMetric] = useState(null);

  const a = useMemo(() => window.topSongs.find((s) => s.id === songA), [songA]);
  const b = useMemo(() => window.topSongs.find((s) => s.id === songB), [songB]);

  return (
    <div className="panteon fade-up">
      <div className="panteon__head">
        <h2 className="panteon__title">
          <Icons.Trophy size={20} style={{ color: 'var(--gold)' }} />
          Panteon Puncak — 10 Lagu Terhebat
        </h2>
        <p className="panteon__lede">
          Menerusi metodologi <span style={{ color: 'var(--gold)' }}>Z-score Blended</span>,
          kami merungkai misteri di sebalik kemenangan pelbagai karya yang dijulang sebagai
          juara AJL. Berbekalkan lima metrik &mdash; Gubahan, Lirik, Inovasi, Impak Budaya,
          dan Persembahan.
        </p>
      </div>
      <div className="panteon__grid">
        <div className="panteon__panel">
          <div className="panteon__selector" style={{ color: 'var(--era-4)' }}>
            <div className="panteon__selector-label">
              <span className="panteon__dot" style={{ background: 'var(--era-4)', boxShadow: '0 0 8px var(--era-4)' }} />
              <span>Bandingkan Lagu A</span>
            </div>
            <select className="panteon__select" value={songA} onChange={(e) => setSongA(e.target.value)}>
              {window.topSongs.map((s) => (
                <option key={s.id} value={s.id}>#{s.rank} · {s.title}</option>
              ))}
            </select>
            <div className="panteon__detail">
              <strong>{a.artist} ({a.year})</strong>
              {a.description}
              <div className="panteon__zscore">Z-SCORE · {a.zScore.toFixed(1)}</div>
            </div>
          </div>

          <div className="panteon__selector" style={{ color: '#C84B6A' }}>
            <div className="panteon__selector-label">
              <span className="panteon__dot" style={{ background: '#C84B6A', boxShadow: '0 0 8px #C84B6A' }} />
              <span>Bandingkan Lagu B</span>
            </div>
            <select className="panteon__select" value={songB} onChange={(e) => setSongB(e.target.value)}>
              {window.topSongs.filter((s) => s.id !== songA).map((s) => (
                <option key={s.id} value={s.id}>#{s.rank} · {s.title}</option>
              ))}
            </select>
            <div className="panteon__detail">
              <strong>{b.artist} ({b.year})</strong>
              {b.description}
              <div className="panteon__zscore">Z-SCORE · {b.zScore.toFixed(1)}</div>
            </div>
          </div>
        </div>

        <div className="panteon__chart">
          <RadarChart
            songA={a}
            songB={b}
            colorA="var(--era-4)"
            colorB="#C84B6A"
            onMetricClick={(m) => setSelectedMetric(m)}
          />
        </div>
      </div>

      {selectedMetric && (
        <MetricModal
          metric={selectedMetric}
          a={a} b={b}
          onClose={() => setSelectedMetric(null)}
        />
      )}
    </div>
  );
}

function RadarChart({ songA, songB, colorA, colorB, onMetricClick }) {
  const w = 460, h = 420;
  const cx = w / 2, cy = h / 2 + 6;
  const r = 150;
  const metrics = Object.keys(songA.metrics);
  const angleAt = (i) => (Math.PI * 2 * i) / metrics.length - Math.PI / 2;
  const pointAt = (i, val) => {
    const a = angleAt(i);
    const ratio = (val - 60) / 40; // domain 60-100
    return [cx + Math.cos(a) * r * ratio, cy + Math.sin(a) * r * ratio];
  };
  const labelAt = (i) => {
    const a = angleAt(i);
    return [cx + Math.cos(a) * (r + 28), cy + Math.sin(a) * (r + 22)];
  };

  const polygon = (song, color, fillOpacity = 0.18) => {
    const pts = metrics.map((m, i) => pointAt(i, song.metrics[m]).join(','));
    return (
      <g>
        <polygon points={pts.join(' ')} fill={color} fillOpacity={fillOpacity} stroke={color} strokeWidth="1.8" />
        {metrics.map((m, i) => {
          const [px, py] = pointAt(i, song.metrics[m]);
          return (
            <circle
              key={m + color}
              cx={px} cy={py} r="5"
              fill={color}
              style={{ cursor: 'pointer' }}
              onClick={() => onMetricClick(m)}
            />
          );
        })}
      </g>
    );
  };

  return (
    <div style={{ width: '100%', maxWidth: 500 }}>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        {/* concentric rings */}
        {[0.25, 0.5, 0.75, 1].map((s) => (
          <polygon
            key={s}
            fill="none" stroke="rgba(111,176,181,0.12)" strokeWidth="1"
            points={metrics.map((_, i) => {
              const a = angleAt(i);
              return [cx + Math.cos(a) * r * s, cy + Math.sin(a) * r * s].join(',');
            }).join(' ')}
          />
        ))}
        {/* radial axes */}
        {metrics.map((m, i) => {
          const a = angleAt(i);
          const [ex, ey] = [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
          return (
            <line
              key={m}
              x1={cx} y1={cy} x2={ex} y2={ey}
              stroke="rgba(111,176,181,0.08)" strokeWidth="1"
            />
          );
        })}
        {polygon(songB, colorB, 0.14)}
        {polygon(songA, colorA, 0.22)}
        {metrics.map((m, i) => {
          const [lx, ly] = labelAt(i);
          return (
            <text
              key={m + 'label'}
              x={lx} y={ly}
              fontFamily="var(--font-mono)" fontSize="10.5" fontWeight="700"
              fill="var(--ivory-80)"
              textAnchor="middle"
              letterSpacing="0.12em"
              style={{ textTransform: 'uppercase', cursor: 'pointer' }}
              onClick={() => onMetricClick(m)}
            >{m.replace('_', ' ')}</text>
          );
        })}
      </svg>
      <p className="radar-tip" style={{ textAlign: 'center', marginTop: 16 }}>
        Klik metrik untuk perbandingan nilai
      </p>
    </div>
  );
}

function MetricModal({ metric, a, b, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div className="drawer-scrim" onClick={onClose} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: 'var(--ink-raised)',
          border: '1px solid rgba(184,148,90,0.5)',
          padding: 28, maxWidth: 380, width: '100%',
          boxShadow: '0 32px 80px -16px rgba(0,0,0,0.8)'
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--ink-line)', paddingBottom: 16, marginBottom: 22 }}>
          <h3 style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700,
            letterSpacing: 'var(--tr-eyebrow)', textTransform: 'uppercase',
            color: 'var(--gold)', margin: 0
          }}>{metric}</h3>
          <button onClick={onClose} aria-label="Tutup" style={{ color: 'var(--ivory-60)' }}>
            <Icons.Close size={14} />
          </button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--era-4)', letterSpacing: 0.14 + 'em', textTransform: 'uppercase', marginBottom: 6 }}>{a.title}</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--ivory)' }}>
              {a.metrics[metric]}<span style={{ fontSize: 12, color: 'var(--ivory-40)', marginLeft: 4 }}>/ 100</span>
            </div>
          </div>
          <div style={{ width: 1, background: 'var(--ink-line)' }} />
          <div style={{ flex: 1, textAlign: 'right' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: '#C84B6A', letterSpacing: 0.14 + 'em', textTransform: 'uppercase', marginBottom: 6 }}>{b.title}</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--ivory)' }}>
              {b.metrics[metric]}<span style={{ fontSize: 12, color: 'var(--ivory-40)', marginLeft: 4 }}>/ 100</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FutureView, PanteonPuncakDashboard });