import React from "react";
import { Link } 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, Eye, EyeOff, AlertTriangle, Loader2 } from "lucide-react";
interface LoginFormProps {
  email: string;
  setEmail: (email: string) => void;
  password: string;
  setPassword: (password: string) => void;
  showPassword: boolean;
  setShowPassword: (show: boolean) => void;
  isLoading: boolean;
  isSettingUpTables?: boolean;
  loginError: string | null;
  handleLogin: (e: React.FormEvent) => Promise<void>;
}
const LoginForm: React.FC<LoginFormProps> = ({
  email,
  setEmail,
  password,
  setPassword,
  showPassword,
  setShowPassword,
  isLoading,
  isSettingUpTables = false,
  loginError,
  handleLogin
}) => {
  // CORS 또는 JSON 관련 오류인지 확인
  const isCorsOrJsonError = loginError && (loginError.includes('JSON') || loginError.includes('CORS') || loginError.includes('프록시') || loginError.includes('서버 응답') || loginError.includes('네트워크') || loginError.includes('404') || loginError.includes('Not Found'));
  return <div className="neuro-flat p-8 mb-6">
      <form onSubmit={handleLogin}>
        <div className="space-y-6">
          <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>
          </div>
          
          {loginError && <div className={`p-3 ${isCorsOrJsonError ? 'bg-amber-50 text-amber-800' : 'bg-red-50 text-red-600'} rounded-md text-sm`}>
              <div className="flex items-start gap-2">
                <AlertTriangle className="h-5 w-5 flex-shrink-0 mt-0.5 text-amber-500" />
                <div>
                  <p className="font-medium">{loginError}</p>
                  
                  {isCorsOrJsonError && <ul className="mt-2 list-disc pl-5 text-xs space-y-1 text-amber-700">
                      <li>설정 페이지에서 다른 CORS 프록시 유형을 시도해 보세요.</li>
                      <li>HTTPS URL을 사용하는 Supabase 인스턴스로 변경해 보세요.</li>
                      <li>네트워크 연결 상태를 확인하세요.</li>
                    </ul>}
                </div>
              </div>
            </div>}
          
          <div className="text-right">
            <Link to="/forgot-password" className="text-sm text-neuro-income hover:underline">
              비밀번호를 잊으셨나요?
            </Link>
          </div>
          
          <Button type="submit" disabled={isLoading || isSettingUpTables} className="w-full hover:bg-neuro-income/80 text-white h-auto bg-neuro-income text-lg py-[10px]">
            {isLoading ? "로그인 중..." : isSettingUpTables ? "데이터베이스 설정 중..." : "로그인"} 
            {!isLoading && !isSettingUpTables ? <ArrowRight className="ml-2 h-5 w-5" /> : <Loader2 className="ml-2 h-5 w-5 animate-spin" />}
          </Button>
        </div>
      </form>
    </div>;
};
export default LoginForm;