"use client";

import SiteHeader from "./SiteHeader";
import SiteFooter from "./SiteFooter";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { useCallback, useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, ExternalLink, Radio, ShieldCheck, Twitch, UsersRound } from "lucide-react";
import type { CommunityStreamerResponse } from "../lib/streamers";

const reveal = {
  initial: { opacity: 0, y: 22 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.12 },
  transition: { duration: 0.55 },
};

export default function StreamerDirectory() {
  const [data, setData] = useState<CommunityStreamerResponse | null>(null);

  const load = useCallback(async () => {
    try {
      const response = await fetch("/api/streamers", { cache: "no-store" });
      setData(await response.json());
    } catch {
      setData({ ok: false, configured: true, count: 0, liveCount: 0, streamers: [], error: "Verbindung fehlgeschlagen" });
    }
  }, []);

  useEffect(() => {
    load();
    const timer = window.setInterval(load, 60_000);
    return () => window.clearInterval(timer);
  }, [load]);

  return (
    <main className="subpage streamer-page">
      <div className="subpage-atmosphere" />
      <SiteHeader />

      <section className="shell streamer-hero">
        <motion.div initial={{opacity:0,y:24}} animate={{opacity:1,y:0}} transition={{duration:.65}} className="streamer-hero-copy">
          <Link href="/" className="back-link"><ArrowLeft size={15}/> Zur Startseite</Link>
          <span className="kicker">BEXOGAMES CREATOR</span>
          <h1>Unsere Streamer.<br/><span className="gradient-text">Live, wenn sie live sind.</span></h1>
          <p>Hier findest du die offiziellen BexoGames-Streamer. Die Liste kommt direkt aus unserer Discord-Streamer-Rolle und wird mit Twitch abgeglichen.</p>
          <div className="streamer-stats">
            <span><strong>{data?.count ?? "—"}</strong> Streamer</span>
            <span className={data?.liveCount ? "is-live" : ""}><strong>{data?.liveCount ?? "—"}</strong> gerade live</span>
          </div>
        </motion.div>
        <motion.div initial={{opacity:0,scale:.94}} animate={{opacity:1,scale:1}} transition={{duration:.7,delay:.08}} className="streamer-hero-art">
          <Image src="/bexogames-logo.png" alt="BexoGames" width={430} height={430} priority/>
          <div className="creator-orbit"><Twitch size={34}/><span>OFFICIAL CREATOR</span></div>
        </motion.div>
      </section>

      <section className="shell streamer-directory">
        <div className="streamer-directory-head"><div><span className="kicker">COMMUNITY VERIFIED</span><h2>Creator aus unserer Community.</h2></div><p><ShieldCheck size={17}/> Nur Mitglieder mit der offiziellen Streamer-Rolle werden hier angezeigt.</p></div>

        {!data ? (
          <div className="streamer-loading"><Radio size={26}/><span>Streamer werden geladen …</span></div>
        ) : data.streamers.length > 0 ? (
          <div className="streamer-grid">
            {data.streamers.map((streamer) => (
              <motion.article {...reveal} key={streamer.discordId} className={`streamer-card ${streamer.isLive ? "streamer-card-live" : ""}`}>
                <div className="streamer-card-inner">
                  <div className="streamer-card-cover">
                    {streamer.isLive && streamer.thumbnailUrl ? <img src={streamer.thumbnailUrl} alt="" /> : streamer.offlineImageUrl ? <img src={streamer.offlineImageUrl} alt="" /> : <div className="streamer-card-cover-fallback"/>}
                    <div className="streamer-card-cover-shade"/>
                    <div className={`stream-status ${streamer.isLive ? "live" : "offline"}`}><i/>{streamer.isLive ? "LIVE" : "OFFLINE"}</div>
                    {streamer.isLive && streamer.viewerCount !== null && <div className="stream-viewers"><UsersRound size={13}/>{streamer.viewerCount.toLocaleString("de-DE")}</div>}
                  </div>
                  <div className="streamer-card-body">
                    <div className="streamer-card-profile">
                      {streamer.profileImageUrl ? <img src={streamer.profileImageUrl} alt={`Profilbild von ${streamer.twitchDisplayName}`} /> : <div className="streamer-avatar-fallback"><Twitch size={22}/></div>}
                      <div><small>@{streamer.twitchLogin}</small><h3>{streamer.twitchDisplayName}</h3></div>
                    </div>
                    {streamer.isLive ? <p className="streamer-title">{streamer.title}</p> : <p className="streamer-title muted">Aktuell nicht live. Schau später wieder vorbei.</p>}
                    <div className="streamer-card-meta"><span>{streamer.isLive ? (streamer.gameName || "Live auf Twitch") : "BexoGames Streamer"}</span><span><ShieldCheck size={13}/> Discord verifiziert</span></div>
                    <a href={streamer.twitchUrl} target="_blank" rel="noopener noreferrer" className={`button ${streamer.isLive ? "primary" : "secondary"}`}>{streamer.isLive ? "Stream ansehen" : "Twitch-Profil"}<ExternalLink size={16}/></a>
                  </div>
                </div>
              </motion.article>
            ))}
          </div>
        ) : (
          <div className="streamer-empty"><Radio size={30}/><h3>Keine Streamer gefunden.</h3><p>{data.error || (data.configured ? "Momentan ist kein verknüpfter Streamer verfügbar." : "Discord oder Twitch ist noch nicht vollständig konfiguriert.")}</p></div>
        )}
      </section>
      <SiteFooter />
    </main>
  );
}