"use client";

import type { ReactNode } from "react";

import Link from "next/link";

import { Anchor, Ship } from "lucide-react";

import { APP_CONFIG } from "@/config/app-config";
import { cn } from "@/lib/utils";

interface AuthGlassShellProps {
  children: ReactNode;
  title: ReactNode;
  subtitle: string;
  features: { icon: React.ComponentType<{ className?: string }>; text: string }[];
  banner?: ReactNode;
  className?: string;
}

function OceanWaves() {
  return (
    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-[45vh] min-h-[220px] sm:h-[62vh] sm:min-h-[340px]">
      {/* Deep water — fills most of the lower viewport */}
      <div className="absolute inset-x-0 bottom-0 top-0 bg-gradient-to-t from-[#001018] via-[#002840]/95 to-[#004d6e]/25" />

      {/* Wave layer 1 — deep swell */}
      <div className="auth-wave-layer absolute bottom-0 w-[200%] opacity-50" style={{ animationDuration: "20s" }}>
        <svg viewBox="0 0 1200 160" preserveAspectRatio="none" className="h-44 w-full sm:h-52">
          <path d="M0,80 C200,120 400,40 600,80 C800,120 1000,40 1200,80 L1200,160 L0,160 Z" fill="#003d5c" />
        </svg>
      </div>

      {/* Wave layer 2 — mid ocean */}
      <div
        className="auth-wave-layer absolute bottom-0 w-[200%] opacity-65"
        style={{ animationDuration: "14s", animationDirection: "reverse" }}
      >
        <svg viewBox="0 0 1200 140" preserveAspectRatio="none" className="h-40 w-full sm:h-48">
          <path d="M0,70 C150,30 350,100 600,55 C850,10 1050,90 1200,50 L1200,140 L0,140 Z" fill="#0077a8" />
        </svg>
      </div>

      {/* Wave layer 3 — foam crest */}
      <div className="auth-wave-layer absolute bottom-0 w-[200%] opacity-75" style={{ animationDuration: "9s" }}>
        <svg viewBox="0 0 1200 120" preserveAspectRatio="none" className="h-32 w-full sm:h-40">
          <path d="M0,65 C300,35 500,85 800,50 C950,35 1100,75 1200,55 L1200,120 L0,120 Z" fill="#22d3ee" fillOpacity="0.35" />
        </svg>
      </div>

      {/* Water surface shimmer */}
      <div className="absolute inset-x-0 top-[18%] h-px bg-gradient-to-r from-transparent via-cyan-200/35 to-transparent sm:top-[15%]" />
    </div>
  );
}

/** Lucide-style anchor watermark — matches left panel aesthetic, sits on the water line */
function NauticalWatermark({ className }: { className?: string }) {
  return (
    <div className={cn("pointer-events-none flex justify-center", className)}>
      <Anchor className="auth-ship-bob size-40 stroke-[0.55] text-cyan-200/20 xl:size-48" strokeWidth={1} />
    </div>
  );
}

function FloatingBubbles() {
  const bubbles = [
    { left: "5%", size: 10, delay: "0s", duration: "13s" },
    { left: "14%", size: 14, delay: "1.5s", duration: "16s" },
    { left: "24%", size: 8, delay: "3s", duration: "11s" },
    { left: "33%", size: 12, delay: "0.5s", duration: "14s" },
    { left: "41%", size: 6, delay: "4s", duration: "10s" },
    { left: "49%", size: 16, delay: "2s", duration: "18s" },
    { left: "57%", size: 9, delay: "6s", duration: "12s" },
    { left: "65%", size: 13, delay: "1s", duration: "15s" },
    { left: "73%", size: 7, delay: "3.5s", duration: "11s" },
    { left: "81%", size: 11, delay: "5s", duration: "17s" },
    { left: "88%", size: 15, delay: "0.8s", duration: "14s" },
    { left: "94%", size: 8, delay: "2.5s", duration: "9s" },
    { left: "10%", size: 5, delay: "7s", duration: "8s" },
    { left: "52%", size: 6, delay: "8s", duration: "9s" },
    { left: "70%", size: 18, delay: "4.5s", duration: "20s" },
    { left: "38%", size: 5, delay: "1.2s", duration: "13s" },
  ];
  return (
    <div className="pointer-events-none absolute inset-0 z-[8] overflow-hidden">
      {bubbles.map((b, i) => (
        <span
          key={i}
          className="auth-bubble absolute bottom-0 rounded-full bg-cyan-100/40 shadow-[0_0_8px_rgba(103,232,249,0.45)] ring-1 ring-cyan-50/30"
          style={{
            left: b.left,
            width: b.size,
            height: b.size,
            animationDelay: b.delay,
            animationDuration: b.duration,
          }}
        />
      ))}
    </div>
  );
}

