import Alert from '@/components/Alert';
import Card from '@/components/Card';
import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
import { isResponseSuccess } from '@/lib/api-helper';
import { formatCurrency, formatTitleCase } from '@/lib/helper';
import { ClosingApi } from '@/services/api/closing';
import { HppItem, ProfitLossItem } from '@/types/api/closing';
import { Icon } from '@iconify/react';
import { useSearchParams } from 'next/navigation';
import { useMemo } from 'react';
import useSWR from 'swr';
import FinanceClosingSkeleton from '@/components/pages/closing/skeleton/FinanceClosingSkeleton';

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

  const { data: finance, isLoading } = useSWR(
    `/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
    () =>
      ClosingApi.getFinance(
        projectFlockId,
        kandangId ? Number(kandangId) : undefined
      )
  );

  const hppTableData: HppItem[] = useMemo(() => {
    if (isResponseSuccess(finance)) {
      const customItems = {
        label: 'HPP dan Pengeluaran',
        code: 'custom_row',
      } as HppItem;
      const purchases = finance.data.hpp.items.filter(
        (item) => item.category === 'purchase'
      );
      const totalBudgeting = {
        label: 'HPP dan Bahan Baku',
        code: 'custom_row',
      } as HppItem;
      const overheads = finance.data.hpp.items.filter(
        (item) => item.category === 'overhead'
      );
      return [customItems, ...purchases, totalBudgeting, ...overheads];
    }
    return [];
  }, [finance]);

  const profitLossTableData: ProfitLossItem[] = useMemo(() => {
    if (isResponseSuccess(finance)) {
      const incomes = finance.data.profit_loss.items.filter(
        (item) => item.type === 'income'
      );
      const purchases = finance.data.profit_loss.items.filter(
        (item) => item.type === 'purchase'
      );
      const overheads = finance.data.profit_loss.items.filter(
        (item) => item.type === 'overhead'
      );
      const grossProfit = {
        label: 'LABA RUGI BRUTO',
        code: 'custom_row',
        type: 'gross_profit',
        rp_per_bird:
          finance.data.profit_loss.summary.gross_profit.rp_per_bird ?? 0,
        rp_per_kg: finance.data.profit_loss.summary.gross_profit.rp_per_kg ?? 0,
        amount: finance.data.profit_loss.summary.gross_profit.amount ?? 0,
      } as ProfitLossItem;
      const subtotal = {
        label: 'Subtotal',
        code: 'custom_row',
        type: 'subtotal',
        rp_per_bird:
          finance.data.profit_loss.summary.sub_total.rp_per_bird ?? 0,
        rp_per_kg: finance.data.profit_loss.summary.sub_total.rp_per_kg ?? 0,
        amount: finance.data.profit_loss.summary.sub_total.amount ?? 0,
      } as ProfitLossItem;
      return [...incomes, ...purchases, grossProfit, ...overheads, subtotal];
    }
    return [];
  }, [finance]);

  return (
    <div className='flex flex-col gap-4 pt-3'>
      {isLoading ? (
        <FinanceClosingSkeleton />
      ) : !isResponseSuccess(finance) ? (
        <FinanceClosingSkeleton
          iconName='heroicons:chart-bar'
          title='Data Keuangan Tidak Ditemukan'
          subtitle='Tidak ada data keuangan untuk periode ini.'
        />
      ) : (
        <>
          <section className='grid grid-cols-1 md:grid-cols-2 gap-3'>
            <Card
              className={{
                wrapper: 'w-full rounded-xl border border-base-content/10',
                body: 'p-0',
                wrapperContent:
                  'h-full flex flex-col items-between justify-between',
              }}
              variant='bordered'
            >
              <div className='flex flex-row items-center gap-4 px-4 py-4'>
                <Alert
                  variant='soft'
                  color='success'
                  className='rounded-lg p-3 bg-success/12 flex items-center justify-center'
                >
                  <Icon
                    icon='heroicons:chart-bar-square'
                    width={24}
                    height={24}
                  />
                </Alert>
                <div className='space-y-1'>
                  <h3 className='text-base-content/50 font-semibold text-sm'>
                    Laba Rugi Brutto
                  </h3>
                  <p className='text-xl font-semibold'>
                    {isResponseSuccess(finance)
                      ? formatCurrency(
                          finance.data.profit_loss.summary.gross_profit.amount
                        )
                      : '-'}
                  </p>
                </div>
              </div>
            </Card>

            <Card
              className={{
                wrapper: 'w-full rounded-xl border border-base-content/10',
                body: 'p-0',
                wrapperContent:
                  'h-full flex flex-col items-between justify-between',
              }}
              variant='bordered'
            >
              <div className='flex flex-row items-center gap-4 px-4 py-4'>
                <Alert
                  variant='soft'
                  color='info'
                  className='rounded-lg p-3 bg-info/12 flex items-center justify-center'
                >
                  <Icon
                    icon='heroicons:currency-dollar'
                    width={24}
                    height={24}
                  />
                </Alert>
                <div className='space-y-1'>
                  <h3 className='text-base-content/50 font-semibold text-sm'>
                    Laba Rugi Netto
                  </h3>
                  <p className='text-xl font-semibold'>
                    {isResponseSuccess(finance)
                      ? formatCurrency(
                          finance.data.profit_loss.summary.net_profit.amount
                        )
                      : '-'}
                  </p>
                </div>
              </div>
            </Card>
          </section>
          <Card
            title='HPP Purchases'
            variant='bordered'
            collapsible
            className={{
              wrapper: 'w-full rounded-lg border-none',
              body: 'p-0',
              title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
              collapsible: 'rounded-lg',
            }}
          >
            <div className='p-0'>
              <Table<HppItem>
                data={hppTableData}
                isLoading={isLoading}
                columns={[
                  {
                    header: 'No.',
                    enableSorting: false,
                    accessorFn: (item, index) => {
                      if (item.code === 'custom_row') return '-';
                      const dataRowsBefore = hppTableData
                        .slice(0, index)
                        .filter((row) => row.code !== 'custom_row').length;
                      return dataRowsBefore + 1;
                    },
                    footer: () => {
                      return 'HPP';
                    },
                  },
                  {
                    header: 'Jenis',
                    enableSorting: false,
                    accessorFn: (item) => formatTitleCase(item.label || '-'),
                  },
                  {
                    header: 'Budgeting',
                    enableSorting: false,
                    columns: [
                      {
                        header: 'Rp/Ekor',
                        id: 'budgeting_rp_per_bird',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.budgeting?.rp_per_bird || 0),
                        footer: (props) => {
                          return props.column.id === 'budgeting_rp_per_bird' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.budgeting
                                  ?.rp_per_bird || 0
                              )
                            : '-';
                        },
                      },
                      {
                        header: 'Rp/Kg',
                        id: 'budgeting_rp_per_kg',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.budgeting?.rp_per_kg || 0),
                        footer: (props) => {
                          return props.column.id === 'budgeting_rp_per_kg' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.budgeting
                                  ?.rp_per_kg || 0
                              )
                            : '-';
                        },
                      },
                      {
                        header: 'Jumlah (Rp)',
                        id: 'budgeting_amount',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.budgeting?.amount || 0),
                        footer: (props) => {
                          return props.column.id === 'budgeting_amount' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.budgeting?.amount || 0
                              )
                            : '-';
                        },
                      },
                    ],
                  },
                  {
                    header: 'Realization',
                    enableSorting: false,
                    columns: [
                      {
                        header: 'Rp/Ekor',
                        id: 'realization_rp_per_bird',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.realization?.rp_per_bird || 0),
                        footer: (props) => {
                          return props.column.id ===
                            'realization_rp_per_bird' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.realization
                                  ?.rp_per_bird || 0
                              )
                            : '-';
                        },
                      },
                      {
                        header: 'Rp/Kg',
                        id: 'realization_rp_per_kg',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.realization?.rp_per_kg || 0),
                        footer: (props) => {
                          return props.column.id === 'realization_rp_per_kg' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.realization
                                  ?.rp_per_kg || 0
                              )
                            : '-';
                        },
                      },
                      {
                        header: 'Jumlah (Rp)',
                        id: 'realization_amount',
                        enableSorting: false,
                        accessorFn: (item) =>
                          formatCurrency(item.realization?.amount || 0),
                        footer: (props) => {
                          return props.column.id === 'realization_amount' &&
                            isResponseSuccess(finance)
                            ? formatCurrency(
                                finance.data.hpp.summary?.realization?.amount ||
                                  0
                              )
                            : '-';
                        },
                      },
                    ],
                  },
                ]}
                className={{
                  containerClassName: 'w-full mb-0!',
                  tableWrapperClassName:
                    'overflow-x-auto rounded-tr-none rounded-tl-none',
                  tableClassName: 'w-full table-auto text-sm',
                  headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                  headerColumnClassName:
                    'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
                  bodyRowClassName:
                    'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
                  bodyColumnClassName:
                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                  tableFooterClassName:
                    'bg-gray-100 font-semibold border border-gray-200',
                  footerRowClassName: 'border-t-2 border-gray-300',
                  footerColumnClassName:
                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                  paginationClassName: 'hidden',
                }}
                renderCustomRow={(row) => {
                  const rowData = row.original;
                  if (rowData.code === 'custom_row') {
                    return (
                      <tr
                        key={row.id}
                        className={TABLE_DEFAULT_STYLING.bodyRowClassName}
                      >
                        <td
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        ></td>
                        <td
                          colSpan={7}
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        >
                          <div className='font-bold'>
                            {formatTitleCase(rowData.label ?? '-')}
                          </div>
                        </td>
                      </tr>
                    );
                  }
                  return null;
                }}
                renderFooter={isResponseSuccess(finance)}
              />
            </div>
          </Card>
          <Card
            title='Profit/Loss'
            variant='bordered'
            collapsible
            className={{
              wrapper: 'w-full rounded-lg border-none',
              body: 'p-0',
              title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
              collapsible: 'rounded-lg',
            }}
          >
            <div className='p-0'>
              <Table<ProfitLossItem>
                data={profitLossTableData}
                isLoading={isLoading}
                columns={[
                  {
                    header: 'Jenis',
                    enableSorting: false,
                    accessorFn: (item) => item.label,
                    cell: (item) => (
                      <div className=''>
                        {formatTitleCase(item.row.original.label || '-')}
                      </div>
                    ),
                    footer: () => (
                      <div className='font-bold uppercase'>LABA RUGI NETTO</div>
                    ),
                  },
                  {
                    header: 'Rp/Ekor',
                    enableSorting: false,
                    accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
                    footer: () => (
                      <div className='font-bold'>
                        {isResponseSuccess(finance)
                          ? formatCurrency(
                              finance.data.profit_loss.summary.net_profit
                                .rp_per_bird || 0
                            )
                          : formatCurrency(0)}
                      </div>
                    ),
                  },
                  {
                    header: 'Rp/Kg',
                    enableSorting: false,
                    accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
                    footer: () => (
                      <div className='font-bold'>
                        {isResponseSuccess(finance)
                          ? formatCurrency(
                              finance.data.profit_loss.summary.net_profit
                                .rp_per_kg || 0
                            )
                          : formatCurrency(0)}
                      </div>
                    ),
                  },
                  {
                    header: 'Jumlah (Rp)',
                    enableSorting: false,
                    accessorFn: (item) => formatCurrency(item.amount || 0),
                    footer: () => (
                      <div className='font-bold'>
                        {isResponseSuccess(finance)
                          ? formatCurrency(
                              finance.data.profit_loss.summary.net_profit
                                .amount || 0
                            )
                          : formatCurrency(0)}
                      </div>
                    ),
                  },
                ]}
                className={{
                  containerClassName: 'w-full mb-0!',
                  tableWrapperClassName:
                    'overflow-x-auto rounded-tr-none rounded-tl-none',
                  tableClassName: 'w-full table-auto text-sm',
                  headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                  headerColumnClassName:
                    'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
                  bodyRowClassName:
                    'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
                  bodyColumnClassName:
                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                  tableFooterClassName:
                    'bg-gray-100 font-semibold border border-gray-200',
                  footerRowClassName: 'border-t-2 border-gray-300',
                  footerColumnClassName:
                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                  paginationClassName: 'hidden',
                }}
                renderCustomRow={(row) => {
                  const rowData = row.original;
                  if (rowData.code === 'custom_row') {
                    return (
                      <tr
                        key={row.id}
                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
                      >
                        <td
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        >
                          <div className='font-bold ps-6 uppercase'>
                            {formatTitleCase(rowData.label ?? '-')}
                          </div>
                        </td>
                        <td
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        >
                          <div className='font-bold'>
                            {formatCurrency(rowData.rp_per_bird ?? 0)}
                          </div>
                        </td>
                        <td
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        >
                          <div className='font-bold'>
                            {formatCurrency(rowData.rp_per_kg ?? 0)}
                          </div>
                        </td>
                        <td
                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                        >
                          <div className='font-bold'>
                            {formatCurrency(rowData.amount ?? 0)}
                          </div>
                        </td>
                      </tr>
                    );
                  }
                  return null;
                }}
                renderFooter={isResponseSuccess(finance)}
              />
            </div>
          </Card>
        </>
      )}
    </div>
  );
};

export default FinanceClosingTable;
