'use client';
import { useEffect, useRef, useState } from 'react';
import AliranKomen from './AliranKomen';
import KiraanHidup from './KiraanHidup';
import { VIDEO } from '@/data/video';

export default function PemainTikTok({
  buka, tutup, mulaDari = 0,
}: { buka: boolean; tutup: () => void; mulaDari?: number }) {
  const [aktif, setAktif] = useState(mulaDari);
  const [masa, setMasa] = useState(0);
  const [main, setMain] = useState(true);
  const [hati, setHati] = useState(false);
  const refs = useRef<(HTMLVideoElement | null)[]>([]);
  const bekas = useRef<HTMLDivElement>(null);

  // Kunci scroll badan bila pemain dibuka
  useEffect(() => {
    document.body.style.overflow = buka ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [buka]);

  // Esc untuk tutup
  useEffect(() => {
    if (!buka) return;
    const f = (e: KeyboardEvent) => e.key === 'Escape' && tutup();
    window.addEventListener('keydown', f);
    return () => window.removeEventListener('keydown', f);
  }, [buka, tutup]);

  // Main video aktif, henti yang lain
  useEffect(() => {
    refs.current.forEach((v, i) => {
      if (!v) return;
      if (i === aktif && buka && main) { v.currentTime = v.currentTime || 0; v.play().catch(() => {}); }
      else { v.pause(); }
    });
    setMasa(0);
  }, [aktif, buka, main]);

  if (!buka) return null;
  const v = VIDEO[aktif];

  const ketukDua = () => {
    setHati(true);
    setTimeout(() => setHati(false), 700);
  };

  return (
    <div className="fixed inset-0 z-[90] bg-black" role="dialog" aria-modal="true" aria-label="Video produk">
      <button
        onClick={tutup}
        aria-label="Tutup video"
        className="absolute left-4 top-4 z-30 grid h-10 w-10 place-items-center rounded-full bg-black/50 text-2xl text-white"
      >
        ×
      </button>

      <div
        ref={bekas}
        onScroll={(e) => {
          const i = Math.round(e.currentTarget.scrollTop / e.currentTarget.clientHeight);
          if (i !== aktif && VIDEO[i]) setAktif(i);
        }}
        className="feed-tiktok sembunyi-scroll h-full overflow-y-scroll"
      >
        {VIDEO.map((item, i) => (
          <section key={item.id} className="relative grid h-full w-full place-items-center">
            <video
              ref={(el) => { refs.current[i] = el; }}
              src={item.src}
              poster={item.poster}
              playsInline
              loop
              onTimeUpdate={(e) => i === aktif && setMasa(e.currentTarget.currentTime)}
              onClick={() => setMain((m) => !m)}
              onDoubleClick={ketukDua}
              className="h-full w-full object-contain"
            />

            {hati && i === aktif && (
              <span className="pointer-events-none absolute animate-naik text-7xl">❤️</span>
            )}

            {!main && i === aktif && (
              <span className="pointer-events-none absolute text-6xl text-white/80">▶</span>
            )}

            {/* Lajur tindakan kanan */}
            <div className="absolute bottom-40 right-3 flex flex-col items-center gap-5 text-white">
              <button className="flex flex-col items-center" aria-label="Suka">
                <span className="text-3xl">❤️</span>
                <span className="text-xs font-semibold">
                  <KiraanHidup mula={item.suka} aktif={i === aktif} />
                </span>
              </button>
              <div className="flex flex-col items-center">
                <span className="text-3xl">💬</span>
                <span className="text-xs font-semibold">{item.komen.length * 106}</span>
              </div>
              <div className="flex flex-col items-center">
                <span className="text-3xl">↗</span>
                <span className="text-xs font-semibold">{item.kongsi}</span>
              </div>
            </div>

            {/* Kapsyen + komen + CTA */}
            <div className="absolute inset-x-0 bottom-0 space-y-3 bg-gradient-to-t from-black/85 to-transparent px-4 pb-5 pt-16">
              <p className="text-sm font-semibold text-white">@belalangdewa.my</p>
              <p className="max-w-[18rem] text-sm text-white/90">{item.kapsyen}</p>
              {i === aktif && <AliranKomen komen={item.komen} masa={masa} />}
              <a href="#pakej" onClick={tutup} className="butang-utama w-full">
                Beli sekarang
              </a>
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}