"use client";

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { StatusBadge, statusFromServer } from "@/components/StatusBadge";

type ServerStatus = {
  online: boolean;
  starting?: boolean;
  players: { online: number; max: number };
  version?: string;
  motd?: string;
};

export function StatusCard() {
  const [copied, setCopied] = useState(false);

  const { data, isLoading } = useQuery<ServerStatus>({
    queryKey: ["status"],
    queryFn: () => fetch("/api/status").then((r) => r.json()),
    refetchInterval: 15000,
  });

  const copyIP = () => {
    navigator.clipboard.writeText("minecraft.hurkicorgi.com");
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <Card>
      <CardHeader className="pb-0">
        <CardTitle className="text-base">Server Status</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {/* Status */}
          <div className="rounded-lg bg-muted p-3 sm:p-4 text-center">
            <p className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
              Status
            </p>
            {isLoading || !data ? (
              <Skeleton className="h-5 w-20 mx-auto" />
            ) : (
              <StatusBadge status={statusFromServer(data)} />
            )}
          </div>

          {/* Players */}
          <div className="rounded-lg bg-muted p-3 sm:p-4 text-center">
            <p className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
              Players
            </p>
            {isLoading || !data ? (
              <Skeleton className="h-8 w-16 mx-auto" />
            ) : (
              <p className="text-2xl font-bold tabular-nums">
                {data.online ? `${data.players.online}/${data.players.max}` : "0"}
              </p>
            )}
          </div>

          {/* Version */}
          <div className="rounded-lg bg-muted p-3 sm:p-4 text-center">
            <p className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
              Version
            </p>
            {isLoading || !data ? (
              <Skeleton className="h-5 w-20 mx-auto" />
            ) : (
              <p className="text-sm font-semibold">{data.version || "-"}</p>
            )}
          </div>

          {/* Connect */}
          <div className="rounded-lg bg-muted p-3 sm:p-4 text-center">
            <p className="text-xs text-muted-foreground uppercase tracking-wider mb-1">
              Connect
            </p>
            <button
              onClick={copyIP}
              className="w-full rounded-md border border-dashed border-border px-2 py-2 hover:border-primary/50 transition cursor-pointer min-h-[44px]"
            >
              <p className="font-mono text-xs font-semibold text-foreground">
                minecraft.hurkicorgi.com
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">
                {copied ? (
                  <span className="text-emerald-300">Copied!</span>
                ) : (
                  "tap to copy"
                )}
              </p>
            </button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}