"use client";

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { PlayerAvatar } from "@/components/PlayerAvatar";
import { formatHours, timeAgo } from "@/lib/time";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export type PlaytimeEntry = {
  uuid: string;
  name: string;
  playtimeTicks: number;
  playtimeHours: number;
  lastPlayedMs: number;
};

const TOP_N = 10;

export function PlaytimeLeaderboard() {
  const [showAll, setShowAll] = useState(false);
  const { data = [], isLoading, isError } = useQuery<PlaytimeEntry[]>({
    queryKey: ["players-playtime"],
    queryFn: () => fetch("/api/players/playtime").then((r) => r.json()),
    staleTime: 60_000,
    refetchInterval: 5 * 60_000,
  });

  const visible = showAll ? data : data.slice(0, TOP_N);
  const totalHours = data.reduce((sum, e) => sum + e.playtimeHours, 0);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between gap-2 flex-wrap">
          <div>
            <CardTitle className="text-base">Playtime</CardTitle>
            <CardDescription>
              Total hours played by each whitelisted player
            </CardDescription>
          </div>
          {data.length > 0 && (
            <div className="text-right">
              <p className="text-xs text-muted-foreground">Combined</p>
              <p className="text-sm font-semibold tabular-nums">
                {formatHours(totalHours)}
              </p>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <ul className="space-y-1">
            {Array.from({ length: 5 }).map((_, i) => (
              <li key={i} className="flex items-center gap-3 px-3 py-2">
                <Skeleton className="h-6 w-6 rounded" />
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-3 w-14 ml-auto" />
              </li>
            ))}
          </ul>
        ) : isError ? (
          <p className="text-sm text-red-300 text-center py-4">
            Failed to load playtime.
          </p>
        ) : data.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">
            No playtime recorded yet.
          </p>
        ) : (
          <>
            <ol className="space-y-1">
              {visible.map((p, i) => (
                <li
                  key={p.uuid}
                  className="flex items-center gap-3 px-3 py-2 rounded-md bg-muted/50"
                >
                  <span className="text-xs font-bold text-muted-foreground tabular-nums w-5 text-center shrink-0">
                    {i + 1}
                  </span>
                  <PlayerAvatar name={p.name} size={24} />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium truncate">{p.name}</p>
                    <p
                      className="text-xs text-muted-foreground"
                      title={new Date(p.lastPlayedMs).toLocaleString()}
                    >
                      last seen {timeAgo(p.lastPlayedMs)}
                    </p>
                  </div>
                  <Badge
                    variant="secondary"
                    className="text-xs px-1.5 py-0 tabular-nums shrink-0"
                  >
                    {formatHours(p.playtimeHours)}
                  </Badge>
                </li>
              ))}
            </ol>
            {data.length > TOP_N && (
              <div className="text-center mt-3">
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => setShowAll((v) => !v)}
                  className="text-xs"
                >
                  {showAll ? "Show top 10" : `Show all ${data.length}`}
                </Button>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  );
}