import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
import { ColumnDef } from "@tanstack/react-table";
import OrganizationsActions from "@/super-admin/components/organizations/OrganizationsActions";
import { Badge } from "../../../shared/common/ui/badge";
import { Users } from "lucide-react";
import { StatusCell } from "../organizationAdmins/StatusCell";
import { VisibilityCell } from "./VisibilityCell";
import { format } from "date-fns";
import { t } from "i18next";
import i18n from "@/i18n";

export const OrganizationsColumnDefn: ColumnDef<OrganizationDto>[] = [
  {
    accessorKey: "name.en",
    header: () => t("organization.organizationName"),
    size: 300,
    minSize: 200,
    maxSize: 400,
    cell: ({ row }) => {
      const org = row.original;
      const lang = i18n.language;
      // This will be overridden in the Organizations component with proper data
      return (
        <div className="font-medium">
          {org.parentId && <span className="text-gray-400 dark:text-gray-500 mr-2">└─</span>}
          {org.name.am}
        </div>
      );
    },
  },
  {
    accessorKey: "createdAt",
    header: () => t("organization.createdOn"),
    cell: ({ row }) => (
      <div className="font-medium">
        {format(new Date(row.original.createdAt), "MMM dd, yyyy")}
      </div>
    ),
  },
  {
    accessorKey: "activeEmployeeCount",
    header: () => t("organization.numberOfUsers"),
    cell: ({ row }) => (
      <div className="font-medium flex items-center">
        <Users className="h-4 w-4 mr-2 text-gray-500 dark:text-gray-400" />
        {row.original.activeEmployeeCount !== undefined
          ? row.original.activeEmployeeCount
          : "-"}
      </div>
    ),
  },
  {
    accessorKey: "adminsCount",
    header: () => t("organization.assignedAdmin"),
    cell: ({ row }) => (
      <StatusCell
        id={row.original.id}
        adminsCount={row.original.adminsCount || 0}
      />
    ),
  },
  {
    id: "status",
    header: () => t("userRecord.Status"),
    cell: ({ row }) => {
      const rowData = row.original;
      return (
        <div>
          <Badge
            className={`${
              rowData.status === "Active"
                ? "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50"
                : "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50"
            } rounded-full px-6 py-1 font-medium`}
          >
            {rowData.status === "Active"
              ? t("statusBar.activate")
              : t("statusBar.deactivate")}
          </Badge>
        </div>
      );
    },
  },
  {
    id: "isGovernmentOrganization",
    header: () => t("organization.isGovernmentOrganization"),
    cell: ({ row }) => {
      const rowData = row.original;
      return (
        <div>
          <Badge
            className={`${
              rowData.isGovernmentOrganization
                ? "bg-primary-600 text-white hover:bg-primary-400"
                : "bg-red-600 text-white hover:bg-red-400"
            } rounded-full px-6 py-1 font-medium`}
          >
            {rowData.isGovernmentOrganization === true
              ? t("common.yes")
              : t("common.no")}
          </Badge>
        </div>
      );
    },
  },
  {
    id: "visibility",
    header: () => t("organization.visibilityToOthers"),
    cell: ({ row }) => {
      const rowData = row.original;
      return <VisibilityCell organizationId={rowData.id} />;
    },
  },
  {
    id: "Actions",
    header: () => t("userRecord.Actions"),
    cell: ({ row }) => {
      const rowData = row.original;
      return <OrganizationsActions rowData={rowData as OrganizationDto} />;
    },
  },
];
