import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useLocation } from "wouter";
import { ArrowRight } from "lucide-react";
import { trpc } from "@/lib/trpc";
import {
  PremiumPlacementIcon,
  VerifiedBadgeIcon,
  ReducedCommissionIcon,
  EarlyBookingIcon,
  SocialSpotlightIcon,
  LiveBandsIcon,
  DJIcon,
  SaxophoneIcon,
  ChurchInstrumentIcon,
  MCIcon,
  VoiceOverIcon,
  SoloPerformerIcon,
} from "@/components/PremiumIcons";

function getTimeAgo(date: Date | null): string {
  if (!date) return "No applications yet";
  const now = new Date();
  const diffMs = now.getTime() - new Date(date).getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMs / 3600000);
  const diffDays = Math.floor(diffMs / 86400000);

  if (diffMins < 1) return "just now";
  if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
  return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
}

export default function Home() {
  const [, navigate] = useLocation();
  const [scrollY, setScrollY] = useState(0);
  const latestTimeQuery = trpc.applications.getLatestTime.useQuery();
  const [timeAgo, setTimeAgo] = useState<string>("Loading...");

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (latestTimeQuery.data) {
      setTimeAgo(getTimeAgo(latestTimeQuery.data));
      const interval = setInterval(() => {
        setTimeAgo(getTimeAgo(latestTimeQuery.data));
      }, 30000); // Update every 30 seconds
      return () => clearInterval(interval);
    }
  }, [latestTimeQuery.data]);

  const scrollToForm = () => {
    const formElement = document.getElementById("application-form");
    formElement?.scrollIntoView({ behavior: "smooth" });
  };

  const talentCategories = [
    { icon: LiveBandsIcon, label: "Live Bands" },
    { icon: DJIcon, label: "DJs" },
    { icon: SaxophoneIcon, label: "Saxophonists" },
    { icon: ChurchInstrumentIcon, label: "Church Instrumentalists" },
    { icon: MCIcon, label: "MCs & Event Hosts" },
    { icon: VoiceOverIcon, label: "Voice-over Artists" },
    { icon: SoloPerformerIcon, label: "Solo Performers" },
  ];

  const benefits = [
    {
      icon: PremiumPlacementIcon,
      title: "Premium Placement",
      description: "Featured prominently on launch as one of our founding voices",
    },
    {
      icon: VerifiedBadgeIcon,
      title: "Verified Founding Badge",
      description: "Permanent badge showcasing your founding member status",
    },
    {
      icon: ReducedCommissionIcon,
      title: "Reduced Commission",
      description: "12 months of special rates on all bookings",
    },
    {
      icon: EarlyBookingIcon,
      title: "Early Booking Priority",
      description: "First access to incoming booking requests",
    },
    {
      icon: SocialSpotlightIcon,
      title: "Social Media Spotlight",
      description: "Dedicated feature in our launch campaign",
    },
  ];

  const processSteps = [
    {
      number: "01",
      title: "Submit Details",
      description: "Share your performance details and portfolio",
    },
    {
      number: "02",
      title: "We Review",
      description: "Our team evaluates your profile (3–5 days)",
    },
    {
      number: "03",
      title: "Get Approved",
      description: "Approved talents receive onboarding access",
    },
    {
      number: "04",
      title: "Launch with Us",
      description: "Become one of the Founding 50",
    },
  ];

  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Navigation */}
      <nav className="fixed top-0 w-full bg-background/80 backdrop-blur-md border-b border-border z-50">
        <div className="container flex items-center justify-between h-14 md:h-16 px-4">
          <img 
            src="https://files.manuscdn.com/user_upload_by_module/session_file/310519663273617054/OvdqELJEnlKYsShR.png" 
            alt="Vocalclips Logo" 
            className="h-10 md:h-16 w-auto"
          />
          <Button
            onClick={scrollToForm}
            className="bg-accent hover:bg-accent/90 text-accent-foreground font-semibold text-sm md:text-base"
          >
            Apply Now
          </Button>
        </div>
      </nav>

      {/* SECTION 1: Hero */}
      <section className="pt-32 pb-20 px-4 relative overflow-hidden">
        <div className="absolute inset-0 opacity-30">
          <div className="absolute top-20 right-10 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
          <div className="absolute bottom-20 left-10 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
        </div>

        <div className="container max-w-4xl mx-auto relative z-10">
          <div
            className="animate-fade-in-up"
            style={{
              transform: `translateY(${scrollY * 0.3}px)`,
              opacity: Math.max(0.5, 1 - scrollY / 1000),
            }}
          >
            <h1 className="text-3xl sm:text-4xl md:text-7xl font-bold mb-6 leading-tight">
              Nigeria's Next Premium Talent Booking Network Is Launching
            </h1>
            <p className="text-base sm:text-lg md:text-2xl text-muted-foreground mb-8 max-w-3xl">
              We are selecting 50 exceptional music and performance talents to become the Founding Voices of Vocalclips.
            </p>

            {/* Scarcity Message */}
            <div className="bg-card border border-border rounded-2xl p-4 sm:p-8 mb-8 backdrop-blur">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-3 h-3 bg-accent rounded-full animate-pulse"></div>
                <span className="text-accent font-semibold">Founding Spots Filling Up</span>
              </div>
              <p className="text-sm text-muted-foreground mb-3">
                Last application received: <span className="text-accent font-semibold">{timeAgo}</span>
              </p>
              <p className="text-sm text-muted-foreground">
                Only 50 curated talents will receive early visibility, priority placement, and lifetime founding benefits.
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4">
              <Button
                onClick={scrollToForm}
                size="lg"
                className="bg-accent hover:bg-accent/90 text-accent-foreground font-bold text-lg h-14 px-8"
              >
                Apply to Join the Founding 50
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="border-border hover:bg-card font-semibold text-lg h-14 px-8"
              >
                Learn More
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2: What is Vocalclips */}
      <section className="py-20 px-4 bg-card/50 border-y border-border">
        <div className="container max-w-3xl mx-auto">
          <h2 className="text-4xl font-bold mb-8 text-center">What is Vocalclips?</h2>
          <p className="text-lg text-muted-foreground text-center mb-6 leading-relaxed">
            Vocalclips is a <span className="text-accent font-semibold">curated digital booking network</span> connecting event hosts, churches, corporates, and private clients with verified local talent.
          </p>
          <p className="text-lg text-muted-foreground text-center leading-relaxed">
            We are building Nigeria's most trusted talent discovery platform — not an open directory. Every talent is carefully selected, verified, and vetted to ensure the highest standards of professionalism and quality.
          </p>
        </div>
      </section>

      {/* SECTION 3: Founding Benefits */}
      <section className="py-20 px-4">
        <div className="container">
          <h2 className="text-4xl font-bold mb-4 text-center">Founding Member Benefits</h2>
          <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
            Be part of an exclusive group with lifetime advantages
          </p>

          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
            {benefits.map((benefit, idx) => {
              const Icon = benefit.icon;
              return (
                <Card
                  key={idx}
                  className="bg-card border-border hover:border-accent/50 transition-all duration-300 hover:shadow-lg hover:shadow-accent/10 p-6 group"
                >
                  <div className="mb-4 inline-block p-3 bg-accent/10 rounded-lg group-hover:bg-accent/20 transition-colors w-12 h-12">
                    <Icon />
                  </div>
                  <h3 className="font-bold text-lg mb-2">{benefit.title}</h3>
                  <p className="text-sm text-muted-foreground">{benefit.description}</p>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* SECTION 4: Talent Categories */}
      <section className="py-20 px-4 bg-card/50 border-y border-border">
        <div className="container">
          <h2 className="text-4xl font-bold mb-4 text-center">Who We Are Selecting</h2>
          <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
            Performance quality, professionalism, stage presence, and media content availability
          </p>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
            {talentCategories.map((category, idx) => {
              const Icon = category.icon;
              return (
                <div
                  key={idx}
                  className="flex flex-col items-center gap-3 p-6 bg-card border border-border rounded-xl hover:border-accent/50 hover:bg-accent/5 transition-all duration-300 group"
                >
                  <div className="w-10 h-10 text-accent group-hover:scale-110 transition-transform">
                    <Icon />
                  </div>
                  <span className="text-sm font-semibold text-center">{category.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* SECTION 5: Application Process */}
      <section className="py-20 px-4">
        <div className="container">
          <h2 className="text-4xl font-bold mb-4 text-center">Application Process</h2>
          <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
            Simple steps to join the Founding 50
          </p>

          <div className="grid md:grid-cols-4 gap-6 mb-8">
            {processSteps.map((step, idx) => (
              <div key={idx} className="relative">
                <div className="flex flex-col items-center">
                  <div className="w-16 h-16 rounded-full bg-accent/10 border-2 border-accent flex items-center justify-center mb-4 font-bold text-2xl text-accent">
                    {step.number}
                  </div>
                  <h3 className="font-bold text-lg text-center mb-2">{step.title}</h3>
                  <p className="text-sm text-muted-foreground text-center">{step.description}</p>
                </div>
                {idx < processSteps.length - 1 && (
                  <div className="hidden md:block absolute top-8 left-[calc(50%+2rem)] w-[calc(100%-4rem)] h-0.5 bg-gradient-to-r from-accent/50 to-transparent"></div>
                )}
              </div>
            ))}
          </div>

          <div className="text-center">
            <p className="text-muted-foreground">
                Review Time: <span className="font-semibold text-accent">3–5 days</span>
            </p>
          </div>
        </div>
      </section>

      {/* SECTION 6: Application Form */}
      <section id="application-form" className="py-20 px-4 bg-card/50 border-t border-border">
        <div className="container max-w-2xl mx-auto">
          <h2 className="text-4xl font-bold mb-4 text-center">Apply Now</h2>
          <p className="text-center text-muted-foreground mb-12">
            Join the Founding 50 and secure your spot in Nigeria's premium talent network
          </p>

          <Button
            onClick={() => navigate("/apply")}
            size="lg"
            className="w-full bg-accent hover:bg-accent/90 text-accent-foreground font-bold text-lg h-14"
          >
            Go to Application Form
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
        </div>
      </section>

      {/* SECTION 7: Footer */}
      <footer className="border-t border-border py-12 px-4 bg-card/30">
        <div className="container max-w-4xl mx-auto">
          <div className="grid md:grid-cols-3 gap-8 mb-8">
            <div>
              <h3 className="text-2xl font-bold bg-gradient-to-r from-accent to-purple-400 bg-clip-text text-transparent mb-4">
                Vocalclips
              </h3>
              <p className="text-muted-foreground">
                Nigeria's most trusted talent discovery platform.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact</h4>
              <a
                href="https://wa.me/2348037007161"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-accent transition-colors"
              >
                WhatsApp: +234 803 700 7161
              </a>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Follow Us</h4>
              <a
                href="https://twitter.com/vocalclips"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-accent transition-colors"
              >
                X (Twitter) @vocalclips
              </a>
            </div>
          </div>

          <div className="border-t border-border pt-8 text-center text-muted-foreground">
            <p className="mb-2">
              <span className="text-accent font-semibold">Curated.</span> Professional.{" "}
              <span className="text-accent font-semibold">Trusted.</span>
            </p>
            <p className="text-sm">© 2026 Vocalclips. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}
