"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Loader2, Plus, SlidersHorizontal } from "lucide-react";
import { useMeetingsStore } from "@/store";
import { listMeetings } from "@/lib/api";
import { MeetingCard } from "@/components/features/meeting-card";
import { Button } from "@/components/ui/button";
import { MeetingGridSkeleton, EmptyState, ErrorBanner } from "@/components/ui/page-components";
import { getPlatformValue, getTypeValue, getTimeValue, getSortValue } from "@/lib/utils";
import type { ListMeetingItem } from "@/types/api";
import type { Meeting } from "@/types";
import {
  SEGMENT_CONFIG,
  SEGMENT_TO_API_STATUS,
  PAGE_LIMIT,
  mapItem,
} from "./dashboard-constants";

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

export function SegmentTab({
  segment,
  onNewRecording,
  searchQuery,
  platformFilter,
  dateFilter,
  typeFilter,
  sortBy,
  onResetFilters,
}: SegmentTabProps) {
  const [meetings, setMeetings]       = useState<Meeting[]>([]);
  const [loading, setLoading]         = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError]             = useState<string | null>(null);
  const [page, setPage]               = useState(1);
  const [totalPages, setTotalPages]   = useState(1);
  const [total, setTotal]             = useState(0);
  const sentinelRef                   = useRef<HTMLDivElement>(null);
  const cfg = SEGMENT_CONFIG[segment];

  const setSegmentCounts = useMeetingsStore((s) => s.setSegmentCounts);
  const setListSummary   = useMeetingsStore((s) => s.setListSummary);

  const doFetch = useCallback(async (p: number, replace: boolean) => {
    replace ? setLoading(true) : setLoadingMore(true);
    setError(null);
    try {
      const apiStatus = SEGMENT_TO_API_STATUS[segment];
      const res = await listMeetings({
        page: p,
        limit: PAGE_LIMIT,
        ...(apiStatus ? { status: apiStatus } : {}),
        search: searchQuery || undefined,
        platform: getPlatformValue(platformFilter),
        type: getTypeValue(typeFilter),
        time: getTimeValue(dateFilter),
        sort_by: getSortValue(sortBy),
      });
      const items: ListMeetingItem[] = Array.isArray(res) ? res : (res.success ? res.data as ListMeetingItem[] : []);
      const mapped = items.map(mapItem);
      replace ? setMeetings(mapped) : setMeetings((prev) => {
        const existingIds = new Set(prev.map((m) => m.id));
        const uniqueNew = mapped.filter((m) => !existingIds.has(m.id));
        return [...prev, ...uniqueNew];
      });
      if (!Array.isArray(res)) {
        if (res.pagination) {
          setTotal(res.pagination.total);
          setTotalPages(res.pagination.total_pages);
        }
        if (res.segment_counts) {
          setSegmentCounts(res.segment_counts);
        }
        if (res.summary) {
          setListSummary(res.summary);
        }
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to load");
    } finally {
      replace ? setLoading(false) : setLoadingMore(false);
    }
  }, [segment, searchQuery, platformFilter, dateFilter, typeFilter, sortBy, setSegmentCounts, setListSummary]);

  useEffect(() => {
    setPage(1);
    doFetch(1, true);
  }, [doFetch]);

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loadingMore && !loading && page < totalPages) {
          const next = page + 1;
          setPage(next);
          doFetch(next, false);
        }
      },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [doFetch, loading, loadingMore, page, totalPages]);

  if (loading) return <MeetingGridSkeleton />;
  if (error)   return <ErrorBanner message={error} onRetry={() => doFetch(1, true)} />;

  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={cfg ? <cfg.icon className="h-6 w-6 text-gray-400" /> : undefined}
        title={cfg?.emptyTitle ?? "No meetings"}
        description={cfg?.emptyDesc ?? ""}
        action={segment === "all" ? (
          <Button size="sm" onClick={onNewRecording}>
            <Plus className="h-4 w-4" /> New Recording
          </Button>
        ) : undefined}
      />
    );
  }

  const countDisplay = meetings.length;

  return (
    <div className="space-y-4 animate-in fade-in duration-200">
      {total > 0 && (
        <p className="text-xs text-gray-400 dark:text-gray-500">
          Showing {countDisplay} of {total} meeting{total !== 1 ? "s" : ""}
        </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>
      {page < totalPages && (
        <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>
      )}
      {page >= totalPages && total > PAGE_LIMIT && (
        <p className="text-center text-xs text-gray-400 dark:text-gray-600 py-2">
          All {total} meetings loaded
        </p>
      )}
    </div>
  );
}