"use client";

import { Search, X } from "lucide-react";
import {
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

import dynamic from "next/dynamic";
import { AuthUIContext } from "../../../lib/auth-ui-provider";
import { cn } from "../../../lib/utils";
import type { Member } from "../../../types/auth-client";
import { Button } from "../../ui/button";
import { Card } from "../../ui/card";
import { Input } from "../../ui/input";
// import InviteMemberDialog from "./invite-member-dialog";
import { MemberTable } from "./member-table";
import { Pagination } from "./pagination";

export type OrganizationPageClassNames = {
  base?: string;
  card?: string;
  header?: string;
  title?: string;
  searchContainer?: string;
  searchInput?: string;
  table?: string;
  tableHeader?: string;
  tableRow?: string;
  tableCell?: string;
  statusBadge?: string;
  actionButton?: string;
  pagination?: string;
  dialog?: {
    content?: string;
    header?: string;
    footer?: string;
  };
};

export interface OrganizationPageProps {
  className?: string;
  classNames?: OrganizationPageClassNames;
  title?: string;
  pageSize?: number;
}

// Debounce hook

export function OrganizationMember({
  className,
  classNames,
  pageSize = 10,
}: OrganizationPageProps) {
  const { authClient } = useContext(AuthUIContext);
  const { data, isPending } = authClient.useActiveOrganization();
  const members = data?.members as Member[];

  const [searchValue, setSearchValue] = useState("");
  const [currentPage, setCurrentPage] = useState(1);

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;

  const filteredMembers = useMemo(
    () =>
      members?.filter((member) => {
        if (!searchValue) return true;
        const searchLower = searchValue.toLowerCase();
        return (
          member.user.name?.toLowerCase().includes(searchLower) ||
          member.user.email.toLowerCase().includes(searchLower)
        );
      }),
    [searchValue, members]
  );

  const paginatedMembers = useMemo(
    () => filteredMembers?.slice(startIndex, endIndex),
    [filteredMembers, endIndex, startIndex]
  );

  // Total pages calculation
  const totalPages = Math.ceil((filteredMembers ?? [])?.length / pageSize);

  // Ref for search input to maintain focus
  const searchInputRef = useRef<HTMLInputElement>(null);

  const handlePageChange = useCallback((page: number) => {
    setCurrentPage(page);
  }, []);

  const handleClearSearch = useCallback(() => {
    setSearchValue("");
    // Focus the input after clearing
    if (searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, []);

  return (
    <div className={cn("", classNames?.base, className)}>
      {/* Header */}
      <div
        className={cn(
          "mb-2 flex items-center justify-between w-full",
          classNames?.header
        )}
      >
        <div className="mb-1">
          <h1 className={cn("text-2xl font-semibold", classNames?.title)}>
            Organization Members
          </h1>
          <p className="text-muted-foreground text-sm">
            Manage organization members
          </p>
        </div>
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                ref={searchInputRef}
                placeholder="Search members..."
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
                className={cn("pl-10 w-[250px]", classNames?.searchInput)}
                disabled={isPending}
              />
              {searchValue && (
                <Button
                  variant="ghost"
                  size="icon"
                  className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6"
                  onClick={handleClearSearch}
                  disabled={isPending}
                  type="button"
                >
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Member Table */}
      <MemberTable
        members={paginatedMembers}
        isLoading={isPending}
        searchQuery={searchValue}
        classNames={classNames}
      />

      {/* Pagination */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        totalItems={filteredMembers?.length ?? 0}
        pageSize={pageSize}
        isLoading={isPending}
        className={classNames?.pagination}
        onPageChange={handlePageChange}
      />
    </div>
  );
}