import { Globe } from "lucide-react";
import { cn } from "@/lib/utils";
import { ANIMATIONS, ANIMATION_DELAYS } from "@/constants/animations";
import { SubdomainForm } from "./SubdomainForm";

export interface SubdomainContentProps {
  subdomain: string;
  onSubdomainChange: (value: string) => void;
  error: string;
  isSubmitting: boolean;
  mounted: boolean;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

export function SubdomainContent({
  subdomain,
  onSubdomainChange,
  error,
  isSubmitting,
  mounted,
  onSubmit,
}: SubdomainContentProps) {
  const scaleIn = mounted ? ANIMATIONS.scaleIn.mounted : ANIMATIONS.scaleIn.unmounted;
  const fadeIn = mounted ? ANIMATIONS.fadeIn.mounted : ANIMATIONS.fadeIn.unmounted;

  return (
    <div
      className={cn(
        "w-full max-w-sm overflow-hidden rounded-2xl bg-white",
        ANIMATIONS.scaleIn.base,
        ANIMATION_DELAYS.medium,
        scaleIn,
        mounted ? "translate-y-0" : "translate-y-8"
      )}
      style={{
        border: "1px solid rgba(66,139,77,0.12)",
        boxShadow: "0 24px 60px -10px rgba(66,139,77,0.14), 0 8px 24px -4px rgba(0,0,0,0.06)",
      }}
    >
      {/* Top accent bar */}
      <div
        className="h-[3px] w-full"
        style={{ background: "linear-gradient(90deg, #357a3f 0%, #5aaa67 45%, #428B4D 100%)" }}
      />

      <div className="px-8 pb-8 pt-7">
        {/* Icon + heading */}
        <div
          className={cn(
            "space-y-3 text-center",
            ANIMATIONS.fadeIn.base,
            ANIMATION_DELAYS.long,
            fadeIn
          )}
        >
          <div
            className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl shadow-lg"
            style={{
              background: "linear-gradient(135deg, #428B4D 0%, #357a3f 100%)",
              boxShadow: "0 8px 20px -4px rgba(66,139,77,0.40)",
            }}
          >
            <Globe className="h-5 w-5 text-white" strokeWidth={2} />
          </div>
          <div className="space-y-1">
            <h1 className="text-xl font-bold tracking-tight text-slate-800">Enter Workspace</h1>
            <p className="text-xs text-slate-500 leading-relaxed">
              Each subdomain has its own secure workspace entry point.
            </p>
          </div>
        </div>

        {/* Form */}
        <div
          className={cn(
            "mt-6",
            ANIMATIONS.fadeIn.base,
            ANIMATION_DELAYS.extraLong,
            fadeIn
          )}
        >
          <SubdomainForm
            subdomain={subdomain}
            onSubdomainChange={onSubdomainChange}
            error={error}
            isSubmitting={isSubmitting}
            mounted={mounted}
            onSubmit={onSubmit}
          />
        </div>

        {/* Support link */}
        <p
          className={cn(
            "mt-5 text-center text-[11px] text-slate-400",
            ANIMATIONS.fadeIn.base,
            ANIMATION_DELAYS.longest,
            fadeIn
          )}
        >
          Need help?{" "}
          <a
            href="mailto:support@oxyfinz.com"
            className="font-semibold text-[#428B4D] underline-offset-4 transition-colors duration-200 hover:underline"
          >
            support@oxyfinz.com
          </a>
        </p>
      </div>
    </div>
  );
}