export function AuthGlassShell({ children, title, subtitle, features, banner, className }: AuthGlassShellProps) {
  return (
    <div className="relative min-h-screen overflow-hidden bg-[#001428] text-white">
      {/* Deep ocean gradient */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-[#002845] via-[#004d6e] to-[#001a33]" />

      {/* Sunlight through water */}
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(56,189,248,0.35),transparent_55%)]" />
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_80%_20%,rgba(45,212,191,0.12),transparent_50%)]" />

      {/* Subtle horizon line */}
      <div className="pointer-events-none absolute top-[38%] right-0 left-0 h-px bg-gradient-to-r from-transparent via-cyan-300/20 to-transparent" />

      <FloatingBubbles />
      <OceanWaves />

      {/* Mobile anchor watermark — hidden on very small screens to avoid overlapping the form */}
      <NauticalWatermark className="absolute inset-x-0 bottom-[18%] z-[6] max-sm:hidden lg:hidden" />

      <div className={cn("relative z-10 flex min-h-screen flex-col lg:flex-row", className)}>
        {/* Nautical brand panel — full-height left column */}
        <aside className="relative hidden min-h-0 flex-col overflow-y-auto border-cyan-400/10 border-r bg-[#002038]/40 backdrop-blur-xl lg:flex lg:min-h-screen lg:w-[440px] xl:w-[480px]">
          {/* Anchor on the waterline — raised so the full icon is visible */}
          <NauticalWatermark className="absolute inset-x-0 bottom-[18%] z-0 [@media(max-height:780px)]:hidden" />

          <Link
            href="/login"
            className="absolute top-8 left-8 z-[2] flex items-center gap-3 transition-opacity hover:opacity-85 xl:top-10 xl:left-10"
          >
            <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl border border-cyan-300/25 bg-gradient-to-br from-cyan-400/20 to-teal-600/20 shadow-lg shadow-cyan-950/30 backdrop-blur-md">
              <Ship className="size-5 text-cyan-100" />
            </div>
            <div className="min-w-0">
              <span className="block font-semibold text-lg tracking-tight">{APP_CONFIG.name}</span>
              <span className="text-[10px] text-cyan-200/50 uppercase tracking-[0.15em]">Themed sailings</span>
            </div>
          </Link>

          {/* min top padding clears the logo; calc aligns with login card when viewport is tall enough */}
          <div className="relative z-[1] min-h-screen px-8 pb-32 pt-28 xl:px-10 lg:pt-[max(7rem,calc(50vh-21rem))] lg:pb-36 [@media(max-height:780px)]:pt-32 [@media(max-height:780px)]:pb-28">
            <div className="space-y-6 lg:space-y-8 [@media(max-height:780px)]:space-y-4">
              <div className="space-y-3 [@media(max-height:780px)]:space-y-2">
                <p className="flex items-center gap-2 font-medium text-[11px] text-cyan-300/90 uppercase tracking-[0.2em]">
                  <span className="inline-block size-1.5 shrink-0 rounded-full bg-cyan-400" />
                  Set sail
                </p>
                <h1 className="font-semibold text-3xl leading-[1.15] tracking-tight xl:text-4xl [@media(max-height:780px)]:text-2xl [@media(max-height:780px)]:leading-snug">
                  {title}
                </h1>
                <p className="max-w-sm text-sm leading-relaxed text-cyan-100/45 [@media(max-height:780px)]:text-xs">
                  {subtitle}
                </p>
              </div>

              <ul className="space-y-3 [@media(max-height:780px)]:space-y-2">
                {features.map(({ icon: Icon, text }) => (
                  <li key={text} className="flex items-start gap-3">
                    <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-xl border border-cyan-400/15 bg-cyan-500/10 backdrop-blur-sm">
                      <Icon className="size-3.5 text-cyan-200/70" />
                    </div>
                    <span className="min-w-0 text-cyan-50/55 text-sm leading-snug [@media(max-height:780px)]:text-xs">
                      {text}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <p className="mt-10 hidden text-cyan-200/25 text-xs [@media(max-height:780px)]:block" suppressHydrationWarning>
              {APP_CONFIG.copyright}
            </p>
          </div>

          <p
            className="absolute right-8 bottom-8 left-8 z-[2] text-cyan-200/25 text-xs xl:right-10 xl:bottom-10 xl:left-10 [@media(max-height:780px)]:hidden"
            suppressHydrationWarning
          >
            {APP_CONFIG.copyright}
          </p>
        </aside>

        {/* Form panel — sea-glass card */}
        <main className="flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-4 sm:px-8 sm:py-10 [@media(max-height:780px)]:py-3">
          <div className="mb-4 flex w-full max-w-[480px] items-center gap-2.5 sm:mb-6 lg:hidden">
            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-500/15 backdrop-blur-md">
              <Ship className="size-4 text-cyan-100" />
            </div>
            <span className="min-w-0 truncate font-semibold">{APP_CONFIG.name}</span>
          </div>

          <div className="w-full max-w-[480px]">
            {banner}

            <div className="relative overflow-hidden rounded-3xl border border-cyan-200/20 bg-gradient-to-br from-cyan-950/30 via-[#002840]/50 to-teal-950/40 p-4 shadow-[0_8px_40px_rgba(0,40,80,0.5),inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-2xl sm:p-6 lg:p-8 [@media(max-height:780px)]:p-3.5">
              <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-200/40 to-transparent" />
              {children}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

/** Ocean glass input styling */
export const authGlassInputClass =
  "h-11 border-cyan-300/20 bg-[#001830]/50 text-cyan-50 placeholder:text-cyan-200/30 backdrop-blur-sm focus-visible:border-cyan-300/40 focus-visible:ring-cyan-400/25";

export const authGlassLabelClass = "text-sm font-medium text-cyan-100/85";

export const authGlassDemoCard = (active: boolean) =>
  cn(
    "flex w-full items-center gap-2.5 rounded-2xl border px-3 py-2.5 text-left transition-all duration-200 sm:gap-3 sm:px-4 sm:py-3",
    active
      ? "border-cyan-300/35 bg-cyan-500/15 shadow-lg shadow-cyan-950/30 ring-1 ring-cyan-300/25 backdrop-blur-md"
      : "border-cyan-400/10 bg-[#001830]/40 hover:border-cyan-300/25 hover:bg-cyan-500/10 backdrop-blur-sm",
  );

/** Primary CTA — ocean gradient button */
export const authOceanButtonClass =
  "h-11 w-full rounded-xl bg-gradient-to-r from-cyan-400 via-teal-400 to-cyan-500 font-semibold text-[#001428] shadow-lg shadow-cyan-900/40 hover:from-cyan-300 hover:via-teal-300 hover:to-cyan-400";

/** Booking / return banner — sea green */
export const authBookingBannerClass =
  "mb-4 flex items-start gap-3 rounded-2xl border border-teal-300/30 bg-teal-500/15 px-4 py-3 backdrop-blur-md";

export const authReturnBannerClass =
  "mb-4 rounded-2xl border border-cyan-300/30 bg-cyan-500/15 px-4 py-3 text-center text-cyan-100/90 text-sm backdrop-blur-md";