"use client";

import { useEffect, useRef } from "react";
import { Plus, Search, Filter, FileText, Loader2 } from "lucide-react";
import { useMeetingsStore, useUIStore, useServiceStore } from "@/store";
import { useMeetings } from "@/hooks/use-meetings";
import { MeetingCard } from "@/components/features/meeting-card";
import { NewMeetingDialog } from "@/components/features/new-meeting-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { PageHeader, MeetingGridSkeleton, EmptyState, ErrorBanner } from "@/components/ui/page-components";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { MEETING_STATUS_FILTER_OPTIONS, meetingMatchesStatusFilter } from "@/lib/utils";

export default function MeetingsPage() {
  const meetings    = useMeetingsStore((s) => s.meetings);
  const loading     = useMeetingsStore((s) => s.loading);
  const loadingMore = useMeetingsStore((s) => s.loadingMore);
  const error       = useMeetingsStore((s) => s.error);
  const listStatusFilter = useMeetingsStore((s) => s.listStatusFilter);
  const pagination  = useMeetingsStore((s) => s.pagination);

  const searchQuery             = useUIStore((s) => s.searchQuery);
  const statusFilter            = useUIStore((s) => s.statusFilter);
  const newMeetingDialogOpen    = useUIStore((s) => s.newMeetingDialogOpen);
  const setSearchQuery          = useUIStore((s) => s.setSearchQuery);
  const setStatusFilter         = useUIStore((s) => s.setStatusFilter);
  const setNewMeetingDialogOpen = useUIStore((s) => s.setNewMeetingDialogOpen);

  const storeAlreadyLoaded =
    listStatusFilter === statusFilter && useMeetingsStore.getState().meetings.length > 0;
  const { refetch, fetchMore } = useMeetings({ status: statusFilter, skip: storeAlreadyLoaded });
  const isDown = useServiceStore((s) => s.isDown);

  // Sentinel ref for IntersectionObserver
  const sentinelRef = useRef<HTMLDivElement>(null);

  // Re-observe sentinel whenever fetchMore or loading state changes
  useEffect(() => {
    const sentinel = sentinelRef.current;
    if (!sentinel) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loadingMore && !loading) {
          fetchMore();
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(sentinel);
    return () => observer.disconnect();
  }, [fetchMore, loadingMore, loading]);

  const handleStatusChange = (status: string) => {
    setStatusFilter(status);
    refetch({ status });
  };

  // Client-side search on current loaded data
  const normalizedSearchQuery = searchQuery.toLowerCase();
  const filtered = meetings.filter((m) =>
    (m.title ?? "").toLowerCase().includes(normalizedSearchQuery) &&
    meetingMatchesStatusFilter(m.status, statusFilter)
  );

  const hasMore   = pagination ? meetings.length < pagination.total : false;
  const totalLabel = pagination
    ? `${pagination.total} total meeting${pagination.total !== 1 ? "s" : ""}`
    : `${meetings.length} meeting${meetings.length !== 1 ? "s" : ""}`;

  return (
    <div className="space-y-6">
      <PageHeader
        title="Meetings"
        description={totalLabel}
        action={
          <SimpleTooltip content="Create new meeting session">
            <Button onClick={() => setNewMeetingDialogOpen(true)}>
              <Plus className="h-4 w-4" />
              New Recording
            </Button>
          </SimpleTooltip>
        }
      />

      {/* Filters */}
      <div className="flex gap-3">
        <SimpleTooltip content="Search by meeting title">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="Search meetings..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
        </SimpleTooltip>
        <Select value={statusFilter} onValueChange={handleStatusChange}>
          <SimpleTooltip content="Filter meetings by status">
            <SelectTrigger className="w-44">
              <Filter className="h-4 w-4 mr-2 text-gray-400 shrink-0" />
              <SelectValue placeholder="All Status" />
            </SelectTrigger>
          </SimpleTooltip>
          <SelectContent>
            {MEETING_STATUS_FILTER_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Error — only show if NOT already shown by global ServiceDownBanner */}
      {error && !isDown && <ErrorBanner message={error} onRetry={refetch} />}

      {/* Grid */}
      {loading ? (
        <MeetingGridSkeleton />
      ) : filtered.length > 0 ? (
        <>
          <div className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            {filtered.map((m) => <MeetingCard key={m.id} meeting={m} />)}
          </div>

          {/* Sentinel — watched by IntersectionObserver */}
          {hasMore && !searchQuery && (
            <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 meetings…
                </div>
              )}
            </div>
          )}

          {/* End of list */}
          {!hasMore && pagination && pagination.total > 10 && !searchQuery && (
            <SimpleTooltip content="You have reached the end of the meetings list">
              <p className="text-center text-xs text-gray-400 dark:text-gray-600 py-2">
                All {pagination.total} meetings loaded
              </p>
            </SimpleTooltip>
          )}
        </>
      ) : (
        <EmptyState
          icon={<FileText className="h-6 w-6 text-gray-400" />}
          title="No meetings found"
          description={
            searchQuery || statusFilter !== "all"
              ? "Try adjusting your filters"
              : "Create your first meeting to get started"
          }
          action={
            searchQuery || statusFilter !== "all" ? (
              <Button variant="outline" size="sm" onClick={() => { setSearchQuery(""); handleStatusChange("all"); }}>
                Clear filters
              </Button>
            ) : (
              <SimpleTooltip content="Create new meeting session">
                <Button size="sm" onClick={() => setNewMeetingDialogOpen(true)}>
                  <Plus className="h-4 w-4" />
                  New Recording
                </Button>
              </SimpleTooltip>
            )
          }
        />
      )}

      <NewMeetingDialog
        open={newMeetingDialogOpen}
        onOpenChange={setNewMeetingDialogOpen}
        onSuccess={() => refetch()}
      />
    </div>
  );
}