ERP-node/frontend/components/auth/RegisterForm.tsx

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Eye, EyeOff, Loader2, ArrowLeft } from "lucide-react";
import { RegisterFormData } from "@/types/auth";
import { ErrorMessage } from "./ErrorMessage";
import Link from "next/link";

interface RegisterFormProps {
  formData: RegisterFormData;
  isLoading: boolean;
  error: string;
  validationErrors: Record<string, string>;
  showPassword: boolean;
  showPasswordConfirm: boolean;
  isFormValid: boolean;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: (e: React.FormEvent) => void;
  onTogglePassword: () => void;
  onTogglePasswordConfirm: () => void;
}

/**
 * 회원가입 폼 컴포넌트
 */
export function RegisterForm({
  formData,
  isLoading,
  error,
  validationErrors,
  showPassword,
  showPasswordConfirm,
  isFormValid,
  onInputChange,
  onSubmit,
  onTogglePassword,
  onTogglePasswordConfirm,
}: RegisterFormProps) {
  return (
    <Card className="border-0 shadow-xl">
      <CardHeader className="space-y-1">
        <CardTitle className="text-center text-2xl">회원가입</CardTitle>
        <CardDescription className="text-center">새로운 계정을 생성합니다</CardDescription>
      </CardHeader>
      <CardContent>
        <ErrorMessage message={error} />

        <form onSubmit={onSubmit} className="space-y-4">
          {/* 사용자 ID */}
          <div className="space-y-2">
            <Label htmlFor="userId">
              사용자 ID <span className="text-destructive">*</span>
            </Label>
            <Input
              id="userId"
              name="userId"
              type="text"
              placeholder="사용자 ID를 입력하세요"
              value={formData.userId}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-11"
              required
            />
            {validationErrors.userId && (
              <p className="text-xs text-destructive">{validationErrors.userId}</p>
            )}
          </div>

          {/* 비밀번호 */}
          <div className="space-y-2">
            <Label htmlFor="password">
              비밀번호 <span className="text-destructive">*</span>
            </Label>
            <div className="relative">
              <Input
                id="password"
                name="password"
                type={showPassword ? "text" : "password"}
                placeholder="비밀번호를 입력하세요"
                value={formData.password}
                onChange={onInputChange}
                disabled={isLoading}
                className="h-11 pr-10"
                required
              />
              <button
                type="button"
                onClick={onTogglePassword}
                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-slate-400 transition-colors hover:text-slate-600"
                disabled={isLoading}
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
            {validationErrors.password && (
              <p className="text-xs text-destructive">{validationErrors.password}</p>
            )}
          </div>

          {/* 비밀번호 확인 */}
          <div className="space-y-2">
            <Label htmlFor="passwordConfirm">
              비밀번호 확인 <span className="text-destructive">*</span>
            </Label>
            <div className="relative">
              <Input
                id="passwordConfirm"
                name="passwordConfirm"
                type={showPasswordConfirm ? "text" : "password"}
                placeholder="비밀번호를 다시 입력하세요"
                value={formData.passwordConfirm}
                onChange={onInputChange}
                disabled={isLoading}
                className="h-11 pr-10"
                required
              />
              <button
                type="button"
                onClick={onTogglePasswordConfirm}
                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-slate-400 transition-colors hover:text-slate-600"
                disabled={isLoading}
              >
                {showPasswordConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
            {validationErrors.passwordConfirm && (
              <p className="text-xs text-destructive">{validationErrors.passwordConfirm}</p>
            )}
          </div>

          {/* 이름 */}
          <div className="space-y-2">
            <Label htmlFor="userName">
              이름 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="userName"
              name="userName"
              type="text"
              placeholder="이름을 입력하세요"
              value={formData.userName}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-11"
              required
            />
            {validationErrors.userName && (
              <p className="text-xs text-destructive">{validationErrors.userName}</p>
            )}
          </div>

          {/* 면허번호 */}
          <div className="space-y-2">
            <Label htmlFor="licenseNumber">
              면허번호 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="licenseNumber"
              name="licenseNumber"
              type="text"
              placeholder="예: 12-34-567890-12"
              value={formData.licenseNumber}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-11"
              required
            />
            {validationErrors.licenseNumber && (
              <p className="text-xs text-destructive">{validationErrors.licenseNumber}</p>
            )}
            <p className="text-xs text-muted-foreground">
              운전면허번호를 하이픈(-)을 포함하여 입력해주세요
            </p>
          </div>

          {/* 차량 번호 */}
          <div className="space-y-2">
            <Label htmlFor="vehicleNumber">
              차량 번호 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="vehicleNumber"
              name="vehicleNumber"
              type="text"
              placeholder="예: 12가3456 또는 123가4567"
              value={formData.vehicleNumber}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-11"
              required
            />
            {validationErrors.vehicleNumber && (
              <p className="text-xs text-destructive">{validationErrors.vehicleNumber}</p>
            )}
            <p className="text-xs text-muted-foreground">
              한국 차량 번호 형식으로 입력해주세요
            </p>
          </div>

          {/* 휴대폰 번호 */}
          <div className="space-y-2">
            <Label htmlFor="phoneNumber">
              휴대폰 번호 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="phoneNumber"
              name="phoneNumber"
              type="tel"
              placeholder="예: 010-1234-5678"
              value={formData.phoneNumber}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-11"
              required
            />
            {validationErrors.phoneNumber && (
              <p className="text-xs text-destructive">{validationErrors.phoneNumber}</p>
            )}
            <p className="text-xs text-muted-foreground">
              하이픈(-)을 포함하여 입력해주세요
            </p>
          </div>

          {/* 버튼 그룹 */}
          <div className="flex gap-2 pt-2">
            <Link href="/login" className="flex-1">
              <Button
                type="button"
                variant="outline"
                className="h-11 w-full"
                disabled={isLoading}
              >
                <ArrowLeft className="mr-2 h-4 w-4" />
                로그인으로
              </Button>
            </Link>
            <Button
              type="submit"
              className="h-11 flex-1 bg-slate-900 font-medium text-white hover:bg-slate-800"
              disabled={isLoading || !isFormValid}
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  가입 중...
                </>
              ) : (
                "회원가입"
              )}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}