import { createFileRoute } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { StatCard } from "@/components/common/StatCard";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { servers } from "@/features/_mock/data";
import { ServerStatusBadge } from "@/components/common/ServerStatusBadge";
import type { GameServer } from "@/types";
import { Server, Users, Activity, Play, Square, RefreshCw } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/servers")({
  head: () => ({ meta: [{ title: "Servers — Admin" }, { name: "description", content: "Manage game servers, status and configuration." }] }),
  component: AdminServersPage,
});

function AdminServersPage() {
  const [q, setQ] = useState("");
  const [region, setRegion] = useState("all");
  const filtered = useMemo(() => servers.filter((s) => (region === "all" || s.region === region) && (q === "" || s.name.toLowerCase().includes(q.toLowerCase()) || s.ip.includes(q))), [q, region]);
  const online = servers.filter((s) => s.status === "online").length;
  const totalPlayers = servers.reduce((a, b) => a + b.players, 0);

  const cols: Column<GameServer>[] = [
    { key: "n", header: "Server", cell: (s) => <div><div className="font-medium">{s.name}</div><div className="text-xs text-muted-foreground">{s.ip}:{s.port} · {s.region}</div></div> },
    { key: "mode", header: "Mode", cell: (s) => <Badge variant="outline">{s.mode}</Badge> },
    { key: "map", header: "Map", cell: (s) => <span className="font-mono text-xs">{s.map}</span> },
    { key: "p", header: "Players", cell: (s) => <span className="font-mono">{s.players}/{s.maxPlayers}</span> },
    { key: "t", header: "Tick", cell: (s) => `${s.tickrate}` },
    { key: "u", header: "Uptime", cell: (s) => <span className="text-muted-foreground">{s.uptime}</span> },
    { key: "st", header: "Status", cell: (s) => <ServerStatusBadge status={s.status} /> },
  ];

  return (
    <div>
      <PageHeader title="Servers" description="Manage all game servers on the platform." actions={<Button className="gradient-primary text-primary-foreground">Add server</Button>} />
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Total servers" value={servers.length} icon={<Server className="h-4 w-4" />} />
        <StatCard label="Online" value={online} tone="success" icon={<Activity className="h-4 w-4" />} />
        <StatCard label="Offline / maintenance" value={servers.length - online} tone="warning" />
        <StatCard label="Players in-game" value={totalPlayers} tone="primary" icon={<Users className="h-4 w-4" />} />
      </div>
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={region} onValueChange={setRegion}>
            <SelectTrigger className="w-[140px]"><SelectValue /></SelectTrigger>
            <SelectContent><SelectItem value="all">All regions</SelectItem>{[...new Set(servers.map((s) => s.region))].map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}</SelectContent>
          </Select>
        }
        rowActions={(s) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => toast.success(`Restarted ${s.name}`)}><RefreshCw className="mr-1 h-3.5 w-3.5" /> Restart</Button>
            {s.status === "online" ? <Button size="sm" variant="ghost" onClick={() => toast.warning(`Stopped ${s.name}`)}><Square className="mr-1 h-3.5 w-3.5" /> Stop</Button> : <Button size="sm" variant="ghost" onClick={() => toast.success(`Started ${s.name}`)}><Play className="mr-1 h-3.5 w-3.5" /> Start</Button>}
          </div>
        )}
      />
    </div>
  );
}