'use client';

import CustomTableHead from '@/Component/Common/Tables/CustomTableHead';
import { TableEditSVG } from '@/Component/Common/SVGs/CommonSVG';
import NoDataTable from '@/Component/Common/Tables/NoData/NoDataTable';
import TableHoc from '@/Utils/HOC/TableHoc';
import type { CountryPaymentAssignment, CountryWithPaymentMethods } from './types';

function CountryPaymentTable(props: {
  apiData: any;
  search?: string;
  onEdit: (row: CountryWithPaymentMethods) => void;
  translations?: any;
}) {
  const { apiData, onEdit } = props;
  const data = apiData?.data?.data ?? apiData?.data ?? [];
  const list: CountryWithPaymentMethods[] = Array.isArray(data) ? data : [];

  const tableHeadData = {
    head: [
      { title: 'Sr No.', sorting: false },
      { title: 'Country', apiKey: 'country_name', sorting: true },
      { title: 'Assigned Payment Methods', sorting: false },
      { title: 'Action', sorting: false },
    ],
  };

  return (
    <>
      <table className="w-full text-sm text-left rtl:text-right">
        <CustomTableHead
          tableHeadData={tableHeadData}
          params={apiData?.params}
          setParams={apiData?.setParams}
        />
        <tbody>
          {list?.length > 0 ? (
            list.map((row: CountryWithPaymentMethods, index: number) => (
              <tr
                className="border-b border-lightGray last:border-none font-normal hover:bg-lightGray/20 align-middle"
                key={row.id ?? index}
              >
                <td className="px-5 py-4">
                  {((apiData?.params?.page ?? 1) - 1) * (apiData?.params?.per_page ?? 50) + index + 1}
                </td>
                <td className="px-5 py-4 font-medium">
                  {(row as any)?.country_name ?? row.country_name ?? '—'}
                </td>
                <td className="px-5 py-4">
                  {(row.countryPaymentMethods ?? []).length > 0
                    ? (row.countryPaymentMethods ?? [])
                        .filter((pm: CountryPaymentAssignment) => pm.is_active !== false)
                        .map((pm: CountryPaymentAssignment) => pm.payment_method?.name ?? '—')
                        .join(', ') || '—'
                    : '—'}
                </td>
                <td className="px-5 py-4">
                  <button
                    type="button"
                    onClick={() => onEdit(row)}
                    className="p-0.5 inline-flex items-center gap-1"
                    title="Edit country payment methods"
                  >
                    <TableEditSVG />
                  </button>
                </td>
              </tr>
            ))
          ) : (
            <NoDataTable colSpan={4} />
          )}
        </tbody>
      </table>
    </>
  );
}

export default TableHoc(CountryPaymentTable) as any;