"use client";

import { useEffect, useState, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { PageHeader, ErrorBanner } from "@/components/ui/page-components";
import { TablePagination } from "@/components/ui/table";
import { useAdminStore } from "@/store";
import { useDebounce } from "@/hooks/use-debounce";
import {
  getPlatformValue,
  getTypeValue,
  getTimeValue,
  getSortValue,
} from "@/lib/utils";
import { MeetingsFilters } from "./components/MeetingsFilters";
import { MeetingsTable } from "./components/MeetingsTable";
import { EmptyState } from "./components/EmptyState";

const PAGE_LIMIT = 12;

export default function AdminMeetingsPage() {
  const {
    meetings,
    meetingsPagination,
    meetingsLoading,
    meetingsError,
    fetchMeetings,
  } = useAdminStore();

  const [search, setSearch] = useState("");
  const debouncedSearch = useDebounce(search, 400);
  const [statusFilter, setStatusFilter] = useState("all");
  const [platformFilter, setPlatformFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");
  const [dateFilter, setDateFilter] = useState("all");
  const [sortBy, setSortBy] = useState("all");
  const [page, setPage] = useState(1);

  const doFetch = useCallback(
    async (p: number, append: boolean) => {
      await fetchMeetings(
        {
          page: p,
          limit: PAGE_LIMIT,
          status: statusFilter,
          search: debouncedSearch || undefined,
          platform: getPlatformValue(platformFilter),
          type: getTypeValue(typeFilter),
          time: getTimeValue(dateFilter),
          sort_by: getSortValue(sortBy),
        },
        append,
      );
    },
    [
      fetchMeetings,
      statusFilter,
      debouncedSearch,
      platformFilter,
      typeFilter,
      dateFilter,
      sortBy,
    ],
  );

  useEffect(() => {
    setPage(1);
    doFetch(1, false);
  }, [
    statusFilter,
    debouncedSearch,
    platformFilter,
    typeFilter,
    dateFilter,
    sortBy,
    doFetch,
  ]);

  const handlePageChange = (newPage: number) => {
    if (
      newPage < 1 ||
      (meetingsPagination && newPage > meetingsPagination.total_pages)
    )
      return;
    setPage(newPage);
    doFetch(newPage, false);
  };

  const totalCount = meetingsPagination?.total ?? 0;

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

  const resetFilters = () => {
    setSearch("");
    setStatusFilter("all");
    setPlatformFilter("all");
    setTypeFilter("all");
    setDateFilter("all");
    setSortBy("all");
  };

  return (
    <div className="flex flex-col h-[calc(100vh-112px)] overflow-hidden space-y-4">
      {/* Top panel: Header and Filters (non-scrollable) */}
      <div className="shrink-0 space-y-4">
        <PageHeader
          title="All Meetings"
          backLink={{ href: "/admin", label: "Back to Dashboard" }}
          description={
            meetingsLoading && page === 1
              ? "Loading meetings..."
              : hasActiveFilters
                ? `Showing ${meetings.length} of ${totalCount} total meetings across all users`
                : `${totalCount} total meetings across all users`
          }
        />

        <MeetingsFilters
          search={search}
          setSearch={setSearch}
          statusFilter={statusFilter}
          setStatusFilter={setStatusFilter}
          platformFilter={platformFilter}
          setPlatformFilter={setPlatformFilter}
          typeFilter={typeFilter}
          setTypeFilter={setTypeFilter}
          dateFilter={dateFilter}
          setDateFilter={setDateFilter}
          sortBy={sortBy}
          setSortBy={setSortBy}
          hasActiveFilters={hasActiveFilters}
          resetFilters={resetFilters}
        />
      </div>

      {meetingsError && (
        <div className="shrink-0">
          <ErrorBanner
            message={meetingsError}
            onRetry={() => doFetch(1, false)}
          />
        </div>
      )}

      {/* Middle scrollable area: Table / Loader / Empty state */}
      <div className="flex-1 min-h-0 flex flex-col">
        {meetingsLoading ? (
          <div className="flex flex-col items-center justify-center flex-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl">
            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-3 font-medium">
              Loading meetings list...
            </p>
          </div>
        ) : meetings.length > 0 ? (
          <MeetingsTable meetings={meetings} />
        ) : (
          <EmptyState
            totalMeetingsCount={totalCount}
            hasActiveFilters={hasActiveFilters}
            resetFilters={resetFilters}
          />
        )}
      </div>

      {/* Bottom panel: Pagination (non-scrollable/fixed) */}
      {!meetingsLoading && meetings.length > 0 && meetingsPagination && (
        <TablePagination
          page={page}
          totalPages={meetingsPagination.total_pages}
          totalCount={totalCount}
          limit={PAGE_LIMIT}
          onPageChange={handlePageChange}
          itemName="meetings"
        />
      )}
    </div>
  );
}