import Link from "next/link"
import Image from "next/image"
import { LogIn, LayoutDashboard } from "lucide-react"
import { auth } from "@/lib/auth"
import { Button } from "@/components/ui/button"
import { NewsletterForm } from "@/components/shop/newsletter-form"
import { ThemeToggle } from "@/components/theme-toggle"
import { NeonSoundToggle } from "@/components/neon-sound-toggle"
import { ScrollModeToggle } from "@/components/scroll-mode-toggle"
import { ColorPickerToggle } from "@/components/color-picker-toggle"

export default async function HomePage() {
  const session = await auth()
  const isAdmin = (session?.user as { role?: string } | undefined)?.role === "ADMIN"

  return (
    <div className="h-[calc(100svh-4rem)] flex flex-col overflow-hidden">
      {/* Filtre de déformation utilisé par l'effet glitch du wordmark (voir .glitch dans globals.css) */}
      <svg aria-hidden="true" focusable="false" className="absolute h-0 w-0 overflow-hidden">
        <filter id="glitch-displace">
          <feTurbulence type="fractalNoise" baseFrequency="0.01 0.09" numOctaves="2" seed="7" result="noise" />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="16" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>

      <div className="fixed top-4 right-4 z-30 flex gap-2">
        <NeonSoundToggle />
        <ScrollModeToggle />
        <ColorPickerToggle />
        <ThemeToggle />
        <Link
          href={isAdmin ? "/admin" : "/login"}
          aria-label={isAdmin ? "Aller au dashboard admin" : "Se connecter"}
          className="inline-flex items-center justify-center h-10 w-10 border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text)] hover:border-[var(--border-subtle)] transition-colors"
        >
          {isAdmin ? <LayoutDashboard className="h-4 w-4" /> : <LogIn className="h-4 w-4" />}
        </Link>
      </div>

      {/* Hero */}
      <section className="relative flex-1 min-h-0 flex flex-col items-center justify-center text-center px-4 overflow-hidden">
        {/* Background image */}
        <Image
          src="https://images.unsplash.com/photo-1568746581237-a3b66fe507fe?w=1920&q=80&auto=format&fit=crop"
          alt=""
          fill
          priority
          sizes="100vw"
          className="object-cover object-center opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-[var(--bg)] via-[var(--bg)]/60 to-[var(--bg)]" />

        {/* Background grid */}
        <div
          className="absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage:
              "linear-gradient(var(--color-white) 1px, transparent 1px), linear-gradient(90deg, var(--color-white) 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />

        {/* Déclencheur gauche haut (1/4) — bloc 01 Positionnement, centré sur la moitié gauche */}
        <div className="hidden lg:block absolute left-1/4 top-1/4 -translate-x-1/2 -translate-y-1/2 z-10">
          <GlassHover
            panelWidth="max-w-xs"
            panelPosition="center"
            label={
              <span className="font-mono text-[15px] font-bold uppercase tracking-widest text-[var(--accent)]">
                01 — Positionnement
              </span>
            }
            panel={
              <>
                <h3 className="text-lg font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-3">
                  Techwear, futuriste, D2C
                </h3>
                <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
                  Une esthétique techwear et futuriste pensée pour la ville :
                  silhouettes sculpturales, matières fonctionnelles, protection
                  contre les éléments. Vendue en direct (D2C), sans passer par
                  la grande distribution, pour garder la main sur la qualité
                  et le prix.
                </p>
              </>
            }
          />
        </div>

        {/* Déclencheur gauche bas (3/4) — bloc 03 La matière, centré sur la moitié gauche */}
        <div className="hidden lg:block absolute left-1/4 top-3/4 -translate-x-1/2 -translate-y-1/2 z-10">
          <GlassHover
            panelWidth="max-w-xs"
            panelPosition="center"
            label={
              <span className="font-mono text-[15px] font-bold uppercase tracking-widest text-[var(--accent)]">
                03 — La matière
              </span>
            }
            panel={
              <>
                <h3 className="text-lg font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-3">
                  Néoprène, PU, Gore-Tex
                </h3>
                <p className="text-sm text-[var(--text-secondary)] leading-relaxed mb-4">
                  Nous choisissons nos matériaux pour leur performance autant
                  que pour leur impact : sans PFAS ni PVC dès que possible,
                  fibres régénérées, alternatives bio-sourcées. Notre
                  laboratoire matières explore aussi les textiles de demain.
                </p>
                <Link
                  href="/materiaux"
                  className="font-mono text-xs uppercase tracking-widest text-[var(--text)] hover:text-[var(--accent)] transition-colors"
                >
                  Découvrir les matériaux →
                </Link>
              </>
            }
          />
        </div>

        {/* Déclencheur droite haut (1/4) — bloc 02 Les drops, centré sur la moitié droite */}
        <div className="hidden lg:block absolute left-3/4 top-1/4 -translate-x-1/2 -translate-y-1/2 z-10">
          <GlassHover
            panelWidth="max-w-xs"
            panelPosition="center"
            label={
              <span className="font-mono text-[15px] font-bold uppercase tracking-widest text-[var(--accent)]">
                02 — Les drops
              </span>
            }
            panel={
              <>
                <h3 className="text-lg font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-3">
                  Une collaboration à chaque drop
                </h3>
                <p className="text-sm text-[var(--text-secondary)] leading-relaxed mb-4">
                  Chaque drop réunit un styliste et un artiste, invités à
                  créer ensemble une collection inédite. Le résultat : des
                  pièces en édition limitée et numérotée, qui n&rsquo;existeront
                  plus une fois le stock épuisé.
                </p>
                <Link
                  href="/drops"
                  className="font-mono text-xs uppercase tracking-widest text-[var(--text)] hover:text-[var(--accent)] transition-colors"
                >
                  Voir les collaborations →
                </Link>
              </>
            }
          />
        </div>

        {/* Déclencheur droite bas (3/4) — bloc 04 Édition limitée, centré sur la moitié droite */}
        <div className="hidden lg:block absolute left-3/4 top-3/4 -translate-x-1/2 -translate-y-1/2 z-10">
          <GlassHover
            panelWidth="max-w-xs"
            panelPosition="center"
            label={
              <span className="font-mono text-[15px] font-bold uppercase tracking-widest text-[var(--accent)]">
                04 — Édition limitée
              </span>
            }
            panel={
              <>
                <h3 className="text-lg font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-3">
                  Une pièce, un numéro, une histoire
                </h3>
                <p className="text-sm text-[var(--text-secondary)] leading-relaxed mb-4">
                  Chaque exemplaire d&rsquo;une collection en édition limitée
                  porte son propre numéro. Posséder une pièce VALABEL, c&rsquo;est
                  posséder un fragment précis et daté d&rsquo;une collaboration
                  qui ne se reproduira pas.
                </p>
                <Link
                  href="/shop"
                  className="font-mono text-xs uppercase tracking-widest text-[var(--text)] hover:text-[var(--accent)] transition-colors"
                >
                  Explorer la collection →
                </Link>
              </>
            }
          />
        </div>

        <div className="relative z-10 max-w-4xl mx-auto">
          <GlassHover
            className="mb-8"
            panelPosition="center"
            label={
              <p className="text-3xl md:text-4xl font-heading font-bold text-[var(--text)] leading-tight tracking-tight px-4">
                &ldquo;La matière
                <br />
                n&rsquo;est pas un compromis.
                <br />
                C&rsquo;est un choix.&rdquo;
              </p>
            }
            panel={
              <p className="text-sm text-[var(--text)] leading-relaxed">
                VALABEL est une marque de streetwear technique premium,
                conçue à Bruxelles et vendue en direct, sans intermédiaire.
                Nous partons de matériaux issus du monde nautique et du
                techwear pour construire un vestiaire à l&rsquo;intersection
                de la mode urbaine, de la performance et du futurisme.
              </p>
            }
          />

          <h1
            data-text="VALABEL"
            className="glitch text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-heading font-bold uppercase tracking-[-0.04em] text-[var(--text)] mb-10"
            style={{ lineHeight: "0.9" }}
          >
            {/* Barre bleue sous le V, comme le logo du header (LogoMark) */}
            <span className="relative inline-block">
              V
              <span
                aria-hidden="true"
                className="absolute left-0 right-0 bg-[var(--accent)] rounded-full"
                style={{ height: "0.09em", bottom: "-0.06em" }}
              />
            </span>
            ALABEL
          </h1>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Button asChild size="lg">
              <Link href="/drops">Drops</Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/shop">Shop</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Newsletter — juste au-dessus du footer */}
      <section className="shrink-0 px-4 py-6">
        <NewsletterForm className="max-w-sm mx-auto" />
      </section>
    </div>
  )
}

function GlassHover({
  label,
  panel,
  className,
  panelWidth = "max-w-md",
  panelPosition = "above",
}: {
  label: React.ReactNode
  panel: React.ReactNode
  className?: string
  panelWidth?: string
  panelPosition?: "above" | "center"
}) {
  const positionClasses =
    panelPosition === "center"
      ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
      : "bottom-full left-1/2 -translate-x-1/2 mb-4 translate-y-2 group-hover:translate-y-0"

  return (
    <div className={`relative inline-block group cursor-default ${className ?? ""}`}>
      {/* Panneau glassmorphism, centré sur le déclencheur (au-dessus ou superposé) */}
      <div
        className={`pointer-events-none absolute ${positionClasses} w-[88vw] ${panelWidth} opacity-0 group-hover:opacity-100 transition-all duration-300 z-20`}
      >
        <div className="pointer-events-auto rounded-lg border border-white/15 bg-white/10 backdrop-blur-xl shadow-2xl p-6 text-left">
          {panel}
        </div>
      </div>
      {label}
    </div>
  )
}