import React, { useRef, useEffect } from 'react';
import { gsap, ScrollTrigger } from '../lib/gsap.ts';
import { useReducedMotion } from '../hooks/useReducedMotion.ts';
import { SplitHeadline } from '../components/motion/SplitHeadline.tsx';
import { MagneticButton } from '../components/motion/MagneticButton.tsx';
import { Button } from '../components/ui/Button.tsx';
import { CountUp } from '../components/motion/CountUp.tsx';
import Marquee from '../components/motion/Marquee.tsx';
import BootCore from '../components/motion/BootCore.tsx';
import { Mountain, Shield, Activity, Zap } from 'lucide-react';

const HomePage: React.FC = () => {
  const reduced = useReducedMotion();
  const heroRef = useRef<HTMLDivElement>(null);
  const curtainRef = useRef<HTMLDivElement>(null);
  const checklistRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (reduced) return;
    const ctx = gsap.context(() => {
      const tl = gsap.timeline();
      tl.to(curtainRef.current, { y: '100%', duration: 1.2, ease: 'power3.inOut' });

      if (checklistRef.current) {
        const items = checklistRef.current.querySelectorAll('.check-item');
        tl.fromTo(items, { x: -20, opacity: 0 }, { x: 0, opacity: 1, duration: 0.4, stagger: 0.1 }, 0.5);
      }
    });
    return () => ctx.revert();
  }, [reduced]);

  const checkItems = [
    { icon: Shield, label: 'Error Boundary Armed', status: 'ready' as const },
    { icon: Activity, label: 'Router Integrity', status: 'verified' as const },
    { icon: Zap, label: 'GSAP Plugins Registered', status: 'active' as const },
  ];

  return (
    <>
      <div ref={curtainRef} className="fixed inset-0 bg-[var(--ink)] z-50 pointer-events-none" />

      {/* Hero */}
      <section ref={heroRef} className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--bg)]">
        <div className="absolute inset-0 bg-gradient-to-b from-[var(--brand-500)]/5 to-transparent" />
        <div className="container mx-auto px-4 py-24 text-center relative z-10">
          <div className="flex justify-center mb-8">
            <BootCore />
          </div>
          <SplitHeadline
            text="System Rendered"
            className="text-5xl md:text-7xl font-display font-bold text-[var(--ink)] mb-4"
          />
          <p className="text-xl text-[var(--ink-muted)] max-w-2xl mx-auto mb-8">
            The Nepal 360 application has recovered from a blank-screen failure. All critical systems are operational and monitored.
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <MagneticButton>
              <Button variant="primary" size="lg" onClick={() => window.location.hash = '#/diagnostics'}>
                View Diagnostics
              </Button>
            </MagneticButton>
            <MagneticButton>
              <Button variant="secondary" size="lg" onClick={() => window.location.hash = '#/incidents'}>
                Incident Log
              </Button>
            </MagneticButton>
          </div>
        </div>
      </section>

      {/* Checklist */}
      <section className="py-16 bg-[var(--surface)]">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-display font-bold text-[var(--ink)] mb-8 text-center">Recovery Checklist</h2>
          <div ref={checklistRef} className="max-w-lg mx-auto space-y-4">
            {checkItems.map((item, i) => (
              <div key={i} className="check-item flex items-center gap-4 p-4 rounded-[var(--r)] bg-[var(--surface-2)]">
                <item.icon className="w-5 h-5 text-[var(--success)]" />
                <span className="flex-1 text-[var(--ink)]">{item.label}</span>
                <span className="text-sm text-[var(--success)] font-mono">{item.status}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-16 bg-[var(--bg)]">
        <div className="container mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8">
          <CountUp value={12} suffix="" label="Incidents Indexed" />
          <CountUp value={6} suffix="" label="Route Checks Complete" />
          <CountUp value={0} suffix="" label="Blank Screens Allowed" />
          <CountUp value={999} suffix=".9%" label="Render Confidence" />
        </div>
      </section>

      {/* Marquee */}
      <Marquee />

      {/* CTA */}
      <section className="py-16 bg-[var(--surface)]">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-display font-bold text-[var(--ink)] mb-4">Ready to Explore?</h2>
          <p className="text-[var(--ink-muted)] mb-8 max-w-md mx-auto">
            Browse our curated journeys across Nepal's diverse landscapes.
          </p>
          <MagneticButton>
            <Button variant="primary" size="lg" onClick={() => window.location.hash = '#/journeys'}>
              <Mountain className="w-5 h-5 mr-2" />
              View Journeys
            </Button>
          </MagneticButton>
        </div>
      </section>
    </>
  );
};

export default HomePage;