import Card from '@/components/Card';
import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
import { ClosingApi } from '@/services/api/closing';
import { Overhead, OverheadTotal } from '@/types/api/closing';
import { ColumnDef } from '@tanstack/react-table';
import { useSearchParams } from 'next/navigation';
import { useMemo } from 'react';
import useSWR from 'swr';

interface ClosingOverheadTableProps {
  projectFlockId: number;
}

const ClosingOverheadTable = ({
  projectFlockId,
}: ClosingOverheadTableProps) => {
  const searchParams = useSearchParams();
  const kandangId = searchParams.get('kandangId');

  const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
    `${ClosingApi.basePath}/${projectFlockId}${kandangId ? `/${kandangId}` : ''}/overhead`,
    () =>
      ClosingApi.getOverhead(
        projectFlockId,
        kandangId ? Number(kandangId) : undefined
      ),
    {
      keepPreviousData: true,
    }
  );

  // Helper function to create columns with footer support
  const createColumns = (
    total?: OverheadTotal,
    kandangId?: number
  ): ColumnDef<Overhead>[] => {
    const flockColumn: ColumnDef<Overhead>[] = [
      {
        header: 'Budget Pengajuan',
        footer: '',
        columns: [
          {
            id: 'budget_quantity',
            header: 'Jumlah',
            accessorFn: (props) =>
              props.budget_quantity ? formatNumber(props.budget_quantity) : '-',
            footer: total ? () => formatNumber(total.budget_quantity) : '',
          },
          {
            id: 'budget_unit_price',
            header: 'Harga Satuan',
            accessorFn: (props) =>
              props.budget_unit_price
                ? formatCurrency(props.budget_unit_price)
                : '-',
            footer: '',
          },
          {
            id: 'budget_total_amount',
            header: 'Total',
            accessorFn: (props) =>
              props.budget_total_amount
                ? formatCurrency(props.budget_total_amount)
                : '-',
            footer: total
              ? () => formatCurrency(total.budget_total_amount)
              : '',
          },
        ],
      },
      {
        header: 'Realisasi',
        footer: '',
        columns: [
          {
            id: 'actual_date',
            header: 'Tanggal',
            accessorFn: (props) =>
              props.actual_date
                ? formatDate(props.actual_date, 'DD MMM, YYYY')
                : '-',
            footer: '',
          },
          {
            id: 'actual_quantity',
            header: 'Jumlah',
            accessorFn: (props) =>
              props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
            footer: total ? () => formatNumber(total.actual_quantity) : '',
          },
          {
            id: 'actual_unit_price',
            header: 'Harga Satuan',
            accessorFn: (props) =>
              props.actual_unit_price
                ? formatCurrency(props.actual_unit_price)
                : '-',
            footer: '',
          },
          {
            id: 'actual_total_amount',
            header: 'Total',
            accessorFn: (props) =>
              props.actual_total_amount
                ? formatCurrency(props.actual_total_amount)
                : '-',
            footer: total
              ? () => formatCurrency(total.actual_total_amount)
              : '',
          },
        ],
      },
    ];

    const kandangColumn: ColumnDef<Overhead>[] = [
      {
        id: 'actual_date',
        header: 'Tanggal',
        accessorFn: (props) =>
          props.actual_date
            ? formatDate(props.actual_date, 'DD MMM, YYYY')
            : '-',
        footer: '',
      },
      {
        id: 'actual_quantity',
        header: 'Jumlah',
        accessorFn: (props) =>
          props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
        footer: total ? () => formatNumber(total.actual_quantity) : '',
      },
      {
        id: 'actual_unit_price',
        header: 'Harga Satuan',
        accessorFn: (props) =>
          props.actual_unit_price
            ? formatCurrency(props.actual_unit_price)
            : '-',
        footer: '',
      },
      {
        id: 'actual_total_amount',
        header: 'Total',
        accessorFn: (props) =>
          props.actual_total_amount
            ? formatCurrency(props.actual_total_amount)
            : '-',
        footer: total ? () => formatCurrency(total.actual_total_amount) : '',
      },
    ];

    const finalColumns: ColumnDef<Overhead>[] = [
      // Group untuk kolom tanpa footer
      {
        header: 'No',
        accessorFn: (_, index) => index,
        cell: (props) => props.row.index + 1,
      },
      {
        header: 'Nama Item',
        accessorFn: (props) => props.item_name,
        footer: 'Total Pengeluaran Overhead',
      },
      {
        header: 'Satuan',
        accessorFn: (props) => props.uom_name,
      },
      ...(kandangId ? kandangColumn : flockColumn),
      {
        id: 'cost_per_bird',
        header: 'Rp/Ekor',
        accessorFn: (props) =>
          props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
        footer: total ? () => formatCurrency(total.cost_per_bird) : '',
      },
    ];
    return finalColumns;
  };

  const columns = useMemo(
    () =>
      isResponseSuccess(overhead)
        ? createColumns(
            overhead.data?.total,
            kandangId ? Number(kandangId) : undefined
          )
        : createColumns(),
    [overhead]
  );

  return (
    <>
      <Card
        title='Pengeluaran Overhead'
        collapsible
        defaultCollapsed={false}
        className={{
          wrapper: 'w-full',
          body: 'p-4 shadow',
        }}
      >
        <Table<Overhead>
          data={
            isResponseSuccess(overhead) ? (overhead.data?.overheads ?? []) : []
          }
          columns={columns}
          className={{
            containerClassName: 'my-4',
            headerColumnClassName: cn(
              TABLE_DEFAULT_STYLING.headerColumnClassName,
              'whitespace-nowrap'
            ),
          }}
          isLoading={isLoadingOverhead}
          renderFooter={
            isResponseSuccess(overhead)
              ? overhead.data?.overheads.length > 0
              : false
          }
        />
      </Card>
    </>
  );
};

export default ClosingOverheadTable;
