"use client";

import { cn } from "../../../lib/utils";
import type { Member } from "../../../types/auth-client";
import { Skeleton } from "../../ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../ui/table";
import type { OrganizationPageClassNames } from "./member";
import { MemberActionMenu } from "./member-action-menu";

export type MemberAction = "remove" | "promote" | "demote" | "resendInvite";

interface MemberTableProps {
  members: Member[];
  isLoading: boolean;
  searchQuery: string;
  classNames?: OrganizationPageClassNames;
}

export function MemberTable({
  members,
  isLoading,
  classNames,
}: MemberTableProps) {
  // Render loading skeletons
  const renderSkeletons = () => (
    <>
      {Array.from({ length: 5 }).map((_, index) => (
        <TableRow key={`skeleton-${index}`}>
          <TableCell>
            <Skeleton className="h-4 w-24" />
          </TableCell>
          <TableCell>
            <Skeleton className="h-4 w-32" />
          </TableCell>
          <TableCell>
            <Skeleton className="h-4 w-16" />
          </TableCell>
          <TableCell>
            <Skeleton className="h-4 w-16" />
          </TableCell>
          <TableCell>
            <Skeleton className="h-4 w-24" />
          </TableCell>
          <TableCell>
            <Skeleton className="h-8 w-8 rounded-full ml-auto" />
          </TableCell>
        </TableRow>
      ))}
    </>
  );

  return (
    <div className="overflow-x-auto">
      {/* <pre>{JSON.stringify({ members }, 0, 1)}</pre> */}
      {/* <pre>{JSON.stringify(members, 0, 1)}</pre> */}
      <Table className={classNames?.table}>
        <TableHeader className={classNames?.tableHeader}>
          <TableRow>
            <TableHead className="cursor-pointer">Name</TableHead>
            <TableHead className="cursor-pointer">Email</TableHead>
            <TableHead className="cursor-pointer">Role</TableHead>
            <TableHead className="cursor-pointer">Joined</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {isLoading ? (
            renderSkeletons()
          ) : members.length === 0 ? (
            <TableRow>
              <TableCell colSpan={6} className="text-center py-8">
                No members found.
              </TableCell>
            </TableRow>
          ) : (
            members.map((member) => {
              return (
                <TableRow key={member.id} className={classNames?.tableRow}>
                  <TableCell className={classNames?.tableCell}>
                    {member?.user?.name}
                  </TableCell>
                  <TableCell className={classNames?.tableCell}>
                    {member?.user?.email}
                  </TableCell>
                  <TableCell className={classNames?.tableCell}>
                    {Array.isArray(member.role)
                      ? member.role.join(", ")
                      : member.role}
                  </TableCell>
                  {/* <TableCell className={classNames?.tableCell}>
                    <span
                      className={cn(
                        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
                        status === "accepted"
                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
                          : status === "pending"
                            ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
                            : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
                        classNames?.statusBadge
                      )}
                    >
                      {status === "accepted"
                        ? "Active"
                        : status === "pending"
                          ? "Pending"
                          : "Inactive"}
                    </span>
                  </TableCell> */}
                  <TableCell className={classNames?.tableCell}>
                    {member.createdAt.toString()}
                  </TableCell>
                  <TableCell
                    className={cn("text-right", classNames?.tableCell)}
                  >
                    <MemberActionMenu member={member} />
                  </TableCell>
                </TableRow>
              );
            })
          )}
        </TableBody>
      </Table>
    </div>
  );
}