import * as React from "react";
import { useState } from "react";
import { Button } from "../ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { cn } from "../../lib/utils";

interface SignInPageProps {
  className?: string;
  onSignIn?: (email: string, password: string) => void;
  onSignUpClick?: () => void;
  onBack?: () => void;
}

/**
 * 로그인 화면 컴포넌트
 * Vooster.ai 스타일의 세련된 디자인
 * 실제 API 연동은 나중에 구현
 */
const SignInPage = React.forwardRef<HTMLDivElement, SignInPageProps>(
  ({ className, onSignIn, onSignUpClick, onBack, ...props }, ref) => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [isLoading, setIsLoading] = useState(false);
    const [errors, setErrors] = useState<{
      email?: string;
      password?: string;
      general?: string;
    }>({});

    // 이메일 유효성 검사
    const validateEmail = (email: string) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    };

    // 폼 제출 핸들러
    const handleSubmit = async (e: React.FormEvent) => {
      e.preventDefault();

      // 유효성 검사
      const newErrors: typeof errors = {};

      if (!email) {
        newErrors.email = "이메일을 입력해주세요.";
      } else if (!validateEmail(email)) {
        newErrors.email = "올바른 이메일 형식을 입력해주세요.";
      }

      if (!password) {
        newErrors.password = "비밀번호를 입력해주세요.";
      }

      setErrors(newErrors);

      if (Object.keys(newErrors).length > 0) {
        return;
      }

      setIsLoading(true);

      try {
        // 로그인 처리 (실제 API 호출은 나중에)
        await new Promise((resolve) => setTimeout(resolve, 1500)); // 시뮬레이션
        onSignIn?.(email, password);
      } catch (error) {
        console.error("로그인 실패:", error);
        setErrors({
          general: "로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.",
        });
      } finally {
        setIsLoading(false);
      }
    };

    return (
      <div
        ref={ref}
        className={cn(
          "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4",
          className,
        )}
        {...props}
      >
        {/* Background decoration */}
        <div className="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,transparent,black)]" />

        <div className="relative w-full max-w-md">
          {/* 로고 및 헤더 */}
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              sheetEasy AI
            </h1>
            <p className="text-gray-600">
              계정에 로그인하여 AI 편집을 계속하세요
            </p>
          </div>

          {/* 로그인 폼 */}
          <Card className="shadow-xl border-0 bg-white/95 backdrop-blur-sm">
            <CardHeader className="text-center pb-6">
              <CardTitle className="text-2xl font-semibold text-gray-900">
                로그인
              </CardTitle>
              <p className="text-sm text-gray-600 mt-2">
                계정에 다시 오신 것을 환영합니다
              </p>
            </CardHeader>

            <CardContent className="space-y-6">
              {/* 일반 오류 메시지 */}
              {errors.general && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                  <p className="text-sm text-red-600">{errors.general}</p>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-4">
                {/* 이메일 입력 */}
                <div className="space-y-2">
                  <label
                    htmlFor="email"
                    className="text-sm font-medium text-gray-700"
                  >
                    이메일 주소
                  </label>
                  <input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className={cn(
                      "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                      errors.email ? "border-red-500" : "border-gray-300",
                    )}
                    placeholder="your@email.com"
                    disabled={isLoading}
                  />
                  {errors.email && (
                    <p className="text-sm text-red-600">{errors.email}</p>
                  )}
                </div>

                {/* 비밀번호 입력 */}
                <div className="space-y-2">
                  <label
                    htmlFor="password"
                    className="text-sm font-medium text-gray-700"
                  >
                    비밀번호
                  </label>
                  <input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className={cn(
                      "w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                      errors.password ? "border-red-500" : "border-gray-300",
                    )}
                    placeholder="비밀번호를 입력해주세요"
                    disabled={isLoading}
                  />
                  {errors.password && (
                    <p className="text-sm text-red-600">{errors.password}</p>
                  )}
                </div>

                {/* 비밀번호 찾기 링크 */}
                <div className="flex justify-end">
                  <button
                    type="button"
                    className="text-sm text-blue-600 hover:text-blue-700 hover:underline"
                    disabled={true} // 나중에 구현
                  >
                    비밀번호를 잊으셨나요? (준비중)
                  </button>
                </div>

                {/* 로그인 버튼 */}
                <Button
                  type="submit"
                  className="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
                  disabled={isLoading}
                >
                  {isLoading ? (
                    <div className="flex items-center justify-center">
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                      로그인 중...
                    </div>
                  ) : (
                    "로그인"
                  )}
                </Button>
              </form>

              {/* 소셜 로그인 (나중에 구현) */}
              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-gray-300" />
                </div>
                <div className="relative flex justify-center text-sm">
                  <span className="px-2 bg-white text-gray-500">또는</span>
                </div>
              </div>

              <div className="space-y-3">
                <Button
                  type="button"
                  variant="outline"
                  className="w-full py-3 text-gray-700 border-gray-300 hover:bg-gray-50"
                  disabled={true} // 나중에 구현
                >
                  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
                    <path
                      fill="currentColor"
                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                    />
                    <path
                      fill="currentColor"
                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                    />
                    <path
                      fill="currentColor"
                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                    />
                    <path
                      fill="currentColor"
                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                    />
                  </svg>
                  Google로 로그인 (준비중)
                </Button>
              </div>

              {/* 가입 링크 */}
              <div className="text-center">
                <p className="text-sm text-gray-600">
                  아직 계정이 없으신가요?{" "}
                  <button
                    type="button"
                    onClick={onSignUpClick}
                    className="text-blue-600 hover:text-blue-700 font-medium hover:underline"
                  >
                    무료로 가입하기
                  </button>
                </p>
              </div>
            </CardContent>
          </Card>

          {/* 뒤로가기 버튼 */}
          <div className="text-center mt-6">
            <button
              type="button"
              onClick={onBack}
              className="text-gray-600 hover:text-gray-700 text-sm hover:underline"
            >
              ← 메인화면으로 돌아가기
            </button>
          </div>
        </div>
      </div>
    );
  },
);

SignInPage.displayName = "SignInPage";

export { SignInPage };