"use client";

import { useEffect, useRef } from "react";
import { Video, Plus, Loader2, SlidersHorizontal } from "lucide-react";
import { useMeetingsStore } from "@/store";
import { useMeetings } from "@/hooks/use-meetings";
import { MeetingCard } from "@/components/features/meeting-card";
import { Button } from "@/components/ui/button";
import { MeetingGridSkeleton, EmptyState } from "@/components/ui/page-components";
import { getPlatformValue, getTypeValue, getTimeValue, getSortValue } from "@/lib/utils";
import { PAGE_LIMIT } from "./dashboard-constants";

interface AllTabProps {
  onNewRecording: () => void;
  searchQuery: string;
  platformFilter: string;
  dateFilter: string;
  typeFilter: string;
  sortBy: string;
  onResetFilters: () => void;
}

export function AllTab({
  onNewRecording,
  searchQuery,
  platformFilter,
  dateFilter,
  typeFilter,
  sortBy,
  onResetFilters,
}: AllTabProps) {
  const meetings    = useMeetingsStore((s) => s.meetings);
  const loading     = useMeetingsStore((s) => s.loading);
  const loadingMore = useMeetingsStore((s) => s.loadingMore);
  const pagination  = useMeetingsStore((s) => s.pagination);
  const sentinelRef = useRef<HTMLDivElement>(null);

  const { refetch, fetchMore } = useMeetings({
    skip: true,
    search: searchQuery || undefined,
    platform: getPlatformValue(platformFilter),
    type: getTypeValue(typeFilter),
    time: getTimeValue(dateFilter),
    sort_by: getSortValue(sortBy),
  });

  const hasMore = pagination ? meetings.length < pagination.total : false;

  useEffect(() => {
    refetch();
  }, [searchQuery, platformFilter, dateFilter, typeFilter, sortBy, refetch]);

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => { if (entries[0].isIntersecting && !loadingMore && !loading) fetchMore(); },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [fetchMore, loading, loadingMore]);

  if (loading) return <MeetingGridSkeleton />;

  const isFiltered = searchQuery !== "" || platformFilter !== "all" || dateFilter !== "all" || typeFilter !== "all" || sortBy !== "all";

  if (meetings.length === 0) {
    if (isFiltered) {
      return (
        <div className="flex flex-col items-center justify-center p-8 text-center bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 border-dashed min-h-[250px] animate-in fade-in duration-200">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-400 dark:text-gray-500 mb-3">
            <SlidersHorizontal className="h-5 w-5" />
          </div>
          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">No matching meetings</h3>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-[280px]">
            We couldn't find any meetings matching your active search or filters. Try adjusting them.
          </p>
          <Button variant="outline" size="sm" className="mt-4 rounded-xl" onClick={onResetFilters}>
            Clear All Filters
          </Button>
        </div>
      );
    }

    return (
      <EmptyState
        icon={<Video className="h-6 w-6 text-gray-400" />}
        title="No meetings yet"
        description="Start your first recording to see it here"
        action={<Button size="sm" onClick={onNewRecording}><Plus className="h-4 w-4" /> New Recording</Button>}
      />
    );
  }

  const total = pagination ? pagination.total : meetings.length;
  const countDisplay = meetings.length;

  return (
    <div className="space-y-4 animate-in fade-in duration-200">
      {pagination && (
        <p className="text-xs text-gray-400 dark:text-gray-500">
          Showing {countDisplay} of {total} meetings total
        </p>
      )}
      <div className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
        {meetings.map((m) => <MeetingCard key={m.id} meeting={m} />)}
      </div>
      {hasMore && (
        <div ref={sentinelRef} className="flex justify-center py-4">
          {loadingMore && (
            <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <Loader2 className="h-4 w-4 animate-spin" /> Loading more…
            </div>
          )}
        </div>
      )}
      {!hasMore && pagination && pagination.total > PAGE_LIMIT && (
        <p className="text-center text-xs text-gray-400 dark:text-gray-600 py-2">
          All {pagination.total} meetings loaded
        </p>
      )}
    </div>
  );
}