"use client";
import { useState } from "react";
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { PageHeader } from "@/components/common/PageHeader";
import { FilterBar } from "@/components/filters/FilterBar";
import { Card, Badge, Button } from "@/components/ui/basic";
import { q } from "@/lib/queries";
import { fmtDate } from "@/lib/utils";
import { Thumb } from "@/components/common/Thumb";
import { PlaybackModal } from "@/components/common/PlaybackModal";
export default function Clips() {
  const [search, setSearch] = useState("");
  const [obj, setObj] = useState("");
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [selected, setSelected] = useState<string>();
  const play = useQuery({
    queryKey: ["playback", selected],
    queryFn: () => q.playback(selected!),
    enabled: !!selected,
  });
  const query = useInfiniteQuery({
    queryKey: ["clips", search, obj, start, end],
    initialPageParam: 1,
    queryFn: ({ pageParam }) =>
      q.clips({
        page: pageParam,
        limit: 24,
        camera_id: search,
        detected_object: obj,
        start,
        end,
      }),
    getNextPageParam: (last) =>
      last.page * last.limit < last.total ? last.page + 1 : undefined,
  });
  const clips = query.data?.pages.flatMap((p) => p.items) ?? [];
  return (
    <>
      <PageHeader
        title="Clips"
        description="Lazy thumbnail gallery with signed playback."
      />
      <FilterBar
        search={search}
        setSearch={setSearch}
        object={obj}
        setObject={setObj}
        start={start}
        setStart={setStart}
        end={end}
        setEnd={setEnd}
      />
      <div className="mt-4 grid gap-4 md:grid-cols-3 xl:grid-cols-4">
        {clips.map((c) => (
          <Card key={c.id}>
            <Thumb id={c.id} />
            <div className="mt-3">
              <Badge>{c.detected_object}</Badge>
              <h2>Camera {c.camera_id}</h2>
              <p className="text-sm text-zinc-400">
                {fmtDate(c.timestamp)} · {c.duration_seconds ?? "—"}s
              </p>
              <Button className="mt-3 w-full" onClick={() => setSelected(c.id)}>
                Play
              </Button>
            </div>
          </Card>
        ))}
      </div>
      {query.hasNextPage && (
        <Button onClick={() => query.fetchNextPage()}>Load more</Button>
      )}
      <PlaybackModal
        open={!!selected}
        onOpenChange={() => setSelected(undefined)}
        url={play.data?.url}
      />
    </>
  );
}