"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { signIn } from "next-auth/react";
import {
  ArrowRightIcon,
  CheckCircle2Icon,
  CoinsIcon,
  Globe2Icon,
  KeyRoundIcon,
  Loader2Icon,
  LockIcon,
  MailIcon,
  PieChartIcon,
  TrendingUpIcon,
  WalletIcon,
} from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { FluxentLogo } from "@/components/fluxent-logo";
import { ThemeToggle } from "@/components/theme-toggle";

interface LoginFormProps {
  oidcEnabled: boolean;
  oidcName: string;
}

export function LoginForm({ oidcEnabled, oidcName }: LoginFormProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl") || "/";
  const authError = searchParams.get("error");
  const registered = searchParams.get("registered");

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [rememberMe, setRememberMe] = React.useState(false);
  const [isPending, setIsPending] = React.useState(false);
  const [isOidcPending, setIsOidcPending] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState<string | null>(() => {
    if (authError === "CredentialsSignin") {
      return "邮箱或密码错误，请核对后重试";
    }
    if (authError) {
      return "认证过程中遇到问题，请重新登录";
    }
    return null;
  });

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMessage(null);

    if (!email.trim()) {
      setErrorMessage("请输入登录邮箱");
      return;
    }
    if (!password) {
      setErrorMessage("请输入登录密码");
      return;
    }

    try {
      setIsPending(true);
      const res = await signIn("credentials", {
        email: email.trim(),
        password,
        redirect: false,
        callbackUrl,
      });

      if (res?.error) {
        if (res.error === "CredentialsSignin" || res.code === "credentials") {
          setErrorMessage("账号或密码不正确，请重新检查");
        } else {
          setErrorMessage("登录失败，请稍后重试");
        }
        return;
      }

      router.push(callbackUrl);
      router.refresh();
    } catch {
      setErrorMessage("网络异常，无法连接到认证服务器");
    } finally {
      setIsPending(false);
    }
  };

  const handleOidcLogin = async () => {
    try {
      setIsOidcPending(true);
      await signIn("oidc", { callbackUrl });
    } catch {
      setIsOidcPending(false);
      setErrorMessage("SSO 单点登录发起失败，请稍后重试");
    }
  };

  return (
    <div className="relative flex min-h-svh flex-col justify-between overflow-hidden bg-background">
      {/* Decorative ambient background meshes */}
      <div className="pointer-events-none absolute -top-40 -right-40 size-[32rem] rounded-full bg-primary/5 blur-3xl" />
      <div className="pointer-events-none absolute top-1/2 -left-48 size-[34rem] rounded-full bg-primary/5 blur-3xl" />
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.08),rgba(255,255,255,0))]" />

      {/* Top navigation / branding header */}
      <header className="relative z-10 flex h-16 w-full items-center justify-between px-6 md:px-12">
        <Link
          href="/"
          className="group flex items-center gap-2.5 outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <FluxentLogo size={32} />
          <div className="flex flex-col">
            <span className="font-heading text-base font-semibold tracking-tight">
              Fluxent
            </span>
            <span className="text-[10px] tracking-wider text-muted-foreground uppercase">
              Financial OS
            </span>
          </div>
        </Link>
        <div className="flex items-center gap-2">
          <ThemeToggle />
        </div>
      </header>

      {/* Main content grid */}
      <main className="relative z-10 flex flex-1 items-center justify-center px-4 py-8 sm:px-6">
        <div className="grid w-full max-w-4xl gap-8 lg:grid-cols-[1.1fr_1fr] lg:items-center">
          {/* Left Hero feature showcase (visible on large screen) */}
          <div className="hidden flex-col gap-8 pr-4 lg:flex">
            <div className="flex flex-col gap-3">
              <div className="inline-flex w-fit items-center gap-2 rounded-full border border-border/80 bg-muted/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur-xs">
                <span className="inline-block size-1.5 rounded-full bg-primary animate-pulse" />
                全球多币种 • 全场景记账 • 实时汇率
              </div>
              <h1 className="font-heading text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                掌控每一笔资产流动，
                <br />
                让财务管理行云流水。
              </h1>
              <p className="text-muted-foreground text-sm leading-relaxed">
                无论是跨国多币种账户、信用卡记账，还是银行与电子钱包资金调度，Fluxent
                提供银行级的精确记录与现代化的优雅交互体验。
              </p>
            </div>

            {/* Visual value propositions */}
            <div className="grid grid-cols-2 gap-3">
              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <CoinsIcon className="size-4" />
                </div>
                <h3 className="text-xs font-semibold text-foreground">
                  全币种与汇率追踪
                </h3>
                <p className="text-[11px] text-muted-foreground leading-normal">
                  多币种入账与清算汇率对账，资产估值一目了然
                </p>
              </div>

              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <WalletIcon className="size-4" />
                </div>
                <h3 className="text-xs font-semibold text-foreground">
                  全渠道多账户管理
                </h3>
                <p className="text-[11px] text-muted-foreground leading-normal">
                  银行账户、电子钱包与支付卡渠道统一调度
                </p>
              </div>

              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <TrendingUpIcon className="size-4" />
                </div>
                <h3 className="text-xs font-semibold text-foreground">
                  复式记账与场景分类
                </h3>
                <p className="text-[11px] text-muted-foreground leading-normal">
                  标准借贷分录与消费场景画像，财务合规严谨
                </p>
              </div>

              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <PieChartIcon className="size-4" />
                </div>
                <h3 className="text-xs font-semibold text-foreground">
                  资产汇总与统计
                </h3>
                <p className="text-[11px] text-muted-foreground leading-normal">
                  跨账户资金结构分布分析，收支报表一览无余
                </p>
              </div>
            </div>
          </div>

          {/* Right Login Card */}
          <div className="w-full">
            <Card className="border-border/80 shadow-lg shadow-black/5 dark:shadow-black/25">
              <CardHeader className="gap-1.5 pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-xl font-bold tracking-tight">
                    欢迎回到 Fluxent
                  </CardTitle>
                  <div className="flex size-7 items-center justify-center rounded-lg bg-primary/5 text-primary lg:hidden">
                    <FluxentLogo size={24} />
                  </div>
                </div>
                <CardDescription className="text-xs">
                  输入您的注册邮箱与密码以继续使用
                </CardDescription>
              </CardHeader>

              <CardContent className="flex flex-col gap-4">
                {registered === "1" && (
                  <Alert className="border-border bg-muted/40">
                    <CheckCircle2Icon className="text-foreground" />
                    <AlertTitle>账号注册成功</AlertTitle>
                    <AlertDescription className="text-xs">
                      您的 Fluxent 账户已就绪，请使用新密码进行登录。
                    </AlertDescription>
                  </Alert>
                )}

                {errorMessage && (
                  <Alert variant="destructive">
                    <AlertDescription className="text-xs">
                      {errorMessage}
                    </AlertDescription>
                  </Alert>
                )}

                {/* OIDC Single Sign On Button (if enabled) */}
                {oidcEnabled && (
                  <div className="flex flex-col gap-3">
                    <Button
                      type="button"
                      variant="outline"
                      size="lg"
                      onClick={handleOidcLogin}
                      disabled={isOidcPending || isPending}
                      className="w-full justify-center text-xs font-medium"
                    >
                      {isOidcPending ? (
                        <Loader2Icon
                          data-icon="inline-start"
                          className="animate-spin"
                        />
                      ) : (
                        <Globe2Icon data-icon="inline-start" />
                      )}
                      通过 {oidcName} 快速登录
                    </Button>

                    <div className="relative flex items-center justify-center">
                      <Separator className="w-full" />
                      <span className="absolute bg-card px-2 text-[11px] uppercase tracking-wider text-muted-foreground">
                        或者使用邮箱密码
                      </span>
                    </div>
                  </div>
                )}

                {/* Main Email & Password Form */}
                <form onSubmit={handleSubmit} className="flex flex-col gap-3.5">
                  <div className="flex flex-col gap-1.5">
                    <Label htmlFor="email" className="text-xs font-medium">
                      邮箱地址
                    </Label>
                    <div className="relative flex items-center">
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        autoComplete="email"
                        placeholder="name@company.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                        disabled={isPending}
                        className="pl-8"
                      />
                      <MailIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                    </div>
                  </div>

                  <div className="flex flex-col gap-1.5">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="password" className="text-xs font-medium">
                        密码
                      </Label>
                    </div>
                    <div className="relative flex items-center">
                      <Input
                        id="password"
                        name="password"
                        type="password"
                        autoComplete="current-password"
                        placeholder="••••••••"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                        disabled={isPending}
                        className="pl-8"
                      />
                      <LockIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                    </div>
                  </div>

                  <div className="flex items-center justify-between pt-0.5">
                    <div className="flex items-center gap-2">
                      <Checkbox
                        id="rememberMe"
                        checked={rememberMe}
                        onCheckedChange={(checked) =>
                          setRememberMe(Boolean(checked))
                        }
                      />
                      <label
                        htmlFor="rememberMe"
                        className="text-xs text-muted-foreground cursor-pointer select-none"
                      >
                        保持此设备的登录状态
                      </label>
                    </div>
                  </div>

                  <Button
                    type="submit"
                    size="lg"
                    disabled={isPending}
                    className="mt-1 w-full justify-center text-xs font-medium"
                  >
                    {isPending ? (
                      <Loader2Icon
                        data-icon="inline-start"
                        className="animate-spin"
                      />
                    ) : (
                      <KeyRoundIcon data-icon="inline-start" />
                    )}
                    {isPending ? "正在登录..." : "登录进入系统"}
                  </Button>
                </form>
              </CardContent>

              <CardFooter className="justify-center border-t border-border/50 py-3 text-xs text-muted-foreground">
                <p>
                  还没有 Fluxent 账号？{" "}
                  <Link
                    href="/register"
                    className="font-medium text-foreground underline underline-offset-4 hover:text-primary"
                  >
                    立即注册新账号
                    <ArrowRightIcon
                      data-icon="inline-end"
                      className="inline size-3 ml-0.5"
                    />
                  </Link>
                </p>
              </CardFooter>
            </Card>

            <p className="mt-4 text-center text-[11px] text-muted-foreground">
              登录即代表您同意 Fluxent 的服务条款与隐私政策
            </p>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="relative z-10 flex h-12 items-center justify-center border-t border-border/40 px-6 text-center text-[11px] text-muted-foreground">
        <span>© {new Date().getFullYear()} Fluxent Financial. 保留所有权利。</span>
      </footer>
    </div>
  );
}