import React from "react";
import { useNavigate } from "react-router-dom";
import { Mail, InfoIcon, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

interface EmailConfirmationProps {
  email: string;
  onBackToForm: () => void;
  onResendEmail?: () => Promise<void>;
}

const EmailConfirmation: React.FC<EmailConfirmationProps> = ({ email, onBackToForm, onResendEmail }) => {
  const navigate = useNavigate();
  const [isResending, setIsResending] = useState(false);

  // 이메일 재전송 핸들러
  const handleResendEmail = async () => {
    if (!onResendEmail) return;
    
    setIsResending(true);
    try {
      await onResendEmail();
      // 성공 메시지는 onResendEmail 내부에서 표시
    } catch (error) {
      console.error('이메일 재전송 오류:', error);
    } finally {
      setIsResending(false);
    }
  };

  return (
    <div className="neuro-flat p-8 mb-6">
      <div className="text-center space-y-6">
        <Mail className="w-16 h-16 mx-auto text-neuro-income" />
        <h2 className="text-2xl font-bold">이메일 인증이 필요합니다</h2>
        <p className="text-gray-600">
          <strong>{email}</strong>로 인증 링크가 포함된 이메일을 보냈습니다.
          이메일을 확인하고 링크를 클릭하여 계정 등록을 완료해주세요.
        </p>
        
        <Alert className="bg-blue-50 border-blue-200 my-6">
          <InfoIcon className="h-5 w-5 text-blue-600" />
          <AlertTitle className="text-blue-700">인증 이메일이 보이지 않나요?</AlertTitle>
          <AlertDescription className="text-blue-600">
            스팸 폴더를 확인해보세요. 또한 이메일 서비스에 따라 도착하는데 몇 분이 걸릴 수 있습니다.
            {onResendEmail && (
              <div className="mt-2">
                아직도 받지 못했다면 아래 '인증 메일 재전송' 버튼을 클릭하세요.
              </div>
            )}
          </AlertDescription>
        </Alert>
        
        <div className="space-y-4 pt-4">
          {onResendEmail && (
            <Button 
              onClick={handleResendEmail} 
              variant="secondary" 
              className="w-full"
              disabled={isResending}
            >
              {isResending ? (
                <>
                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                  인증 메일 전송 중...
                </>
              ) : (
                <>
                  인증 메일 재전송
                </>
              )}
            </Button>
          )}
          
          <Button 
            onClick={() => navigate("/login")} 
            variant="outline" 
            className="w-full"
          >
            로그인 페이지로 이동
          </Button>
          <Button 
            onClick={onBackToForm} 
            variant="ghost" 
            className="w-full"
          >
            회원가입 양식으로 돌아가기
          </Button>
        </div>
      </div>
    </div>
  );
};

export default EmailConfirmation;