"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { Badge, Button, Card, Pagination, Table, Thead, Tbody, Tr, Th, Td, usePagination } from "@/components/ui";
import { api, workloads } from "@/lib/api";

/*
 * The fleet view answers "which servers run image X", which is the reason the
 * snapshot is stored at all rather than fetched on demand and discarded.
 */
export default function WorkloadsPage() {
    const [image, setImage] = useState("");
    const [stack, setStack] = useState("");
    const [state, setState] = useState("");
    const [applied, setApplied] = useState<{ image?: string; stack?: string; state?: string }>({});

    const hits = useQuery({
        queryKey: ["workloads", "fleet", applied],
        queryFn: () => workloads.search(applied),
    });

    const servers = useQuery({ queryKey: ["servers"], queryFn: () => api.listServers() });

    const hostnames = useMemo(() => {
        const m = new Map<string, string>();
        for (const s of servers.data ?? []) m.set(s.server_id, s.hostname);
        return m;
    }, [servers.data]);

    // A fleet of a few hundred servers reports tens of thousands of workloads;
    // the whole set in one table is what freezes the tab.
    const rows = useMemo(() => hits.data ?? [], [hits.data]);
    const paged = usePagination(rows, 50);

    const inputClass =
        "w-full rounded border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:border-accent focus:outline-none";

    return (
        <div className="p-4 sm:p-6 lg:p-8">
            <div className="mb-6">
                <h1 className="text-2xl font-bold text-text-primary">Workloads</h1>
                <p className="mt-1 text-sm text-text-secondary">Containers and systemd services across the fleet, as last reported by each agent.</p>
            </div>

            <Card className="mb-6">
                <form
                    className="grid gap-3 sm:grid-cols-4"
                    onSubmit={(e) => {
                        e.preventDefault();
                        setApplied({ image: image.trim(), stack: stack.trim(), state: state.trim() });
                        paged.reset();
                    }}
                >
                    <input className={inputClass} placeholder="image (exact)" value={image} onChange={(e) => setImage(e.target.value)} />
                    <input className={inputClass} placeholder="stack" value={stack} onChange={(e) => setStack(e.target.value)} />
                    <input className={inputClass} placeholder="state" value={state} onChange={(e) => setState(e.target.value)} />
                    <Button type="submit" variant="primary">
                        Search
                    </Button>
                </form>
            </Card>

            <Card padding={false}>
                {hits.isLoading ? (
                    <p className="px-6 py-5 text-sm text-text-secondary">Loading…</p>
                ) : rows.length === 0 ? (
                    <p className="px-6 py-5 text-sm text-text-secondary">No workloads match.</p>
                ) : (
                    <>
                    <Table>
                        <Thead>
                            <Tr>
                                <Th>Server</Th>
                                <Th>Workload</Th>
                                <Th>Kind</Th>
                                <Th>State</Th>
                                <Th>Image</Th>
                                <Th>Stack</Th>
                            </Tr>
                        </Thead>
                        <Tbody>
                            {paged.slice.map((h) => (
                                <Tr key={`${h.server_id}:${h.workload.kind}:${h.workload.id}`}>
                                    <Td>
                                        <Link href={`/servers/${h.server_id}`} className="text-accent hover:underline">
                                            {hostnames.get(h.server_id) ?? h.server_id}
                                        </Link>
                                    </Td>
                                    <Td className="font-mono text-xs">{h.workload.name}</Td>
                                    <Td>
                                        <Badge variant="neutral">{h.workload.kind}</Badge>
                                    </Td>
                                    <Td>{h.workload.state}</Td>
                                    <Td className="font-mono text-xs">{h.workload.image ?? "—"}</Td>
                                    <Td>{h.workload.stack ?? "—"}</Td>
                                </Tr>
                            ))}
                        </Tbody>
                    </Table>
                    <Pagination
                        page={paged.page}
                        pageCount={paged.pageCount}
                        size={paged.size}
                        total={paged.total}
                        onPage={paged.setPage}
                        onSize={paged.setSize}
                        unit="workloads"
                    />
                    </>
                )}
            </Card>
        </div>
    );
}
