'use client';
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { KeyRound, Phone, Mail } from "lucide-react"
import { useCallback, useState } from "react"
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";
import LoginBG from './login-bg.jpg';
import { toast } from "sonner";
import Image from "next/image";

export type SubmitMode = 'password' | 'phone' | 'email';
export type LoginFormData = {
  type: SubmitMode;
  account?: string;
  password?: string;
  phone?: string;
  email?: string;
  code?: string;
}

export type SendCodeMode = 'phone' | 'email';
export type SendCodeFormData = {
  type: SendCodeMode;
  phone?: string;
  email?: string;
}


export function useLoginForm(onSubmit: (data: LoginFormData) => Promise<void>, onSendCode: (data: SendCodeFormData) => Promise<void>) {
  const [loginMode, setLoginMode] = useState<SubmitMode>('password');

  const handleForgetPassword = useCallback(() => {
    toast.warning('开发中，敬请期待！暂时可通过发送邮件至网站管理员进行密码重置。');
  }, []);

  const handleSubmit = useCallback(async (formData: LoginFormData) => {
    try {
      await onSubmit({ ...formData, type: loginMode });
    } catch (error) {
      if (error instanceof Error) {
        toast.error('登录失败，请重试');
      }
    }
  }, [loginMode, onSubmit]);

  const handleSendCode = useCallback(async (formData: SendCodeFormData) => {
    try {
      await onSendCode(formData);
    } catch (error) {
      if (error instanceof Error) {
        toast.error('发送验证码失败，请重试');
      }
    }
  }, [onSendCode]);

  return {
    loginMode,
    setLoginMode,
    handleForgetPassword,
    handleSendCode,
    handleSubmit
  };
}



function LoginHeader() {
  return (
    <>
      <div className="flex flex-col items-center text-center">
        <h1 className="text-2xl font-bold">欢迎回来</h1>
        <p className="text-muted-foreground text-balance">
          登陆到您的账户
        </p>
      </div>
    </>
  )
}

function PasswordLoginMode({ forgetPassword }: { forgetPassword: () => void }) {
  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="email">电子邮箱/手机号/账号</Label>
        <Input
          id="password-login-mode-account"
          name="account"
          type="text"
          placeholder="电子邮箱/手机号/账号"
          required
        />
      </div>
      <div className="grid gap-3">
        <div className="flex items-center h-4">
          <Label htmlFor="password">密码</Label>
          <a
            onClick={forgetPassword}
            className="ml-auto text-sm underline-offset-2 hover:underline cursor-pointer"
          >
            忘记密码？
          </a>
        </div>
        <Input
          id="password-login-mode-password"
          name="password"
          type="password"
          required />
      </div>
      <Button type="submit" className="w-full">
        登录
      </Button>
    </>
  )
}

function PhoneLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) => Promise<void> }) {
  const [phone, setPhone] = useState("");
  const handleSendCode = useCallback(() => {
    if (phone.trim().length !== 11) {
      toast.error('请输入正确的手机号');
      return;
    }
    onSendCode({
      type: 'phone',
      phone,
    })
  }, [phone, onSendCode]);

  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="phone">手机号</Label>
        <Input
          id="phone-login-mode-phone"
          name="phone"
          type="text"
          placeholder="+86 手机号"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          required />
      </div>
      <div className="grid gap-3">
        <div className="flex items-center h-4">
          <Label htmlFor="code">验证码</Label>
        </div>
        <div className="flex gap-5">
          <InputOTP
            id="phone-login-mode-code"
            name="code"
            maxLength={6}
            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
            required
          >
            <InputOTPGroup>
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
              <InputOTPSlot index={3} />
              <InputOTPSlot index={4} />
              <InputOTPSlot index={5} />
            </InputOTPGroup>
          </InputOTP>
          <Button type="button" variant="secondary" onClick={handleSendCode}>获取验证码</Button>
        </div>
      </div>
      <Button type="submit" className="w-full">
        注册并登录
      </Button>
    </>
  )
}

function EmailLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) => Promise<void> }) {
  const [email, setEmail] = useState("");
  const handleSendCode = useCallback(() => {
    if (!email.trim().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      toast.error('请输入正确的邮箱地址');
      return;
    }
    onSendCode({
      type: 'email',
      email,
    })
  }, [email, onSendCode]);

  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="email">电子邮箱</Label>
        <Input
          id="email-login-mode-email"
          name="email"
          type="text"
          placeholder="电子邮箱"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required />
      </div>
      <div className="grid gap-3">
        <div className="flex items-center h-4">
          <Label htmlFor="code">验证码</Label>
        </div>
        <div className="flex gap-5">
          <InputOTP
            id="email-login-mode-code"
            name="code"
            maxLength={6}
            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
            required
          >
            <InputOTPGroup>
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
              <InputOTPSlot index={3} />
              <InputOTPSlot index={4} />
              <InputOTPSlot index={5} />
            </InputOTPGroup>
          </InputOTP>
          <Button type="button" variant="secondary" onClick={handleSendCode}>获取验证码</Button>
        </div>
      </div>
      <Button type="submit" className="w-full">
        注册并登录
      </Button>
    </>
  )
}

export function LoginForm({
  onSubmit,
  onSendCode,
  className,
}: {
  onSubmit: (data: LoginFormData) => Promise<void>;
  onSendCode: (data: SendCodeFormData) => Promise<void>;
  className?: string;
}) {
  const {
    loginMode,
    setLoginMode,
    handleForgetPassword,
    handleSendCode,
    handleSubmit,
  } = useLoginForm(onSubmit, onSendCode);

  return (
    <div className={cn("flex flex-col gap-6", className)}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid p-0 md:grid-cols-2">
          <form className="p-6 md:p-8" onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.currentTarget);
            handleSubmit({
              type: loginMode,
              account: formData.get('account')?.toString(),
              password: formData.get('password')?.toString(),
              phone: formData.get('phone')?.toString(),
              email: formData.get('email')?.toString(),
              code: formData.get('code')?.toString(),
            })
          }}>
            <div className="flex flex-col gap-6">

              {loginMode === 'password' ? <PasswordLoginMode forgetPassword={handleForgetPassword} /> : null}
              {loginMode === 'phone' ? <PhoneLoginMode onSendCode={handleSendCode} /> : null}
              {loginMode === 'email' ? <EmailLoginMode onSendCode={handleSendCode} /> : null}

              <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
                <span className="bg-card text-muted-foreground relative z-10 px-2">
                  或者使用
                </span>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <Button variant={loginMode === 'password' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('password')}>
                  <KeyRound />
                </Button>
                <Button variant={loginMode === 'phone' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('phone')}>
                  <Phone />
                </Button>
                <Button variant={loginMode === 'email' ? 'default' : 'outline'} type="button" className="w-full" onClick={() => setLoginMode('email')}>
                  <Mail />
                </Button>
              </div>

              <div className="text-center text-sm">
                还没有账号？{" "}
                <a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('phone')}>
                  注册
                </a>
              </div>
            </div>
          </form>
          <div className="bg-muted relative hidden md:block">
            <Image
              src={LoginBG.src}
              alt="Image"
              width={500}
              height={500}
              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
              priority
              quality={100}
            />
          </div>
        </CardContent>
      </Card>
      <div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
        登录即表示您同意我们的{" "}
        <a href="#" className="underline underline-offset-4">
          服务条款
        </a>{" "}
        和{" "}
        <a href="#" className="underline underline-offset-4">
          隐私政策
        </a>
      </div>
    </div >
  )
}