"use client";

import { Badge, Empty, Table, Tabs } from "antd";
import { AlertMessage } from "./AlertMessage";
import InputItem from "./FormItems";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { appPages } from "../utils/allPages";
import { useState } from "react";
import AvatarWithInfo from "./AvatarWithInfo";
import { parseArrayField } from "@/app/utils/parseArrayField";
import { getStatusColor } from "@/app/utils/getStatusColor";

import {
  customerTableReportsColumns,
  defaultTableColumns,
  deliveryNoteTableColumns,
  expensesTableColumns,
  inventoryTableColumns,
  invoiceTableColumns,
  leadTableColumns,
  paymentTableColumns,
  proformaTableColumns,
  purchaseOrderTableColumns,
  purchasePaymentTableColumns,
  purchaseReturnsTableColumns,
  purchaseTableColumns,
  quoteTableColumns,
  recurringInvoice,
  salesOrderColumns,
  salesReturnsTableColumns,
  supplierpaymentTableColumns,
  supplierTableColumns,
  unitTableColumns,
  walletTableColumns,
} from "@/app/utils/AllTables";
import { errorMessage, successMessage } from "../utils/alertMessages";
import GoogleIcon from "./GoogleIcon";

export default function TeamMembers({
  userIds,
  currentSession,
  brandData,
  editable = false,
}) {
  const queryClient = useQueryClient();

  const fetchTeamMembers = async ({ queryKey }) => {
    const [, ids] = queryKey;
    if (!ids?.length) return { user: [] };

    const res = await fetch(`/api/user?user_id=${ids.join(",")}`);
    if (!res.ok) throw new Error("Failed to fetch team members");
    return res.json();
  };

  const columnGenerators = {
    deliverynote: (actionRenderer) =>
      deliveryNoteTableColumns(actionRenderer, brandData),
    customer: (actionRenderer) =>
      customerTableReportsColumns(actionRenderer, brandData),
    quote: (actionRenderer) => quoteTableColumns(actionRenderer, brandData),
    salesorder: (actionRenderer) =>
      salesOrderColumns(actionRenderer, brandData),
    proforma: (actionRenderer) =>
      proformaTableColumns(actionRenderer, brandData),
    invoice: (actionRenderer) => invoiceTableColumns(actionRenderer, brandData),
    customerpayment: (actionRenderer) =>
      paymentTableColumns(actionRenderer, brandData),
    lead: (actionRenderer) => leadTableColumns(actionRenderer, brandData),
    supplier: (actionRenderer) =>
      supplierTableColumns(actionRenderer, brandData),
    purchase: (actionRenderer) =>
      purchaseTableColumns(actionRenderer, brandData),
    purchaseorder: (actionRenderer) =>
      purchaseOrderTableColumns(actionRenderer, brandData),
    purchasepayment: (actionRenderer) =>
      purchasePaymentTableColumns(actionRenderer, brandData),
    supplierpayment: (actionRenderer) =>
      supplierpaymentTableColumns(actionRenderer, brandData),
    salesreturn: (actionRenderer) =>
      salesReturnsTableColumns(actionRenderer, brandData),
    purchasereturn: (actionRenderer) =>
      purchaseReturnsTableColumns(actionRenderer, brandData),
    default: (actionRenderer) =>
      defaultTableColumns(actionRenderer, brandData),
  };

  const rowSelection = {
    onChange: () => { },
  };

  function TabApiContent({ typeFor, creatorId }) {
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);

    const params = new URLSearchParams({
      page: currentPage,
      limit: pageSize,
      orderby_created: true,
    });
    if (creatorId) params.set("created_by", String(creatorId));

    const apiUrl = `/api/${typeFor}?${params.toString()}`;

    const { data, isPending, error } = useQuery({
      queryKey: [typeFor, currentPage, pageSize],
      queryFn: () => fetch(apiUrl).then((res) => res.json()),
      keepPreviousData: true,
    });

    if (isPending) return <div>Loading {typeFor}...</div>;
    if (error) return <div>Error loading {typeFor}</div>;

    const rows = (data?.[typeFor] || []).filter((row) => {
      if (!creatorId) return true;

      const assignedArray = parseArrayField(row?.assigned_to);
      const lastAssigned = Array.isArray(assignedArray)
        ? assignedArray[assignedArray.length - 1]
        : assignedArray;
      const lastAssignedId =
        typeof lastAssigned === "object" && lastAssigned?.id
          ? lastAssigned.id
          : lastAssigned;

      if (lastAssignedId) {
        return String(lastAssignedId) === String(creatorId);
      }

      return String(row?.created_by) === String(creatorId);
    });
    const total = data?.pagination?.total || 0;

    if (!rows.length) {
      return <div className="text-gray-400">No records</div>;
    }

    const generator =
      columnGenerators[typeFor] || columnGenerators.default;

    const columns = generator(() => null, rows);
    const processedColumns = columns.map((col) => {
      if (col.key === "status") {
        return {
          ...col,
          render: (_, record) => {
            const status = parseArrayField(record?.status);
            const label = status?.[0]?.label || "-";
            return <Badge color={getStatusColor(label)} text={label} />;
          },
        };
      }
      return col;
    });

    return (
      <div className="transffer-table">
        <Table
          rowSelection={false}
          columns={processedColumns}
          dataSource={rows}
          rowKey="id"
          size="small"
          rowClassName={() => "crm-row"}
          scroll={{ x: true }}
          className="crm-table"
          pagination={{
            current: currentPage,
            pageSize,
            total,
            showSizeChanger: true,
            onChange: (page, size) => {
              setCurrentPage(page);
              setPageSize(size);
            },
          }}
        />
      </div>
    );
  }

  const capitalize = (text = "") =>
    text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();

  const buildPermissionTabs = (items = [], creatorId, flag = "transfer") =>
    items
      .filter((m) => m.role !== false && m[flag] === true)
      .sort((a, b) => a.order - b.order)
      .map((menu) => ({
        key: menu.item.trim(),
        label: capitalize(menu.item.trim()),
        children: (
          <TabApiContent typeFor={menu.item.trim()} creatorId={creatorId} />
        ),
      }));

  let ids = [];
  try {
    ids = Array.isArray(userIds) ? userIds : JSON.parse(userIds || "[]");
  } catch {
    ids = [];
  }

  const { data } = useQuery({
    queryKey: ["team-members", ids],
    enabled: !!ids.length,
    queryFn: fetchTeamMembers,
  });

  const users = Array.isArray(data?.user)
    ? data.user
    : data?.user
      ? [data.user]
      : [];

  const handleRemove = async (memberId) => {
    try {
      const updatedIds = users
        .map((u) => Number(u.user_id))
        .filter((id) => id !== Number(memberId));

      const res = await fetch("/api/user", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          user_id: currentSession?.user?.id,
          team_members: JSON.stringify(updatedIds),
        }),
      });

      const result = await res.json();

      if (!res.ok || result?.success === false) {
        throw new Error(result?.message || "Unable to remove member");
      }

      currentSession.user.team_members = JSON.stringify(updatedIds);

      queryClient.setQueryData(["team-members", ids], (old) => ({
        ...old,
        user: old?.user?.filter(
          (u) => Number(u.user_id) !== Number(memberId)
        ),
      }));

      successMessage(result?.message || "Member removed successfully");
    } catch (err) {
      errorMessage(
        err?.message || "Failed to remove member. Please try again."
      );
    }
  };

  if (!users.length) {
    return (
      <div className="flex items-center justify-center py-20 h-[80vh]">
        <Empty description="No team members" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {users.map((record) => {
        const name = record.full_name || "Unknown User";
        const email = record.email || "No Email";

        return (
          <div
            key={record.user_id}
            className="bg-white dark:bg-[#0c0c0c] border border-gray-200 dark:border-gray-800 rounded-2xl"
          >
            <div className="flex items-center justify-between p-4 gap-4">
              <div className="flex items-center gap-3">
                <AvatarWithInfo
                  itemId={Number(record.user_id)}
                  avatar={record.avatar}
                />

              </div>
              {editable && (
                <div className="flex items-center">
                  <InputItem
                    type="popconfirm"
                    title={`Remove ${record.full_name}?`}
                    onClick={() => handleRemove(record.user_id)}
                    okText="Yes"
                    cancelText="No"
                    placeholder="Remove"
                    className="no-width !mb-0"
                    btnvariant="outline"
                    icon={<GoogleIcon name="delete" size={16} />}
                  />
                </div>
              )}
            </div>
              <div className="border-t border-gray-100 dark:border-gray-800 pb-5 px-5 pt-2">
                <Tabs
                  size="small"
                  destroyInactiveTabPane
                  items={buildPermissionTabs(appPages || [], record.user_id)}
                />
              </div>
            </div>
          );
        })}
    </div>
  );
}