"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/atoms/button";
import { SignupForm } from "../SignupForm/SignupForm";
import { LoginForm } from "../LoginForm/LoginForm";
import { LinkWhmcsForm } from "../LinkWhmcsForm/LinkWhmcsForm";
import { getSafeRedirect } from "@/features/auth/utils/route-protection";

interface HighlightItem {
  title: string;
  description: string;
}

interface InlineAuthSectionProps {
  title: string;
  description?: string | undefined;
  redirectTo?: string | undefined;
  initialMode?: "signup" | "login" | undefined;
  highlights?: HighlightItem[] | undefined;
  className?: string | undefined;
}

export function InlineAuthSection({
  title,
  description,
  redirectTo,
  initialMode = "signup",
  highlights = [],
  className = "",
}: InlineAuthSectionProps) {
  const router = useRouter();
  const [mode, setMode] = useState<"signup" | "login" | "migrate">(initialMode);
  const safeRedirect = getSafeRedirect(redirectTo, "/account");

  return (
    <div className={`bg-muted/50 border border-border rounded-2xl p-6 md:p-8 ${className}`}>
      <div className="text-center mb-6">
        <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
        {description && (
          <p className="text-sm text-muted-foreground max-w-2xl mx-auto">{description}</p>
        )}
      </div>

      <div className="flex justify-center">
        <div className="inline-flex flex-wrap justify-center rounded-full border border-border bg-background p-1 shadow-[var(--cp-shadow-1)] gap-1">
          <Button
            type="button"
            size="sm"
            variant={mode === "signup" ? "default" : "ghost"}
            onClick={() => setMode("signup")}
            className="rounded-full"
          >
            Create account
          </Button>
          <Button
            type="button"
            size="sm"
            variant={mode === "login" ? "default" : "ghost"}
            onClick={() => setMode("login")}
            className="rounded-full"
          >
            Sign in
          </Button>
          <Button
            type="button"
            size="sm"
            variant={mode === "migrate" ? "default" : "ghost"}
            onClick={() => setMode("migrate")}
            className="rounded-full"
          >
            Migrate
          </Button>
        </div>
      </div>

      <div className="mt-6">
        <div className="bg-card border border-border rounded-xl p-5 sm:p-6 shadow-[var(--cp-shadow-1)]">
          {mode === "signup" && (
            <>
              <h4 className="text-base font-semibold text-foreground mb-2">Create your account</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Set up your portal access in a few simple steps.
              </p>
              <SignupForm redirectTo={redirectTo} showFooterLinks={false} />
            </>
          )}
          {mode === "login" && (
            <>
              <h4 className="text-base font-semibold text-foreground mb-2">Sign in</h4>
              <p className="text-sm text-muted-foreground mb-4">Access your account to continue.</p>
              <LoginForm redirectTo={redirectTo} showSignupLink={false} />
            </>
          )}
          {mode === "migrate" && (
            <>
              <h4 className="text-base font-semibold text-foreground mb-2">Migrate your account</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Use your legacy portal credentials to transfer your account.
              </p>
              <LinkWhmcsForm
                onTransferred={result => {
                  if (result.needsPasswordSet) {
                    const params = new URLSearchParams({
                      email: result.user.email,
                      redirect: safeRedirect,
                    });
                    router.push(`/auth/set-password?${params.toString()}`);
                    return;
                  }
                  router.push(safeRedirect);
                }}
              />
            </>
          )}
        </div>
      </div>

      {highlights.length > 0 && (
        <div className="mt-6 pt-6 border-t border-border">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
            {highlights.map(item => (
              <div key={item.title}>
                <div className="text-sm font-medium text-foreground mb-1">{item.title}</div>
                <div className="text-xs text-muted-foreground">{item.description}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
