import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ArrowRight, Mail, KeyRound, User, Eye, EyeOff } from "lucide-react";
import { useToast } from "@/hooks/useToast.wrapper";
import { verifyServerConnection } from "@/contexts/auth/auth.utils";

interface RegisterFormProps {
  signUp: (email: string, password: string, username: string) => Promise<{
    error: any;
    user: any;
  }>;
  serverStatus: {
    checked: boolean;
    connected: boolean;
    message: string;
  };
  setServerStatus: React.Dispatch<
    React.SetStateAction<{
      checked: boolean;
      connected: boolean;
      message: string;
    }>
  >;
  setRegisterError: React.Dispatch<React.SetStateAction<string | null>>;
}

const RegisterForm: React.FC<RegisterFormProps> = ({
  signUp,
  serverStatus,
  setServerStatus,
  setRegisterError,
}) => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  
  const { toast } = useToast();
  const navigate = useNavigate();

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setRegisterError(null);
    
    // 서버 연결 상태 재확인
    if (!serverStatus.connected) {
      try {
        const currentStatus = await verifyServerConnection();
        setServerStatus({
          checked: true,
          connected: currentStatus.connected,
          message: currentStatus.message
        });
        
        if (!currentStatus.connected) {
          toast({
            title: "서버 연결 실패",
            description: "서버에 연결할 수 없습니다. 네트워크 또는 서버 상태를 확인하세요.",
            variant: "destructive"
          });
          return;
        }
      } catch (error: any) {
        toast({
          title: "연결 확인 오류",
          description: error.message || "서버 연결 확인 중 오류가 발생했습니다.",
          variant: "destructive"
        });
        return;
      }
    }
    
    if (!username || !email || !password || !confirmPassword) {
      toast({
        title: "입력 오류",
        description: "모든 필드를 입력해주세요.",
        variant: "destructive",
      });
      return;
    }
    
    if (password !== confirmPassword) {
      toast({
        title: "비밀번호 불일치",
        description: "비밀번호와 비밀번호 확인이 일치하지 않습니다.",
        variant: "destructive",
      });
      return;
    }
    
    // 비밀번호 강도 검사
    if (password.length < 8) {
      toast({
        title: "비밀번호 강도 부족",
        description: "비밀번호는 최소 8자 이상이어야 합니다.",
        variant: "destructive",
      });
      return;
    }
    
    // 이메일 형식 검사
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
      toast({
        title: "이메일 형식 오류",
        description: "유효한 이메일 주소를 입력해주세요.",
        variant: "destructive",
      });
      return;
    }
    
    setIsLoading(true);
    
    try {
      // 회원가입 시도
      const { error, user } = await signUp(email, password, username);
      
      if (error) {
        // 오류 메시지 출력
        setRegisterError(error.message || '알 수 없는 오류가 발생했습니다.');
        
        // 네트워크 관련 오류인 경우 자세한 안내
        if (error.message && (
            error.message.includes('fetch') || 
            error.message.includes('네트워크') ||
            error.message.includes('CORS'))) {
          toast({
            title: "네트워크 오류",
            description: "서버에 연결할 수 없습니다. 설정에서 CORS 프록시가 활성화되어 있는지 확인하세요.",
            variant: "destructive"
          });
        } 
        // 서버 응답 관련 오류인 경우
        else if (error.message && (
            error.message.includes('400') || 
            error.message.includes('401') ||
            error.message.includes('403') ||
            error.message.includes('500'))) {
          toast({
            title: "서버 응답 오류",
            description: error.message,
            variant: "destructive"
          });
        }
      } else if (user) {
        // 회원가입 성공
        toast({
          title: "회원가입 성공",
          description: "회원가입이 완료되었습니다. 로그인 페이지로 이동합니다.",
        });
        
        // 로그인 페이지로 이동
        navigate("/login");
      }
    } catch (error: any) {
      console.error("회원가입 처리 중 예외 발생:", error);
      setRegisterError(error.message || '예상치 못한 오류가 발생했습니다.');
      
      toast({
        title: "회원가입 오류",
        description: error.message || "회원가입 처리 중 오류가 발생했습니다.",
        variant: "destructive"
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="neuro-flat p-8 mb-6">
      <form onSubmit={handleRegister}>
        <div className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="username" className="text-base">이름</Label>
            <div className="relative">
              <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
              <Input
                id="username"
                type="text"
                placeholder="홍길동"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="pl-10 neuro-pressed"
              />
            </div>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="email" className="text-base">이메일</Label>
            <div className="relative">
              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
              <Input
                id="email"
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10 neuro-pressed"
              />
            </div>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="password" className="text-base">비밀번호</Label>
            <div className="relative">
              <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="pl-10 neuro-pressed"
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
              >
                {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
              </button>
            </div>
            {password && password.length > 0 && password.length < 8 && (
              <p className="text-xs text-red-500 mt-1">비밀번호는 최소 8자 이상이어야 합니다.</p>
            )}
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="confirmPassword" className="text-base">비밀번호 확인</Label>
            <div className="relative">
              <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
              <Input
                id="confirmPassword"
                type={showPassword ? "text" : "password"}
                placeholder="••••••••"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className="pl-10 neuro-pressed"
              />
            </div>
            {confirmPassword && password !== confirmPassword && (
              <p className="text-xs text-red-500 mt-1">비밀번호가 일치하지 않습니다.</p>
            )}
          </div>
          
          <Button
            type="submit"
            className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto"
            disabled={isLoading || (!serverStatus.connected && serverStatus.checked)}
          >
            {isLoading ? "가입 중..." : "회원가입"} {!isLoading && <ArrowRight className="ml-2 h-5 w-5" />}
          </Button>
        </div>
      </form>
    </div>
  );
};

export default RegisterForm;