import { UserCircle2 } from "lucide-react";
import { cn } from "../../lib/utils";
import type { User } from "../../lib/useUsers";
import { formatBigInt } from "./UserFormFields";

// ---------------------------------------------------------------------------
// UserTable Component
// ---------------------------------------------------------------------------

export function UserTable({
  users,
  loading,
  onSelectUser,
}: {
  users: User[];
  loading: boolean;
  onSelectUser: (user: User) => void;
}) {
  if (loading) {
    return (
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-raised border-b border-border">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                  Username
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                  Level
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                  Balance
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                  Class
                </th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                  Status
                </th>
              </tr>
            </thead>
            <tbody>
              {[...Array(5)].map((_, i) => (
                <tr key={i} className="border-b border-border">
                  <td className="px-4 py-3">
                    <div className="h-4 bg-raised rounded animate-pulse w-32"></div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="h-4 bg-raised rounded animate-pulse w-12"></div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="h-4 bg-raised rounded animate-pulse w-24"></div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="h-4 bg-raised rounded animate-pulse w-20"></div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="h-4 bg-raised rounded animate-pulse w-16"></div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  if (users.length === 0) {
    return (
      <div className="bg-card border border-border rounded-lg p-12 text-center">
        <UserCircle2 className="w-16 h-16 mx-auto mb-4 text-text-tertiary" />
        <p className="text-lg font-semibold text-text-secondary mb-2">
          No users found
        </p>
        <p className="text-sm text-text-tertiary">
          Try adjusting your search or filter criteria
        </p>
      </div>
    );
  }

  return (
    <div className="bg-card border border-border rounded-lg overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-raised border-b border-border">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                Username
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                Level
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                Balance
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                XP
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                Class
              </th>
              <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary">
                Status
              </th>
            </tr>
          </thead>
          <tbody>
            {users.map((user) => (
              <tr
                key={user.id}
                onClick={() => onSelectUser(user)}
                className="border-b border-border hover:bg-raised cursor-pointer transition-colors"
              >
                <td className="px-4 py-3">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
                      <UserCircle2 className="w-5 h-5 text-primary" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-foreground">
                        {user.username}
                      </p>
                      <p className="text-xs text-text-tertiary font-mono">
                        {user.id}
                      </p>
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3">
                  <span className="text-sm font-mono text-foreground">
                    {user.level}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="text-sm font-mono text-foreground">
                    {formatBigInt(user.balance)}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="text-sm font-mono text-text-secondary">
                    {formatBigInt(user.xp)}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="text-sm text-foreground">
                    {user.class?.name || "\u2014"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span
                    className={cn(
                      "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium",
                      user.isActive
                        ? "bg-green-500/20 text-green-400"
                        : "bg-gray-500/20 text-gray-400"
                    )}
                  >
                    {user.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
