"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useTheme } from "next-themes";
import { useRouter } from "next/navigation";

export default function SignInPage() {
  const router = useRouter();
  const { resolvedTheme } = useTheme();

  const [mounted, setMounted] = useState(false);
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  const [alert, setAlert] = useState<{
    type: "error" | "success";
    message: string;
  } | null>(null);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Auto-hide alert after 3 seconds
  useEffect(() => {
    if (alert) {
      const timer = setTimeout(() => {
        setAlert(null);
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [alert]);

  if (!mounted) return null;

  const isDark = resolvedTheme === "dark";

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
    setAlert(null);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setAlert(null);

    try {
      const res = await fetch("/api/signin", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      let data;

      try {
        data = await res.json();
      } catch {
        throw new Error(`Server returned non-JSON response: ${res.status}`);
      }

      if (!res.ok) {
        setAlert({
          type: "error",
          message: data.error || "Failed to sign in.",
        });
      } else {
        setAlert({
          type: "success",
          message: `Welcome back, ${data.user.name}!`,
        });

        setTimeout(() => {
          router.push("/admin/users");
        }, 1500);
      }
    } catch (err: any) {
      console.error("Signin frontend error:", err);

      setAlert({
        type: "error",
        message: err.message || "Server error. Please try again later.",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <section
      className={`relative min-h-screen flex items-center justify-center px-4 md:px-12 py-20 ${
        isDark
          ? "bg-black/85"
          : "bg-gradient-to-br from-emerald-700 to-emerald-400"
      }`}
    >
      <div
        className={`relative w-full max-w-md md:max-w-xl rounded-3xl p-6 md:p-10 ${
          isDark
            ? "bg-gray-800/90 border border-emerald-500 shadow-2xl"
            : "bg-white/90 shadow-2xl hover:shadow-emerald-300"
        }`}
      >
        <h2
          className={`text-3xl md:text-5xl font-bold text-center mb-6 ${
            isDark ? "text-white" : "text-emerald-900"
          }`}
        >
          Sign In
        </h2>

        {alert && (
          <div
            className={`mb-4 p-3 rounded-xl text-center font-semibold transition-all duration-300 ${
              alert.type === "error"
                ? "bg-red-100 text-red-600 border border-red-400"
                : "bg-emerald-100 text-emerald-700 border border-emerald-400"
            }`}
          >
            {alert.message}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
          <input
            type="email"
            name="email"
            placeholder="Email Address"
            value={formData.email}
            onChange={handleChange}
            required
            className={`w-full px-4 py-3 rounded-xl border focus:outline-none focus:ring-2 transition ${
              isDark
                ? "border-emerald-600 bg-gray-700 text-white focus:ring-emerald-400"
                : "border-emerald-300 bg-white text-gray-800 focus:ring-emerald-500"
            }`}
          />

          <input
            type="password"
            name="password"
            placeholder="Password"
            value={formData.password}
            onChange={handleChange}
            required
            className={`w-full px-4 py-3 rounded-xl border focus:outline-none focus:ring-2 transition ${
              isDark
                ? "border-emerald-600 bg-gray-700 text-white focus:ring-emerald-400"
                : "border-emerald-300 bg-white text-gray-800 focus:ring-emerald-500"
            }`}
          />

          <button
            type="submit"
            disabled={loading}
            className={`w-full px-6 py-3 rounded-full text-white font-bold hover:scale-105 hover:shadow-lg transition-all duration-300 ${
              loading
                ? "bg-gray-400 cursor-not-allowed"
                : "bg-gradient-to-r from-emerald-500 to-emerald-700"
            }`}
          >
            {loading ? "Signing In..." : "Sign In"}
          </button>
        </form>

        <p
          className={`mt-5 text-center ${
            isDark ? "text-emerald-300" : "text-emerald-700"
          }`}
        >
          Don't have an account?{" "}
          <Link
            href="/signup"
            className={`font-semibold hover:underline ${
              isDark ? "text-white" : "text-emerald-900"
            }`}
          >
            Sign Up
          </Link>
        </p>
      </div>
    </section>
  );
}