"use client";

import { Loader2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { SettingsSection } from "@/components/workspace/settings/settings-section";
import { useAllUsers } from "@/core/auth/hooks";
import { useI18n } from "@/core/i18n/hooks";

export function UserManagementPage() {
  const { t } = useI18n();
  const { data: users, isLoading, error } = useAllUsers(true);

  return (
    <div className="flex size-full min-h-0 flex-col gap-6 overflow-auto p-6">
      <SettingsSection
        title={t.adminUsers.title}
        description={t.adminUsers.description}
      >
        {isLoading && (
          <div className="flex items-center gap-2 text-muted-foreground py-8 justify-center">
            <Loader2 className="h-4 w-4 animate-spin" />
            <span>{t.common.loading}</span>
          </div>
        )}

        {error && (
          <div className="text-destructive text-sm py-4">
            {String(error)}
          </div>
        )}

        {!isLoading && !error && users && users.length === 0 && (
          <div className="text-muted-foreground text-sm py-8 text-center">
            {t.adminUsers.empty}
          </div>
        )}

        {!isLoading && !error && users && users.length > 0 && (
          <div className="rounded-md border overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-muted/50">
                <tr>
                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.email}</th>
                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.role}</th>
                  <th className="text-right px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.skillCount}</th>
                  <th className="text-right px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.agentCount}</th>
                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.userId}</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user, i) => (
                  <tr
                    key={user.id}
                    className={i % 2 === 0 ? "bg-background" : "bg-muted/20"}
                  >
                    <td className="px-4 py-3">{user.email}</td>
                    <td className="px-4 py-3">
                      {user.system_role === "admin" ? (
                        <Badge variant="default">{t.adminUsers.roleAdmin}</Badge>
                      ) : (
                        <Badge variant="secondary">{t.adminUsers.roleUser}</Badge>
                      )}
                    </td>
                    <td className="px-4 py-3 text-right tabular-nums">{user.skill_count}</td>
                    <td className="px-4 py-3 text-right tabular-nums">{user.agent_count}</td>
                    <td className="px-4 py-3 font-mono text-xs text-muted-foreground truncate max-w-[160px]">
                      {user.id}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </SettingsSection>
    </div>
  );
}