"use client";
import { useState } from "react";
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";
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 { PlaybackModal } from "@/components/common/PlaybackModal";
export default function Events() {
  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: ["events", search, obj, start, end],
    initialPageParam: 1,
    queryFn: ({ pageParam }) =>
      q.events({
        page: pageParam,
        limit: 30,
        camera_id: search,
        detected_object: obj,
        start,
        end,
      }),
    getNextPageParam: (last) =>
      last.page * last.limit < last.total ? last.page + 1 : undefined,
  });
  const items = query.data?.pages.flatMap((p) => p.items) ?? [];
  const parent = useRef<HTMLDivElement>(null);
  const row = useVirtualizer({
    count: items.length,
    getScrollElement: () => parent.current,
    estimateSize: () => 86,
  });
  return (
    <>
      <PageHeader
        title="Events"
        description="Infinite virtualized detection timeline."
      />
      <FilterBar
        search={search}
        setSearch={setSearch}
        object={obj}
        setObject={setObj}
        start={start}
        setStart={setStart}
        end={end}
        setEnd={setEnd}
      />
      <div ref={parent} className="mt-4 h-[65vh] overflow-auto">
        <div style={{ height: row.getTotalSize(), position: "relative" }}>
          {row.getVirtualItems().map((v) => {
            const e = items[v.index];
            return (
              <Card
                key={v.key}
                className="absolute left-0 right-0 flex items-center justify-between"
                style={{ transform: `translateY(${v.start}px)` }}
              >
                <div>
                  <Badge>{e.detected_object}</Badge>
                  <p>
                    Camera {e.camera_id} · {fmtDate(e.timestamp)}
                  </p>
                </div>
                <Button onClick={() => setSelected(e.clip_id)}>
                  Details / Playback
                </Button>
              </Card>
            );
          })}
        </div>
      </div>
      {query.hasNextPage && (
        <Button onClick={() => query.fetchNextPage()}>Load more</Button>
      )}
      <PlaybackModal
        open={!!selected}
        onOpenChange={() => setSelected(undefined)}
        url={play.data?.url}
      />
    </>
  );
}