source-gamepanel/apps/web/src/pages/servers/index.tsx

import { useParams, Link } from 'react-router';
import { useQuery } from '@tanstack/react-query';
import { Server, Plus } from 'lucide-react';
import { api } from '@/lib/api';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { statusBadgeVariant } from '@/lib/utils';

interface ServerSummary {
  id: string;
  uuid: string;
  name: string;
  status: string;
  gameName: string;
  nodeName: string;
  port: number;
}

interface PaginatedResponse<T> {
  data: T[];
  meta: { total: number; page: number; perPage: number; totalPages: number };
}

export function ServersPage() {
  const { orgId } = useParams();

  const { data: serversData } = useQuery({
    queryKey: ['servers', orgId],
    queryFn: () => api.get<PaginatedResponse<ServerSummary>>(`/organizations/${orgId}/servers`),
  });

  const servers = serversData?.data ?? [];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Servers</h1>
          <p className="text-muted-foreground">
            {servers.length} server{servers.length !== 1 ? 's' : ''}
          </p>
        </div>
        <Link to={`/org/${orgId}/servers/new`}>
          <Button>
            <Plus className="h-4 w-4" />
            New Server
          </Button>
        </Link>
      </div>

      {servers.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Server className="mb-4 h-12 w-12 text-muted-foreground/50" />
            <p className="text-muted-foreground">No servers yet</p>
            <Link to={`/org/${orgId}/servers/new`}>
              <Button variant="outline" className="mt-4">
                Create your first server
              </Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-3">
          {servers.map((server) => (
            <Link key={server.id} to={`/org/${orgId}/servers/${server.id}/console`}>
              <Card className="transition-colors hover:border-primary/50">
                <CardContent className="flex items-center justify-between p-4">
                  <div className="flex items-center gap-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                      <Server className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <p className="font-medium">{server.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {server.gameName} &middot; {server.nodeName} &middot; :{server.port}
                      </p>
                    </div>
                  </div>
                  <Badge variant={statusBadgeVariant(server.status)}>{server.status}</Badge>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}