"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 SignUpPage() {
  const router = useRouter();
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "" });
  const [errorMessage, setErrorMessage] = useState("");
  const [successMessage, setSuccessMessage] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  const isDark = resolvedTheme === "dark";

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

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

    if (formData.password !== formData.confirmPassword) {
      setErrorMessage("Passwords do not match!");
      return;
    }

    setLoading(true);

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

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

      if (!res.ok) {
        setErrorMessage(data.error || "Something went wrong.");
      } else {
        setSuccessMessage("Account created successfully!");
        setFormData({ name: "", email: "", password: "", confirmPassword: "" });
        setTimeout(() => router.push("/signin"), 1500);
      }
    } catch (err: any) {
      console.error("Signup frontend error:", err);
      setErrorMessage(err.message || "Failed to create account. 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 transition-all duration-500 ${isDark ? "bg-black/85" : "bg-gradient-to-br from-emerald-400 to-emerald-700"}`}>
      <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 Up</h2>

        {errorMessage && <p className="mb-4 text-center text-red-500 font-semibold">{errorMessage}</p>}
        {successMessage && <p className="mb-4 text-center text-green-400 font-semibold">{successMessage}</p>}

        <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
          {["name", "email", "password", "confirmPassword"].map((field, idx) => (
            <input
              key={idx}
              type={field.includes("password") ? "password" : field === "email" ? "email" : "text"}
              name={field}
              placeholder={field === "confirmPassword" ? "Confirm Password" : field.charAt(0).toUpperCase() + field.slice(1)}
              value={formData[field as keyof typeof formData]}
              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 ? "Creating..." : "Create Account"}
          </button>
        </form>

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