'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 { useState } from "react"
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";

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 RegisterHeader() {
  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 PasswordMode() {
  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="email">电子邮箱/手机号/账号</Label>
        <Input
          id="account"
          type="text"
          placeholder="电子邮箱/手机号/账号"
          required
        />
      </div>
      <div className="grid gap-3">
        <div className="flex items-center h-4">
          <Label htmlFor="password">密码</Label>
          <a
            href="#"
            className="ml-auto text-sm underline-offset-2 hover:underline"
          >
            忘记密码？
          </a>
        </div>
        <Input id="password" type="password" required />
      </div>
      <Button type="submit" className="w-full">
        登录
      </Button>
    </>
  )
}

function PhoneMode() {
  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="phone">手机号</Label>
        <Input id="phone" type="text" placeholder="手机号" 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
            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 variant="secondary">获取验证码</Button>
        </div>
      </div>
      <Button type="submit" className="w-full">
        登录
      </Button>
    </>
  )
}

function EmailMode() {
  return (
    <>
      <LoginHeader />
      <div className="grid gap-3">
        <Label htmlFor="email">电子邮箱</Label>
        <Input id="email" type="text" placeholder="电子邮箱" 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
            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 variant="secondary">获取验证码</Button>
        </div>
      </div>
      <Button type="submit" className="w-full">
        登录
      </Button>
    </>
  )
}

function RegisterMode() {
  return (
    <>
      <RegisterHeader />
      <div className="grid gap-3">
        <Label htmlFor="email">账户名</Label>
        <Input id="account" type="text" placeholder="账户名" required />
      </div>
      <div className="grid gap-3">
        <Label htmlFor="email">电子邮箱</Label>
        <Input id="email" type="text" placeholder="电子邮箱" 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
            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 variant="secondary">获取验证码</Button>
        </div>
      </div>
      <Button type="submit" className="w-full">
        注册
      </Button>
    </>
  )
}

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<"div">) {
  const [loginMode, setLoginMode] = useState<'password' | 'phone' | 'email' | 'register'>('password');

  return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid p-0 md:grid-cols-2">
          <form className="p-6 md:p-8">
            <div className="flex flex-col gap-6">

              {loginMode === 'password' ? <PasswordMode /> : null}
              {loginMode === 'phone' ? <PhoneMode /> : null}
              {loginMode === 'email' ? <EmailMode /> : null}
              {loginMode === 'register' ? <RegisterMode /> : null}

              {
                loginMode !== 'register' && (
                  <>
                    <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="outline" type="button" className="w-full" onClick={() => setLoginMode('password')}>
                        <KeyRound />
                      </Button>
                      <Button variant="outline" type="button" className="w-full" onClick={() => setLoginMode('phone')}>
                        <Phone />
                      </Button>
                      <Button variant="outline" type="button" className="w-full" onClick={() => setLoginMode('email')}>
                        <Mail />
                      </Button>
                    </div>
                  </>
                )
              }

              {
                loginMode === 'register' ? (
                  <>
                    <div className="text-center text-sm">
                      已有账号？{" "}
                      <a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('password')}>
                        直接登录
                      </a>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="text-center text-sm">
                      还没有账号？{" "}
                      <a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('register')}>
                        注册
                      </a>
                    </div>
                  </>
                )
              }
            </div>
          </form>
          <div className="bg-muted relative hidden md:block">
            <img
              src="/placeholder.svg"
              alt="Image"
              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
            />
          </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 >
  )
}