"use client";

import { useState, useEffect } from "react";
import { useTheme } from "next-themes";

type PrimaUser = {
  name: string;
  email: string;
  createdAt: string;
};

export default function UsersTable() {
  const { resolvedTheme } = useTheme();
  const isDark = resolvedTheme === "dark";

  const [users, setUsers] = useState<PrimaUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch("/api/users");

        if (!res.ok) {
          const text = await res.text();
          console.error("Non-JSON response:", text);
          throw new Error("Server error");
        }

        const data: PrimaUser[] = await res.json();
        setUsers(data);
      } catch (err) {
        console.error("Fetch users error:", err);
        setError("Failed to load users.");
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) {
    return (
      <div
        className={`min-h-screen flex items-center justify-center ${
          isDark ? "bg-gray-900" : "bg-emerald-50"
        }`}
      >
        <p className={`${isDark ? "text-white" : "text-gray-800"} text-lg font-semibold`}>
          Loading users...
        </p>
      </div>
    );
  }

  if (error) {
    return (
      <div
        className={`min-h-screen flex items-center justify-center ${
          isDark ? "bg-gray-900" : "bg-emerald-50"
        }`}
      >
        <p className="text-red-500 font-semibold">{error}</p>
      </div>
    );
  }

  return (
    <section className={`${isDark ? "bg-black/85" : "bg-emerald-50"} min-h-screen p-10`}>
      <div
        className={`max-w-5xl mx-auto rounded-2xl p-6 shadow-2xl ${
          isDark ? "bg-emerald-900 text-white" : "bg-white text-gray-800"
        }`}
      >
        <h2
          className={`text-3xl font-bold mb-6 text-center ${
            isDark ? "text-emerald-300" : "text-emerald-700"
          }`}
        >
          Registered Users
        </h2>

        {users.length === 0 ? (
          <p className={`text-center text-lg ${isDark ? "text-gray-300" : "text-gray-700"}`}>
            No users found.
          </p>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full border text-center">
              <thead className={`${isDark ? "bg-emerald-950" : "bg-emerald-200"}`}>
                <tr>
                  <th className="border px-4 py-2">Name</th>
                  <th className="border px-4 py-2">Email</th>
                  <th className="border px-4 py-2">Created At</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user, index) => (
                  <tr
                    key={index}
                    className={`${isDark ? "border-gray-600" : "border-gray-300"}`}
                  >
                    <td className="border px-4 py-2">{user.name}</td>
                    <td className="border px-4 py-2">{user.email}</td>
                    <td className="border px-4 py-2">
                      {new Date(user.createdAt).toLocaleString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </section>
  );
}