import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation";
import { Loader2, Eye, EyeOff } from "lucide-react";
import { useState } from "react";

export function LoginForm({
  className,
  onSubmit,
  userId,
  setUserId,
  userPassword,
  setUserPassword,
  error,
  isLoading,
  saveId,
  setSaveId,
  ...props
}: React.ComponentProps<"form"> & {
  onSubmit: (e: React.FormEvent) => void;
  userId: string;
  setUserId: (value: string) => void;
  userPassword: string;
  setUserPassword: (value: string) => void;
  error?: string;
  isLoading?: boolean;
  saveId: boolean;
  setSaveId: (value: boolean) => void;
}) {
  const router = useRouter();
  const [showPassword, setShowPassword] = useState(false);

  return (
    <form className={cn("flex flex-col gap-3 lg:gap-4", className)} onSubmit={onSubmit} {...props}>
      <FieldGroup>
        <div className="flex flex-col items-center gap-0.5 lg:gap-1 text-center mb-2">
          <h1 className="text-lg lg:text-2xl font-bold">로그인</h1>
          <p className="text-muted-foreground text-xs lg:text-sm text-balance">
            한우 유전체 컨설팅 서비스에 오신 것을 환영합니다
          </p>
        </div>
        <Field>
          <FieldLabel htmlFor="userId" className="text-sm lg:text-base">아이디</FieldLabel>
          <Input
            id="userId"
            type="text"
            value={userId}
            onChange={(e) => setUserId(e.target.value)}
            placeholder="아이디를 입력하세요"
            disabled={isLoading}
            className="h-10 lg:h-11"
            required
          />
        </Field>
        <Field>
          <div className="flex items-center justify-between">
            <FieldLabel htmlFor="password" className="text-sm lg:text-base">비밀번호</FieldLabel>
            <a href="/findpw" className="text-xs text-primary hover:underline">
              비밀번호 찾기
            </a>
          </div>
          <div className="relative">
            <Input
              id="password"
              type={showPassword ? "text" : "password"}
              value={userPassword}
              onChange={(e) => setUserPassword(e.target.value)}
              placeholder="비밀번호를 입력하세요"
              disabled={isLoading}
              className="h-10 lg:h-11 pr-10"
              required
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
              tabIndex={-1}
            >
              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
            </button>
          </div>
        </Field>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={saveId}
            onChange={(e) => setSaveId(e.target.checked)}
            className="rounded border-gray-300 text-primary focus:ring-primary"
          />
          <span className="text-xs lg:text-sm text-gray-600">아이디 저장</span>
        </label>
        {error && (
          <div className="rounded-md bg-red-50 p-2 lg:p-3 text-xs lg:text-sm text-red-600">
            {error}
          </div>
        )}
        <Field>
          <Button
            type="submit"
            className="w-full h-10 lg:h-11 bg-primary hover:bg-primary/90 text-white shadow-lg hover:shadow-xl transition-all duration-300"
            disabled={isLoading}
          >
            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            {isLoading ? '로그인 중...' : '로그인'}
          </Button>
        </Field>
        <FieldSeparator>또는</FieldSeparator>
        <Field>
          <Button
            variant="outline"
            type="button"
            onClick={() => router.push('/signup')}
            disabled={isLoading}
            className="w-full h-10 lg:h-11 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground hover:border-transparent transition-all duration-300"
          >
            회원가입
          </Button>
        </Field>
        <div className="text-center">
          <a href="/findid" className="text-xs lg:text-sm text-gray-500 hover:text-primary">
            아이디를 잊으셨나요?
          </a>
        </div>
      </FieldGroup>
    </form>
  )
}
