"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { Loader2 } from "lucide-react";
import { useSubdomainForm } from "@/hooks/useSubdomainForm";
import { SubdomainHeader } from "@/components/subdomain/SubdomainHeader";
import { SubdomainContent } from "@/components/subdomain/SubdomainContent";
import { ANIMATION_DELAYS } from "@/constants/animations";
import { isTenantSubdomainOxy } from "@/lib/subdomain-utils";

export default function AddSubdomainPage() {
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [redirectingToLogin, setRedirectingToLogin] = useState(false);
  const { subdomain, setSubdomain, error, isSubmitting, handleSubmit } =
    useSubdomainForm();

  useEffect(() => {
    setMounted(true);
  }, []);

  // *.oxyworkspace.com/add-subdomain → redirect to *.oxyworkspace.com/login (same as middleware)
  useEffect(() => {
    if (typeof window === "undefined") return;
    const hostname = window.location.hostname ?? "";
    if (isTenantSubdomainOxy(hostname)) {
      setRedirectingToLogin(true);
      router.replace("/login");
    }
  }, [router]);

  if (redirectingToLogin) {
    return (
      <div
        className="flex min-h-screen items-center justify-center"
        style={{ background: "linear-gradient(135deg, #f0f7f1 0%, #ffffff 50%, #f4f8f5 100%)" }}
      >
        <div className="flex flex-col items-center gap-3">
          <Loader2 className="h-8 w-8 animate-spin text-[#428B4D]" />
          <p className="text-sm text-slate-500">Redirecting to login...</p>
        </div>
      </div>
    );
  }

  return (
    <div
      className="grid min-h-screen lg:grid-cols-2"
      style={{ background: "linear-gradient(135deg, #f0f7f1 0%, #ffffff 50%, #f4f8f5 100%)" }}
    >
      {/* ── Left panel ── */}
      <div className="relative flex flex-col gap-6 overflow-hidden px-6 py-10 md:px-12 lg:px-16">

        {/* Ambient decorative blobs */}
        <div className="pointer-events-none select-none" aria-hidden>
          <div
            className="absolute -top-24 -left-24 h-80 w-80 rounded-full opacity-60"
            style={{
              background: "radial-gradient(circle, rgba(66,139,77,0.12) 0%, transparent 70%)",
              animation: "float-blob 8s ease-in-out infinite",
            }}
          />
          <div
            className="absolute top-1/2 -right-20 h-60 w-60 rounded-full opacity-50"
            style={{
              background: "radial-gradient(circle, rgba(91,170,103,0.10) 0%, transparent 70%)",
              animation: "float-blob 11s ease-in-out infinite reverse",
            }}
          />
          <div
            className="absolute -bottom-16 left-1/3 h-48 w-48 rounded-full opacity-40"
            style={{
              background: "radial-gradient(circle, rgba(66,139,77,0.09) 0%, transparent 70%)",
              animation: "float-blob 9s ease-in-out infinite 2s",
            }}
          />
        </div>

        {/* Logo */}
        <SubdomainHeader mounted={mounted} />

        {/* Card */}
        <div className="relative flex flex-1 items-center justify-center">
          <SubdomainContent
            subdomain={subdomain}
            onSubdomainChange={setSubdomain}
            error={error}
            isSubmitting={isSubmitting}
            mounted={mounted}
            onSubmit={handleSubmit}
          />
        </div>
      </div>

      {/* ── Right panel (image) ── */}
      <div
        className={`relative hidden lg:block transition-all duration-1000 ${ANIMATION_DELAYS.long} ${
          mounted ? "opacity-100 scale-100" : "opacity-0 scale-105"
        }`}
      >
        <Image
          src="/assets/Signin_1.png"
          alt="Subdomain background"
          fill
          sizes="50vw"
          priority
          className="object-cover object-center"
        />
      </div>
    </div>
  );
}