// app/login/page.tsx
"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Mail, Lock } from "lucide-react";
import AuthCard from "@/components/Auth/AuthCard";
import InputField from "@/components/Auth/InputField";
import SubmitButton from "@/components/Auth/SubmitButton";
import SocialLogin from "@/components/Auth/SocialLogin";

export default function LoginPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const [errors, setErrors] = useState({
    email: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
    // Clear error when user starts typing
    if (errors[e.target.name as keyof typeof errors]) {
      setErrors({
        ...errors,
        [e.target.name]: "",
      });
    }
  };

  const validate = () => {
    let valid = true;
    const newErrors = { email: "", password: "" };

    if (!formData.email) {
      newErrors.email = "Email is required";
      valid = false;
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid";
      valid = false;
    }

    if (!formData.password) {
      newErrors.password = "Password is required";
      valid = false;
    } else if (formData.password.length < 6) {
      newErrors.password = "Password must be at least 6 characters";
      valid = false;
    }

    setErrors(newErrors);
    return valid;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;

    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      setLoading(false);
      router.push("/");
    }, 1500);
  };

  const footer = (
    <>
      <p className="text-sm text-gray-600">
        Don&apos;t have an account?{" "}
        <Link href="/register" className="text-sky-600 hover:text-sky-700 font-semibold">
          Sign up
        </Link>
      </p>
      <div className="mt-2">
        <Link href="/forgot-password" className="text-xs text-sky-600 hover:text-sky-700">
          Forgot password?
        </Link>
      </div>
    </>
  );

  return (
    <AuthCard
      title="Welcome Back"
      subtitle="Sign in to your PKI account"
      footer={footer}
    >
      <form onSubmit={handleSubmit}>
        <InputField
          label="Email Address"
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="you@example.com"
          icon={<Mail className="w-4 h-4" />}
          required
          error={errors.email}
        />

        <InputField
          label="Password"
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="••••••"
          icon={<Lock className="w-4 h-4" />}
          required
          error={errors.password}
        />

        <SubmitButton text="Sign In" loading={loading} />
      </form>

      <SocialLogin />
    </AuthCard>
  );
}