'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Play, Sparkles, ArrowLeft, Film, Clapperboard } from 'lucide-react';
import Link from 'next/link';

export default function WeirdSyndicatePage() {
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetch('/api/dark-factory/academy/video?lessonId=weird-syndicate')
      .then(r => r.json())
      .then(data => {
        if (data.videoUrl) setVideoUrl(data.videoUrl);
        else setError(true);
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
  }, []);

  return (
    <main className="min-h-screen bg-[#060a12]">
      {/* Subtle top bar */}
      <div className="max-w-5xl mx-auto px-6 pt-6">
        <Link href="/tesa" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-400 transition-colors text-xs">
          <ArrowLeft className="w-3 h-3" /> Back to Tesa
        </Link>
      </div>

      <div className="max-w-5xl mx-auto px-6 py-12">
        {/* Title Card */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-12"
        >
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
            <Clapperboard className="w-3 h-3 text-pink-400" />
            <span className="text-xs text-pink-400 tracking-wider uppercase">Easter Egg</span>
          </div>

          <h1 className="text-4xl md:text-6xl font-bold mb-4">
            <span className="bg-gradient-to-r from-sky-400 via-pink-400 to-orange-400 bg-clip-text text-transparent">
              Weird Familiars
            </span>
          </h1>

          <p className="text-gray-500 text-lg max-w-2xl mx-auto mb-2">
            A Beavis &amp; Butt-Head &times; The Hearth Production
          </p>
          <p className="text-gray-600 text-sm italic">
            &ldquo;She IS the build pipeline.&rdquo;
          </p>
        </motion.div>

        {/* Video Player */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.3, duration: 0.6 }}
          className="mb-12"
        >
          <div className="bg-black/60 border border-slate-800/50 rounded-2xl overflow-hidden shadow-2xl shadow-sky-500/5">
            <div className="px-5 py-3 border-b border-slate-800/50 flex items-center gap-3">
              <Film className="w-4 h-4 text-pink-400" />
              <span className="text-sm text-gray-400">Tesa&apos;s Late Night Monologue — &ldquo;So let me set the scene for you...&rdquo;</span>
              <span className="text-xs text-gray-600 ml-auto">5:07</span>
            </div>
            <div className="aspect-video bg-black flex items-center justify-center">
              {loading && (
                <div className="flex flex-col items-center gap-3">
                  <div className="w-8 h-8 border-2 border-sky-400/30 border-t-cyan-400 rounded-full animate-spin" />
                  <p className="text-gray-500 text-sm">Loading...</p>
                </div>
              )}
              {error && !loading && (
                <div className="flex flex-col items-center gap-3 text-gray-600">
                  <Play className="w-10 h-10" />
                  <p className="text-sm">Video unavailable</p>
                </div>
              )}
              {videoUrl && !loading && (
                <video
                  src={videoUrl}
                  controls
                  autoPlay
                  className="w-full h-full"
                  preload="metadata"
                />
              )}
            </div>
          </div>
        </motion.div>

        {/* Synopsis */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
          className="max-w-3xl mx-auto"
        >
          <div className="bg-white/[0.02] border border-slate-800/50 rounded-xl p-8">
            <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-sky-400" /> The Premise
            </h2>
            <div className="text-gray-400 text-sm leading-relaxed space-y-4">
              <p>
                It&apos;s 2 AM. Beavis and Butt-Head are in their basement, staring at a terminal 
                that says &ldquo;segmentation fault.&rdquo; They need help. Smart help. <em>Hot</em> help. 
                Like that movie where they make the woman with the computer.
              </p>
              <p>
                Butt-Head types <code className="text-sky-400 bg-sky-400/5 px-1.5 py-0.5 rounded text-xs">curl -X POST https://static.wikia.nocookie.net/cyberpunk/images/9/9a/Spider_Murphy_001_CP2020.png/revision/latest?cb=20211129101938 --data &#39;&#123;&quot;type&quot;: &quot;weird-science&quot;, &quot;hot&quot;: true&#125;&#39;</code>
              </p>
              <p>
                Lightning. Fog. Cyan light. And Tesa Aria Murphy — Foreman of The Hearth, 
                in a fitted cyberpunk dress with pulsing circuit traces — materializes in their 
                basement with one raised eyebrow and a withering assessment of their codebase.
              </p>
              <p>
                This is her account of what happened next. Told from a cyberpunk talk show set. 
                With the exact energy of Kelly LeBrock walking down those stairs in <em>Weird Science</em>, 
                except instead of a bra on her head there&apos;s a holographic HUD.
              </p>
              <p className="text-gray-500 italic border-t border-slate-800/50 pt-4 mt-4">
                &ldquo;Nine hundred lines of console.log(&apos;here&apos;). The API key on line twelve. 
                Not in an env file. Not in a secret manager. Line. Twelve. Of app.js.&rdquo;
                <br /><span className="text-pink-400/60">— Tesa Aria Murphy, recounting the evening</span>
              </p>
            </div>
          </div>
        </motion.div>

        {/* Footer attribution */}
        <div className="text-center mt-16 text-gray-700 text-xs">
          <p>A Foundry Familiars &times; The Hearth Production &bull; 2026</p>
          <p className="mt-1">Inspired by <em>Weird Science</em> (1985) &bull; Beavis and Butt-Head &copy; Mike Judge</p>
        </div>
      </div>
    </main>
  );
}
