"use client";

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

import dynamic from "next/dynamic";
import { AuthUIContext, type Role } from "../../../lib/auth-ui-provider";
import { cn } from "../../../lib/utils";
import type { Invitation } from "../../../types/auth-client";
import { Button } from "../../ui/button";
import { Card } from "../../ui/card";
import { Input } from "../../ui/input";
import { InvitationTable } from "./invitation-table";
import { Pagination } from "./pagination";

const InviteMemberDialog = dynamic(
  () => import("./invite-member-dialog").then((mod) => mod.default),
  {
    ssr: false,
  }
);
export type InvitationCardClassNames = {
  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 InvitationPageProps {
  className?: string;
  classNames?: InvitationCardClassNames;
  title?: string;
  pageSize?: number;
}

// Debounce hook

export function OrganizationInvitation({
  className,
  classNames,
  pageSize = 10,
}: InvitationPageProps) {
  const { authClient, roles } = useContext(AuthUIContext);
  const { data, isPending } = authClient.useActiveOrganization();
  const invitations = data?.invitations;

  // State for invite member dialog and search input
  const [showInviteDialog, setShowInviteDialog] = useState(false);
  const [searchValue, setSearchValue] = useState("");

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

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

  const filteredInvitations = useMemo(
    () =>
      invitations?.filter((invitation) => {
        if (!searchValue) return true;
        const searchLower = searchValue.toLowerCase();
        return invitation.email.toLowerCase().includes(searchLower);
      }),
    [searchValue, invitations]
  );

  const paginatedInvitations = useMemo(
    () => filteredInvitations?.slice(startIndex, endIndex),
    [filteredInvitations, endIndex, startIndex]
  );

  // Total pages calculation
  const totalPages = Math.ceil((filteredInvitations ?? [])?.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 Invitations
          </h1>
          <p className="text-muted-foreground text-sm">
            Manage organization invitations
          </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>

            {/* Invite Member Button */}
            <Button
              onClick={() => setShowInviteDialog(true)}
              disabled={isPending}
            >
              Invite Member
            </Button>
          </div>
        </div>
      </div>

      {/* Member Table */}
      <InvitationTable
        invitations={paginatedInvitations}
        isLoading={isPending}
        searchQuery={searchValue}
        classNames={classNames}
      />

      {/* Pagination */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        totalItems={filteredInvitations ? filteredInvitations.length : 0}
        pageSize={pageSize}
        isLoading={isPending}
        className={classNames?.pagination}
        onPageChange={handlePageChange}
      />

      {/* Invite Member Dialog */}
      <InviteMemberDialog
        roles={roles}
        open={showInviteDialog}
        onOpenChange={() => setShowInviteDialog(false)}
      />
    </div>
  );
}