"use client";

import { useEffect } from "react";

import { AnimatePresence } from "framer-motion";

import { Inbox, Radio } from "lucide-react";

import { DropCard } from "./DropCard";

import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";

import { Skeleton } from "@/components/ui/skeleton";

import { EmptyState } from "@/components/shared/EmptyState";

import { ConnectionStatus } from "@/components/shared/ConnectionStatus";

import { useRecentDrops } from "@/hooks/useDrops";

import { useUiStore } from "@/stores/ui";

export function LiveDropFeed() {

  const { data, isLoading } = useRecentDrops(30);

  const liveDrops = useUiStore((s) => s.liveDrops);

  const seedDrops = useUiStore((s) => s.seedDrops);

  useEffect(() => {

    if (data?.data?.length && liveDrops.length === 0) seedDrops(data.data);

  }, [data]);

  return (

    <Card className="flex h-full flex-col">

      <CardHeader>

        <CardTitle className="flex items-center gap-2">

          <Radio className="h-4 w-4 text-[var(--color-accent-teal)]" aria-hidden />

          Live feed

        </CardTitle>

        <ConnectionStatus compact />

      </CardHeader>

      <CardBody className="flex-1 overflow-hidden pt-3">

        {isLoading && liveDrops.length === 0 ? (

          <div className="space-y-3">

            {Array.from({ length: 4 }).map((_, i) => (

              <Skeleton key={i} className="h-[148px] rounded-[var(--radius-lg)]" />

            ))}

          </div>

        ) : liveDrops.length === 0 ? (

          <EmptyState

            icon={Inbox}

            title="Listening for drops"

            description="Nothing yet. The moment a tracked event goes on sale, it lands here in real time and pings your phone."

          />

        ) : (

          <div

            className="max-h-[calc(100dvh-19rem)] space-y-3 overflow-y-auto pr-1"

            role="feed"

            aria-busy={isLoading}

            aria-label="Live ticket drops"

          >

            <AnimatePresence initial={false} mode="popLayout">

              {liveDrops.map((drop) => (

                <DropCard key={drop.id} drop={drop} />

              ))}

            </AnimatePresence>

          </div>

        )}

      </CardBody>

    </Card>

  );

}