import { Link } from "@tanstack/react-router";
import { Users, Wifi, Copy, Star, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ServerStatusBadge } from "@/components/common/ServerStatusBadge";
import { MapArt } from "@/components/common/MapArt";
import type { GameServer } from "@/types";

export function ServerCard({ server }: { server: GameServer }) {
  const pct = Math.round((server.players / server.maxPlayers) * 100);
  return (
    <div className="group relative flex flex-col overflow-hidden rounded-xl border border-border bg-card p-4 transition-all duration-200 hover:border-primary/40 hover:shadow-elevated">
      {/* Native map background — procedural art blended into the card. */}
      <div className="pointer-events-none absolute inset-0 -z-0 opacity-70 transition-opacity duration-300 group-hover:opacity-90">
        <MapArt map={server.map} className="h-full w-full" />
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            background:
              "linear-gradient(180deg, color-mix(in oklab, var(--color-card) 55%, transparent) 0%, color-mix(in oklab, var(--color-card) 82%, transparent) 55%, var(--color-card) 100%)",
          }}
        />
      </div>
      <div className="relative flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <ServerStatusBadge status={server.status} />
            <Badge variant="outline" className="border-border/60 bg-background/40 text-muted-foreground backdrop-blur">
              {server.region}
            </Badge>
          </div>
          <h3 className="mt-2 truncate font-display text-base font-semibold">{server.name}</h3>
          <div className="mt-0.5 text-xs text-muted-foreground">
            <span className="rounded bg-background/50 px-1.5 py-0.5 font-mono text-[11px] uppercase tracking-wider text-secondary">
              {server.map}
            </span>
            <span className="ml-2">{server.mode}</span>
          </div>
        </div>
        <button className="text-muted-foreground hover:text-secondary" aria-label="Favorite"><Star className="h-4 w-4" /></button>
      </div>

      <div className="relative mt-4 grid grid-cols-3 gap-2 text-center text-xs">
        <div className="rounded-md bg-surface/85 p-2 backdrop-blur">
          <div className="font-mono text-sm font-semibold">{server.players}/{server.maxPlayers}</div>
          <div className="text-muted-foreground">Players</div>
        </div>
        <div className="rounded-md bg-surface/85 p-2 backdrop-blur">
          <div className="font-mono text-sm font-semibold">{server.ping}ms</div>
          <div className="text-muted-foreground">Ping</div>
        </div>
        <div className="rounded-md bg-surface/85 p-2 backdrop-blur">
          <div className="font-mono text-sm font-semibold">{server.tickrate}</div>
          <div className="text-muted-foreground">Tick</div>
        </div>
      </div>

      <div className="relative mt-3">
        <div className="h-1.5 overflow-hidden rounded-full bg-surface">
          <div className="h-full gradient-primary transition-all duration-300" style={{ width: `${pct}%` }} />
        </div>
      </div>

      <div className="relative mt-4 flex gap-2">
        <Button size="sm" className="flex-1 gradient-primary text-primary-foreground shadow-glow hover:opacity-95" disabled={server.status !== "online"}>
          <Wifi className="mr-1.5 h-3.5 w-3.5" /> Connect
        </Button>
        <Button size="sm" variant="outline"><Copy className="h-3.5 w-3.5" /></Button>
        <Button size="sm" variant="outline" asChild>
          <Link to="/servers/$serverId" params={{ serverId: server.id }}><ExternalLink className="h-3.5 w-3.5" /></Link>
        </Button>
      </div>
    </div>
  );
}