import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { Wifi, Copy, Star, MapPin, Clock, Users, Activity } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { StatCard } from "@/components/common/StatCard";
import { ServerStatusBadge } from "@/components/common/ServerStatusBadge";
import { servers, players } from "@/features/_mock/data";

export const Route = createFileRoute("/_public/servers/$serverId")({
  loader: ({ params }) => {
    const s = servers.find((x) => x.id === params.serverId);
    if (!s) throw notFound();
    return { server: s };
  },
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData ? `${loaderData.server.name} — Purple Zone` : "Server" },
      { name: "description", content: loaderData?.server.mode ?? "CS2 server" },
    ],
  }),
  component: ServerDetail,
});

function ServerDetail() {
  const { server } = Route.useLoaderData();
  const roster = players.slice(0, server.players);
  const cts = roster.slice(0, Math.ceil(server.players / 2));
  const ts = roster.slice(Math.ceil(server.players / 2));

  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <div className="relative overflow-hidden rounded-2xl border border-border gradient-hero p-6 sm:p-8">
        <div className="grid gap-6 lg:grid-cols-[1.5fr_1fr]">
          <div>
            <div className="flex items-center gap-2">
              <ServerStatusBadge status={server.status} />
              <span className="rounded-md border border-border bg-surface/60 px-2 py-0.5 text-xs">{server.region}</span>
              <span className="text-xs text-muted-foreground">Uptime {server.uptime}</span>
            </div>
            <h1 className="mt-2 font-display text-3xl font-bold">{server.name}</h1>
            <div className="mt-1 text-sm text-muted-foreground">{server.mode}</div>
            <div className="mt-4 flex flex-wrap items-center gap-4 text-sm">
              <span className="flex items-center gap-1.5"><MapPin className="h-4 w-4 text-secondary" /> {server.map} <span className="text-muted-foreground">· next {server.nextMap}</span></span>
              <span className="flex items-center gap-1.5"><Clock className="h-4 w-4 text-secondary" /> {server.timeRemaining}</span>
              <span className="flex items-center gap-1.5"><Users className="h-4 w-4 text-secondary" /> {server.players}/{server.maxPlayers}</span>
            </div>
            <div className="mt-6 flex gap-2">
              <Button className="gradient-primary text-primary-foreground shadow-glow hover:opacity-95"><Wifi className="mr-1.5 h-4 w-4" /> Connect</Button>
              <Button variant="outline"><Copy className="mr-1.5 h-4 w-4" /> {server.ip}:{server.port}</Button>
              <Button variant="outline"><Star className="h-4 w-4" /></Button>
            </div>
          </div>
          <div className="rounded-xl border border-border bg-surface/60 p-4">
            <div className="text-xs uppercase tracking-wider text-muted-foreground">Current score</div>
            <div className="mt-2 flex items-center justify-around">
              <div className="text-center"><div className="text-xs font-semibold text-info">CT</div><div className="font-display text-4xl font-bold text-info">{server.ctScore}</div></div>
              <div className="font-display text-2xl text-muted-foreground">:</div>
              <div className="text-center"><div className="text-xs font-semibold text-warning">T</div><div className="font-display text-4xl font-bold text-warning">{server.tScore}</div></div>
            </div>
            <div className="mt-3 text-center text-xs text-muted-foreground">Time remaining {server.timeRemaining}</div>
          </div>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Ping" value={`${server.ping}ms`} icon={<Activity className="h-4 w-4" />} />
        <StatCard label="Tickrate" value={server.tickrate} icon={<Activity className="h-4 w-4" />} />
        <StatCard label="Players" value={`${server.players}/${server.maxPlayers}`} tone="primary" icon={<Users className="h-4 w-4" />} />
        <StatCard label="Round" value={`${server.ctScore + server.tScore + 1}/30`} icon={<Clock className="h-4 w-4" />} />
      </div>

      <Tabs defaultValue="scoreboard" className="mt-8">
        <TabsList>
          <TabsTrigger value="scoreboard">Scoreboard</TabsTrigger>
          <TabsTrigger value="history">Map history</TabsTrigger>
          <TabsTrigger value="top">Top players</TabsTrigger>
          <TabsTrigger value="rules">Server rules</TabsTrigger>
        </TabsList>
        <TabsContent value="scoreboard" className="grid gap-4 lg:grid-cols-2">
          <Team title="Counter-Terrorists" accent="text-info" players={cts} />
          <Team title="Terrorists" accent="text-warning" players={ts} />
        </TabsContent>
        <TabsContent value="history"><div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground">Recent maps played on this server will appear here.</div></TabsContent>
        <TabsContent value="top"><div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground">Top players by rating on this specific server.</div></TabsContent>
        <TabsContent value="rules"><div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground">Server-specific rules and configuration.</div></TabsContent>
      </Tabs>
    </div>
  );
}

function Team({ title, accent, players }: { title: string; accent: string; players: any[] }) {
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-card">
      <div className={`border-b border-border bg-surface px-4 py-2 font-display text-sm font-semibold ${accent}`}>{title}</div>
      <table className="w-full text-sm">
        <thead className="text-left text-xs uppercase tracking-wider text-muted-foreground">
          <tr><th className="px-3 py-2 font-medium">Player</th><th className="px-3 py-2 font-medium">K</th><th className="px-3 py-2 font-medium">D</th><th className="px-3 py-2 font-medium">A</th><th className="px-3 py-2 font-medium">Ping</th></tr>
        </thead>
        <tbody className="divide-y divide-border/40">
          {players.map((p: any) => (
            <tr key={p.id} className="hover:bg-accent/40">
              <td className="px-3 py-2"><Link to="/players/$playerId" params={{ playerId: p.id }} className="hover:text-secondary">{p.name}</Link></td>
              <td className="px-3 py-2 font-mono">{p.kills % 30}</td>
              <td className="px-3 py-2 font-mono">{p.deaths % 25}</td>
              <td className="px-3 py-2 font-mono">{p.mvps % 12}</td>
              <td className="px-3 py-2 font-mono text-muted-foreground">{30 + (p.level % 40)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}