import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Eye, EyeOff, Loader2, Lock, Monitor, User } from "lucide-react";
import { LoginFormData } from "@/types/auth";
import { ErrorMessage } from "./ErrorMessage";

interface LoginFormProps {
  formData: LoginFormData;
  isLoading: boolean;
  error: string;
  showPassword: boolean;
  isPopMode: boolean;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: (e: React.FormEvent) => void;
  onTogglePassword: () => void;
  onTogglePop: () => void;
}

/**
 * 로그인 폼 컴포넌트 (컴팩트)
 */
export function LoginForm({
  formData,
  isLoading,
  error,
  showPassword,
  isPopMode,
  onInputChange,
  onSubmit,
  onTogglePassword,
  onTogglePop,
}: LoginFormProps) {
  return (
    <div className="space-y-3">
      <ErrorMessage message={error} />

      <form onSubmit={onSubmit} className="space-y-3">
        {/* 사용자 ID */}
        <div className="relative">
          <User className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
          <Input
            id="userId"
            name="userId"
            type="text"
            placeholder="사용자 ID"
            value={formData.userId}
            onChange={onInputChange}
            disabled={isLoading}
            className="h-11 pl-9"
            required
          />
        </div>

        {/* 비밀번호 */}
        <div className="relative">
          <Lock className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
          <Input
            id="password"
            name="password"
            type={showPassword ? "text" : "password"}
            placeholder="비밀번호"
            value={formData.password}
            onChange={onInputChange}
            disabled={isLoading}
            className="h-11 pr-10 pl-9"
            required
          />
          <button
            type="button"
            onClick={onTogglePassword}
            className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-700"
            disabled={isLoading}
            tabIndex={-1}
          >
            {showPassword ? (
              <EyeOff className="h-4 w-4" />
            ) : (
              <Eye className="h-4 w-4" />
            )}
          </button>
        </div>

        {/* POP 모드 토글 (컴팩트) */}
        <label className="flex cursor-pointer items-center justify-between text-sm text-gray-600">
          <span className="flex items-center gap-2">
            <Monitor className="h-4 w-4 text-gray-500" />
            POP 모드
          </span>
          <Switch
            checked={isPopMode}
            onCheckedChange={onTogglePop}
            disabled={isLoading}
          />
        </label>

        {/* 로그인 버튼 */}
        <Button
          type="submit"
          className="h-11 w-full font-semibold"
          style={{ backgroundColor: "#00508f" }}
          disabled={isLoading}
        >
          {isLoading ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              로그인 중...
            </>
          ) : (
            "로그인"
          )}
        </Button>
      </form>
    </div>
  );
}
