import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button";
import Avatar from "@/feature/Avatar";
import { useUsers } from "@/store/admin/users";
import { UserPlus } from "lucide-react";
import { useEffect, type FC } from "react";
import { Link } from "react-router";

const AdminUsersPage: FC = () => {
  const users = useUsers((state) => state.users);
  const loading = useUsers((state) => state.fetching);
  const fetchUsers = useUsers((state) => state.fetchUsers);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  return (
    <div className="relative flex flex-col items-stretch w-full">
      <div className="p-4">
        <Breadcrumbs
          className="pb-2"
          items={[
            {
              href: "/admin",
              label: "Admin",
            },
            {
              label: "Users",
            },
          ]}
        />
      </div>
      <div className="p-4 flex flex-row items-center justify-between">
        <p className="text-gray-800 dark:text-gray-300">Search...</p>
        <Link to="/admin/users/create">
          <Button className="flex flex-row items-center gap-2">
            <UserPlus /> Add User
          </Button>
        </Link>
      </div>

      <div className="flex-1 overflow-x-auto">
        <table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
          {loading && (
            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
              <div className="text-gray-800 dark:text-gray-200 font-medium">
                Loading...
              </div>
            </div>
          )}

          <thead className="bg-black/5 dark:bg-white/5 text-nowrap">
            <tr>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Full Name
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Email
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Is Admin
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Created At
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Last Login
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
            {!loading && users.length === 0 ? (
              <tr>
                <td
                  colSpan={5}
                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
                >
                  No users found.
                </td>
              </tr>
            ) : (
              users.map((user) => (
                <tr
                  key={user.id}
                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
                >
                  <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
                    <Link
                      to={`/admin/users/view/${user.id}`}
                      className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                    >
                      <div className="flex flex-row items-center gap-3">
                        <Avatar
                          iconSize={21}
                          className="w-8 h-8"
                          avatarId={user.profile_picture ?? undefined}
                        />
                        <p>{user.full_name}</p>
                      </div>
                    </Link>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
                    {user.email}
                  </td>
                  <td className="px-6 py-4 text-sm border border-gray-300 dark:border-gray-700">
                    <span
                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
                        user.is_admin
                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                          : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
                      }`}
                    >
                      {user.is_admin ? "Yes" : "No"}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
                    {new Date(user.created_at).toLocaleString()}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
                    {user.last_login
                      ? new Date(user.last_login).toLocaleString()
                      : "never"}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AdminUsersPage;