mc-dashboard/components/ModList.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";

type Mod = {
  modId: string;
  displayName: string;
  version: string;
  filename: string;
  size: string;
};

export function ModList() {
  const [query, setQuery] = useState("");

  const { data: mods, isLoading, isError } = useQuery<Mod[]>({
    queryKey: ["mods"],
    queryFn: () => fetch("/api/mods").then((r) => r.json()),
    staleTime: 5 * 60 * 1000,
  });

  const filtered = useMemo(() => {
    if (!mods) return [];
    const q = query.trim().toLowerCase();
    if (!q) return mods;
    return mods.filter(
      (m) =>
        m.displayName.toLowerCase().includes(q) ||
        m.modId.toLowerCase().includes(q) ||
        m.filename.toLowerCase().includes(q)
    );
  }, [mods, query]);

  return (
    <Card>
      <CardHeader className="pb-0">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <CardTitle className="text-base">
            Installed Mods {mods ? `(${mods.length})` : ""}
          </CardTitle>
          {mods && mods.length > 6 && (
            <Input
              placeholder="Search mods..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="h-8 text-sm max-w-[220px]"
            />
          )}
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <ul className="-mx-1 space-y-1">
            {Array.from({ length: 6 }).map((_, i) => (
              <li key={i} className="flex justify-between items-center px-3 py-2.5">
                <Skeleton className="h-4 w-40" />
                <Skeleton className="h-3 w-12" />
              </li>
            ))}
          </ul>
        ) : isError ? (
          <p className="text-sm text-red-300 py-4 text-center">
            Failed to load mods.
          </p>
        ) : filtered.length === 0 ? (
          <p className="text-sm text-muted-foreground py-8 text-center">
            {query ? `No mods match "${query}"` : "No mods installed."}
          </p>
        ) : (
          <ul className="max-h-[350px] sm:max-h-[400px] overflow-y-auto -mx-1">
            {filtered.map((mod, i) => (
              <li
                key={mod.filename}
                className={`flex justify-between items-center px-3 py-2.5 rounded-md ${
                  i % 2 === 1 ? "bg-muted/50" : ""
                }`}
              >
                <div className="flex items-center gap-2 min-w-0">
                  <span className="text-sm font-medium truncate">
                    {mod.displayName}
                  </span>
                  {mod.version && (
                    <Badge variant="secondary" className="text-xs px-1.5 py-0 shrink-0 hidden sm:inline-flex">
                      {mod.version}
                    </Badge>
                  )}
                </div>
                <span className="text-xs text-muted-foreground whitespace-nowrap ml-3 tabular-nums">
                  {mod.size}
                </span>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}