"use client";

import * as React from "react";
import { UsersIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { Typography } from "@/components/ui/typography";
import { DataTable } from "@/components/data-table";
import type { DataTableColumn } from "@/components/data-table";
import { useTranslation } from "@/hooks/useTranslation";
import type { ProviderTeamMember } from "@/types/provider";

import { formatDay } from "./lib/format";

/**
 * Team members attached to the provider account.
 *
 * Client-mode DataTable: the detail endpoint returns the full `users` array in
 * one payload, so there is nothing to paginate server-side.
 */
export function ProviderTeamTab({
  members,
}: {
  members: ProviderTeamMember[];
}) {
  const { t, language } = useTranslation();

  const columns = React.useMemo<DataTableColumn<ProviderTeamMember>[]>(
    () => [
      {
        key: "name",
        header: t("providers.detail.team.name"),
        cell: (member) => (
          <Typography as="span" variant="body">
            {`${member.firstName} ${member.lastName}`.trim()}
          </Typography>
        ),
        sortable: true,
        sortValue: (member) => `${member.firstName} ${member.lastName}`,
      },
      {
        key: "contact",
        header: t("providers.detail.team.contact"),
        cell: (member) => {
          const contact = member.email ?? member.phoneNumber;
          return contact ? (
            // Emails and phone numbers stay LTR inside Arabic copy.
            <Typography as="span" variant="number">
              {contact}
            </Typography>
          ) : (
            <Typography as="span" variant="caption" color="secondary">
              {t("providers.detail.team.noContact")}
            </Typography>
          );
        },
      },
      {
        key: "role",
        header: t("providers.detail.team.role"),
        cell: (member) => (
          <Typography as="span" variant="body">
            {t(`roles.${member.role}`)}
          </Typography>
        ),
        sortable: true,
      },
      {
        key: "isActive",
        header: t("providers.detail.team.accountStatus"),
        cell: (member) => (
          <Badge variant={member.isActive ? "complete" : "closed"}>
            {t(
              member.isActive
                ? "providers.detail.team.active"
                : "providers.detail.team.inactive",
            )}
          </Badge>
        ),
      },
      {
        key: "createdAt",
        header: t("providers.detail.team.joined"),
        cell: (member) => (
          <Typography as="span" variant="number">
            {formatDay(member.createdAt, language)}
          </Typography>
        ),
        sortable: true,
        sortValue: (member) => new Date(member.createdAt),
      },
    ],
    [t, language],
  );

  return (
    <DataTable
      columns={columns}
      data={members}
      getRowId={(member) => member.id}
      searchable
      searchText={(member) =>
        [
          member.firstName,
          member.lastName,
          member.email ?? "",
          member.phoneNumber ?? "",
        ].join(" ")
      }
      emptyState={
        <EmptyState
          icon={<UsersIcon />}
          title={t("providers.detail.team.emptyTitle")}
          description={t("providers.detail.team.emptyDescription")}
        />
      }
    />
  );
}