"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Video, Loader2, Search, RotateCcw } from "lucide-react";
import { useMeetingsStore } from "@/store";
import { listInvitedMeetings } from "@/lib/api";
import { InvitedMeetingCard } from "@/components/features/invited-meeting-card";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MeetingGridSkeleton, ErrorBanner } from "@/components/ui/page-components";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn, getPlatformValue, getTypeValue, getTimeValue, getSortValue } from "@/lib/utils";
import type { InvitedMeetingItem } from "@/types/api";
import { useDebounce } from "@/hooks/use-debounce";
import { SEGMENT_CONFIG, SEGMENT_TO_API_STATUS } from "./dashboard-constants";

export function InvitedMeetingsTab() {
  const [invitedMeetings, setInvitedMeetingsState] = useState<InvitedMeetingItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Pagination & counts state
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [total, setTotal] = useState(0);
  const [segmentCounts, setSegmentCounts] = useState<Record<string, number>>({});

  // Search and Filter States
  const [searchQuery, setSearchQuery] = useState("");
  const debouncedSearchQuery = useDebounce(searchQuery, 400);
  const [platformFilter, setPlatformFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");
  const [dateFilter, setDateFilter] = useState("all");
  const [sortBy, setSortBy] = useState("all");
  const [activeSegment, setActiveSegment] = useState("all");

  const sentinelRef = useRef<HTMLDivElement>(null);
  const setStoreInvited = useMeetingsStore((s) => s.setInvitedMeetings);

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

  const resetFilters = () => {
    setSearchQuery("");
    setPlatformFilter("all");
    setTypeFilter("all");
    setDateFilter("all");
    setSortBy("all");
    setActiveSegment("all");
  };

  const doFetch = useCallback(async (p: number, replace: boolean) => {
    replace ? setLoading(true) : setLoadingMore(true);
    setError(null);
    try {
      const apiStatus = SEGMENT_TO_API_STATUS[activeSegment];
      const res = await listInvitedMeetings({
        page: p,
        limit: 12,
        ...(apiStatus ? { status: apiStatus } : {}),
        search: debouncedSearchQuery || undefined,
        platform: getPlatformValue(platformFilter),
        type: getTypeValue(typeFilter),
        time: getTimeValue(dateFilter),
        sort_by: getSortValue(sortBy),
      });

      if (res.success && Array.isArray(res.data)) {
        const newItems = res.data;
        if (replace) {
          setInvitedMeetingsState(newItems);
          setStoreInvited(newItems);
        } else {
          setInvitedMeetingsState((prev) => {
            const existingIds = new Set(prev.map((im) => im.invite_id));
            const uniqueNew = newItems.filter((im) => !existingIds.has(im.invite_id));
            const combined = [...prev, ...uniqueNew];
            setStoreInvited(combined);
            return combined;
          });
        }

        if (res.pagination) {
          setTotal(res.pagination.total);
          setTotalPages(res.pagination.total_pages);
        }
        if (res.segment_counts) {
          setSegmentCounts(res.segment_counts);
        }
      } else {
        setError("Failed to load invited meetings");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load invited meetings");
    } finally {
      replace ? setLoading(false) : setLoadingMore(false);
    }
  }, [
    activeSegment,
    debouncedSearchQuery,
    platformFilter,
    typeFilter,
    dateFilter,
    sortBy,
    setStoreInvited,
  ]);

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

  useEffect(() => {
    if (loading || loadingMore || page >= totalPages) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          const nextPage = page + 1;
          setPage(nextPage);
          doFetch(nextPage, false);
        }
      },
      { threshold: 0.1 }
    );
    const curr = sentinelRef.current;
    if (curr) observer.observe(curr);
    return () => {
      if (curr) observer.unobserve(curr);
    };
  }, [loading, loadingMore, page, totalPages, doFetch]);

  const SEGMENT_ORDER = ["completed", "scheduled", "failed"];

  return (
    <div className="flex-1 min-h-0 flex flex-col space-y-4 animate-in fade-in duration-200 overflow-hidden">
      {/* Search and Filters Bar */}
      <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center bg-white dark:bg-gray-900 p-3 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm transition-all duration-200 shrink-0">
        {/* Search */}
        <div className="relative flex-1">
          <Search className={cn("absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none transition-colors duration-200", searchQuery ? "text-blue-500" : "text-gray-400 dark:text-gray-500")} />
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Search meetings by title or organizer..."
            className={cn(
              "pl-9 pr-8 bg-transparent border-gray-200 dark:border-gray-800 focus-visible:ring-blue-500 rounded-xl transition-all duration-200",
              searchQuery && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-900 dark:text-blue-100"
            )}
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery("")}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs font-medium"
            >
              Clear
            </button>
          )}
        </div>

        {/* Filter Selectors */}
        <div className="flex flex-wrap items-center gap-2">
          {/* Platform Filter */}
          <div className="w-[130px] sm:w-[140px]">
            <Select value={platformFilter} onValueChange={setPlatformFilter}>
              <SelectTrigger className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                platformFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
              )}>
                <SelectValue placeholder="Platform" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Platforms</SelectItem>
                <SelectItem value="google_meet">Google Meet</SelectItem>
                <SelectItem value="zoom">Zoom</SelectItem>
                <SelectItem value="microsoft_teams">MS Teams</SelectItem>
                <SelectItem value="jitsi">Jitsi</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Type Filter */}
          <div className="w-[120px] sm:w-[130px]">
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                typeFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
              )}>
                <SelectValue placeholder="Type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="recurring">Recurring</SelectItem>
                <SelectItem value="one_time">One-time</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Date Filter */}
          <div className="w-[120px] sm:w-[130px]">
            <Select value={dateFilter} onValueChange={setDateFilter}>
              <SelectTrigger className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                dateFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
              )}>
                <SelectValue placeholder="Date" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Time</SelectItem>
                <SelectItem value="today">Today</SelectItem>
                <SelectItem value="yesterday">Yesterday</SelectItem>
                <SelectItem value="7days">Last 7 Days</SelectItem>
                <SelectItem value="30days">Last 30 Days</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Sort Filter */}
          <div className="w-[130px] sm:w-[140px]">
            <Select value={sortBy} onValueChange={setSortBy}>
              <SelectTrigger className={cn(
                "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                sortBy !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
              )}>
                <SelectValue placeholder="Sort by" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Sort by</SelectItem>
                <SelectItem value="newest">Newest First</SelectItem>
                <SelectItem value="oldest">Oldest First</SelectItem>
                <SelectItem value="title_asc">Title (A-Z)</SelectItem>
                <SelectItem value="duration_desc">Longest First</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Reset button */}
          {hasActiveFilters && (
            <SimpleTooltip content="Reset all active filters">
              <Button
                variant="ghost"
                onClick={resetFilters}
                className="h-10 px-3 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 rounded-xl gap-1.5"
              >
                <RotateCcw className="h-3.5 w-3.5" />
                <span className="hidden md:inline">Reset</span>
              </Button>
            </SimpleTooltip>
          )}
        </div>
      </div>

      <Tabs defaultValue="all" value={activeSegment} onValueChange={setActiveSegment} className="space-y-4 shrink-0">
        <TabsList className="flex-wrap h-auto gap-1 p-1 justify-start">
          <TabsTrigger value="all" className="text-xs h-7 px-3 gap-1.5">
            <Video className="h-3 w-3" />
            All
            {activeSegment === "all" && (
              <span className="ml-0.5 opacity-60">({total})</span>
            )}
          </TabsTrigger>

          {SEGMENT_ORDER.map((segment) => {
            const cfg   = SEGMENT_CONFIG[segment];
            const count = segmentCounts[segment] ?? 0;
            const Icon  = cfg.icon;
            return (
              <TabsTrigger key={segment} value={segment} className="text-xs h-7 px-3 gap-1.5">
                <Icon className="h-3 w-3" />
                {cfg?.label ?? segment}
                {count > 0 && (
                  <span className={cn(
                    "ml-0.5 opacity-70",
                    segment === "failed" && "text-red-500 opacity-100 font-semibold"
                  )}>({count})</span>
                )}
              </TabsTrigger>
            );
          })}
        </TabsList>
      </Tabs>

      {/* Cards list or loading/empty state */}
      <div className="flex-1 min-h-0 overflow-y-auto pr-1">
        {loading && invitedMeetings.length === 0 ? (
          <MeetingGridSkeleton />
        ) : error && invitedMeetings.length === 0 ? (
          <ErrorBanner message={error} onRetry={() => doFetch(1, true)} />
        ) : invitedMeetings.length === 0 ? (
          <div className="flex flex-col items-center justify-center min-h-[300px] text-center p-8 bg-gray-50 dark:bg-gray-900/50 rounded-2xl border border-dashed border-gray-200 dark:border-gray-800">
            <Video className="h-10 w-10 text-gray-400 dark:text-gray-500 mb-4 animate-pulse" />
            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">No meetings found</h3>
            <p className="text-sm text-gray-500 dark:text-gray-400 max-w-sm mb-4">
              {hasActiveFilters
                ? "No invited meetings match the active filters. Try adjusting your search query or filters."
                : "Meetings you have been invited to will appear here."}
            </p>
            {hasActiveFilters && (
              <Button onClick={resetFilters} variant="outline" size="sm" className="rounded-xl">
                Reset Filters
              </Button>
            )}
          </div>
        ) : (
          <div className="space-y-4">
            <p className="text-xs text-gray-400 dark:text-gray-500">
              Showing {invitedMeetings.length} of {total} invited meetings total
            </p>
            <div className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
              {invitedMeetings.map((im) => (
                <InvitedMeetingCard key={im.invite_id} meeting={im} />
              ))}
            </div>
            {/* Infinite Scroll Sentinel */}
            {page < totalPages && (
              <div ref={sentinelRef} className="flex justify-center p-4">
                <Loader2 className="h-6 w-6 animate-spin text-blue-500" />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}