'use client';

import { Github, Globe, Languages, MessageSquare, Zap } from 'lucide-react';
import { useEffect, useState } from 'react';
import { ControlUI } from '@/components/ControlUI';
import { Features } from '@/components/Features';
import { Footer } from '@/components/Footer';
import { Navbar } from '@/components/Navbar';
import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
import { VoiceCreator } from '@/components/VoiceCreator';
import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
import type { DownloadLinks } from '@/lib/releases';

export default function Home() {
  const [downloadLinks, setDownloadLinks] = useState<DownloadLinks>(DOWNLOAD_LINKS);

  useEffect(() => {
    fetch('/api/releases')
      .then((res) => {
        if (!res.ok) throw new Error('Failed to fetch releases');
        return res.json();
      })
      .then((data) => {
        if (data.downloadLinks) setDownloadLinks(data.downloadLinks);
      })
      .catch((error) => {
        console.error('Failed to fetch release info:', error);
      });
  }, []);

  return (
    <>
      <Navbar />

      {/* ── Hero Section ─────────────────────────────────────────────── */}
      <section className="relative pt-32 pb-16">
        {/* Background glow */}
        <div className="hero-glow pointer-events-none absolute inset-0 -top-32">
          <div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
          <div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
        </div>

        <div className="relative mx-auto max-w-7xl px-6 text-center">
          {/* Logo */}
          <div
            className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
            style={{
              animationDelay: '0ms',
              filter:
                'drop-shadow(0 0 20px hsl(43 60% 50% / 0.4)) drop-shadow(0 0 60px hsl(43 60% 50% / 0.2))',
            }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/voicebox-logo-app.webp"
              alt="Voicebox"
              className="h-full w-full object-contain mix-blend-lighten"
            />
          </div>

          {/* Headline */}
          <div className="fade-in relative" style={{ animationDelay: '100ms' }}>
            <h1 className="text-5xl font-bold tracking-tighter leading-[0.9] text-foreground drop-shadow-[0_16px_50px_rgba(0,0,0,0.95)] md:text-7xl lg:text-8xl">
              Your voice, your machine.
            </h1>
          </div>

          {/* Subtitle */}
          <p
            className="fade-in mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl"
            style={{ animationDelay: '200ms' }}
          >
            Open source voice cloning studio with support for multiple TTS engines. Clone any voice,
            generate natural speech, and compose multi-voice projects — all running locally.
          </p>

          {/* CTAs */}
          <div
            className="fade-in mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
            style={{ animationDelay: '300ms' }}
          >
            <a
              href="#download"
              className="rounded-full bg-accent px-8 py-3.5 text-sm font-semibold uppercase tracking-wider text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3),inset_0_2px_0_rgba(255,255,255,0.2),inset_0_-2px_0_rgba(0,0,0,0.1)] transition-all hover:bg-accent-faint active:shadow-[0_2px_10px_hsl(43_60%_50%/0.3),inset_0_4px_8px_rgba(0,0,0,0.3)]"
            >
              Download
            </a>
            <a
              href={GITHUB_REPO}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm px-6 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-border"
            >
              <Github className="h-4 w-4" />
              View on GitHub
            </a>
          </div>

          {/* Version */}
          <p
            className="fade-in mt-4 text-xs text-muted-foreground/50"
            style={{ animationDelay: '400ms' }}
          >
            Free and open source &middot; macOS, Windows, Linux
          </p>
        </div>

        {/* ── ControlUI mockup ─────────────────────────────────────── */}
        <div className="mt-16">
          <ControlUI />
        </div>
      </section>

      {/* ── Features ─────────────────────────────────────────────── */}
      <Features />

      {/* ── Voice Creator ────────────────────────────────────────── */}
      <VoiceCreator />

      {/* ── Models ─────────────────────────────────────────────────── */}
      <section id="about" className="border-t border-border py-24">
        <div className="mx-auto max-w-5xl px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
              Multi-Engine Architecture
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Choose the right model for every job. All models run locally on your hardware —
              download once, use forever.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Qwen3-TTS */}
            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="text-base font-semibold text-foreground">Qwen3-TTS</h3>
                  <span className="text-xs text-muted-foreground/60">by Alibaba</span>
                </div>
                <div className="flex gap-1.5">
                  <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
                    1.7B
                  </span>
                  <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
                    0.6B
                  </span>
                </div>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                High-quality multilingual voice cloning with natural prosody. The only engine with
                delivery instructions — control tone, pace, and emotion with natural language.
              </p>
              <div className="flex flex-wrap gap-2">
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <Globe className="h-3 w-3" />
                  10 languages
                </span>
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <MessageSquare className="h-3 w-3" />
                  Delivery instructions
                </span>
              </div>
            </div>

            {/* Chatterbox */}
            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="text-base font-semibold text-foreground">Chatterbox</h3>
                  <span className="text-xs text-muted-foreground/60">by Resemble AI</span>
                </div>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                Production-grade voice cloning with the broadest language support. 23 languages with
                zero-shot cloning and emotion exaggeration control.
              </p>
              <div className="flex flex-wrap gap-2">
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <Languages className="h-3 w-3" />
                  23 languages
                </span>
              </div>
            </div>

            {/* Chatterbox Turbo */}
            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="text-base font-semibold text-foreground">Chatterbox Turbo</h3>
                  <span className="text-xs text-muted-foreground/60">by Resemble AI</span>
                </div>
                <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
                  350M
                </span>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                Lightweight and fast. Supports paralinguistic tags — embed [laugh], [sigh], [gasp]
                and more directly in your text for expressive, natural speech.
              </p>
              <div className="flex flex-wrap gap-2">
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <Zap className="h-3 w-3" />
                  350M params
                </span>
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <MessageSquare className="h-3 w-3" />
                  [laugh] [sigh] tags
                </span>
              </div>
            </div>

            {/* LuxTTS */}
            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="text-base font-semibold text-foreground">LuxTTS</h3>
                  <span className="text-xs text-muted-foreground/60">by ZipVoice</span>
                </div>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                Ultra-fast, CPU-friendly voice cloning at 48kHz. Exceeds 150x realtime on CPU with
                ~1GB VRAM. The fastest engine for quick iterations.
              </p>
              <div className="flex flex-wrap gap-2">
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  <Zap className="h-3 w-3" />
                  150x realtime
                </span>
                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
                  48kHz output
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Download Section ─────────────────────────────────────── */}
      <section id="download" className="border-t border-border py-24">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
              Download Voicebox
            </h2>
            <p className="text-muted-foreground">
              Available for macOS, Windows, and Linux. No dependencies required.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
            {/* macOS ARM */}
            <a
              href={downloadLinks.macArm}
              download
              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
            >
              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
              <div className="ml-4">
                <div className="text-sm font-medium">macOS</div>
                <div className="text-xs text-muted-foreground">Apple Silicon (ARM)</div>
              </div>
            </a>

            {/* macOS Intel */}
            <a
              href={downloadLinks.macIntel}
              download
              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
            >
              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
              <div className="ml-4">
                <div className="text-sm font-medium">macOS</div>
                <div className="text-xs text-muted-foreground">Intel (x64)</div>
              </div>
            </a>

            {/* Windows */}
            <a
              href={downloadLinks.windows}
              download
              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
            >
              <WindowsIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
              <div className="ml-4">
                <div className="text-sm font-medium">Windows</div>
                <div className="text-xs text-muted-foreground">64-bit (MSI)</div>
              </div>
            </a>

            {/* Linux */}
            <a
              href={downloadLinks.linux}
              download
              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
            >
              <LinuxIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
              <div className="ml-4">
                <div className="text-sm font-medium">Linux</div>
                <div className="text-xs text-muted-foreground">AppImage (x64)</div>
              </div>
            </a>
          </div>

          {/* GitHub link */}
          <div className="mt-6 text-center">
            <a
              href={`${GITHUB_REPO}/releases`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              <Github className="h-4 w-4" />
              View all releases on GitHub
            </a>
          </div>
        </div>
      </section>

      {/* ── Footer ───────────────────────────────────────────────── */}
      <Footer />
    </>
  );
}