'use client';

import Button from '@/components/Button';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import Table from '@/components/Table';
import Badge from '@/components/Badge';
import { cn, formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
import { ProjectFlock } from '@/types/api/production/project-flock';
import {
  ClosingExpense,
  ProjectFlockKandang,
  StockItem,
} from '@/types/api/production/project-flock-kandang';
import { Icon } from '@iconify/react';
import useSWR from 'swr';
import { ProjectFlockKandangApi } from '@/services/api/production/project-flock-kandang';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import { useMemo, useState } from 'react';
import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
import { ApprovalApi } from '@/services/api/approval';
import RequirePermission from '@/components/helper/RequirePermission';

const ProjectFlockClosingForm = ({
  projectFlock,
  projectFlockKandang,
}: {
  projectFlock: ProjectFlock;
  projectFlockKandang: ProjectFlockKandang;
}) => {
  const router = useRouter();
  const closeModal = useModal();

  const [isClosingLoading, setIsClosingLoading] = useState(false);

  const { data: closingData, isLoading } = useSWR(
    `${ProjectFlockKandangApi.basePath}/${projectFlockKandang.id}/closing`,
    () => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
  );

  const { data: projectFlockKandangApprovals } = useSWR(
    `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`,
    () =>
      ApprovalApi.getAllFetcher(
        `${ApprovalApi.basePath}?module_name=PROJECT_FLOCK_KANDANGS&module_id=${projectFlockKandang.id}`
      )
  );

  const isCanClose = useMemo(() => {
    return isResponseSuccess(projectFlockKandangApprovals)
      ? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
      : true;
  }, [projectFlockKandangApprovals]);

  const confirmationModalCloseClickHandler = async () => {
    setIsClosingLoading(true);
    const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
      projectFlockKandang?.id as number,
      {
        closed_date: isCanClose ? formatDate(new Date(), 'YYYY-MM-DD') : '',
        action: isCanClose ? 'close' : 'unclose',
      }
    );

    if (isResponseSuccess(deleteProjectFlockRes)) {
      toast.success(deleteProjectFlockRes?.message as string);
      router.push(
        `/production/project-flock/detail?projectFlockId=${projectFlock.id}`
      );
    }
    if (isResponseError(deleteProjectFlockRes)) {
      toast.error(deleteProjectFlockRes?.message as string);
    }
    setIsClosingLoading(false);
    closeModal.closeModal();
  };

  const errorStock = useMemo(() => {
    return isResponseSuccess(closingData)
      ? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
      : true;
  }, [closingData]);

  const errorExpense = useMemo(() => {
    return isResponseSuccess(closingData)
      ? closingData?.data?.expenses.every((expense) => expense.step < 5)
      : true;
  }, [closingData]);

  const isCanCloseValid = true;

  return (
    <>
      <DrawerHeader
        leftIcon='mdi:arrow-left'
        leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
        subtitle={`Close ${projectFlock.flock_name}`}
      ></DrawerHeader>

      {/* Informasi Kandang */}
      <div className='divider'></div>
      <div className='px-4 pb-4 flex flex-col gap-4'>
        <h2 className='text-2xl font-semibold'>Informasi Kandang</h2>

        {/* Badge Row */}
        <div className='flex flex-row gap-2'>
          <Badge
            variant='soft'
            color='success'
            className={{
              badge: 'rounded-lg px-2',
            }}
          >
            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
            Aktif
          </Badge>
          <div className='divider divider-horizontal p-0 m-0'></div>
          <Badge
            color='neutral'
            variant='soft'
            className={{ badge: 'rounded-lg px-2' }}
          >
            <Icon icon='mdi:home' width={12} height={12} />
            {` Kapasitas ${formatNumber(projectFlockKandang.kandang?.capacity)} Ekor`}
          </Badge>
        </div>

        {/* Information Grid */}
        <div className='grid grid-cols-3 gap-4'>
          {/* Area */}
          <div
            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
        relative 
        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
          >
            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
          </div>
          <div className='col-span-2'>{projectFlock.area?.name}</div>

          {/* Lokasi */}
          <div
            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
        relative 
        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
          >
            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
          </div>
          <div className='col-span-2'>{projectFlock.location?.name}</div>

          {/* Kandang */}
          <div
            className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2 
        relative 
        before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
          >
            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
          </div>
          <div className='col-span-2'>{projectFlockKandang.kandang?.name}</div>

          {/* Jumlah DOC */}
          <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
            <Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
          </div>
          <div className='col-span-2'>
            {formatNumber(
              projectFlockKandang.chickins?.reduce(
                (total, chickin) => total + chickin.usage_qty,
                0
              ) ?? 0
            )}{' '}
            Ekor
          </div>
        </div>
      </div>

      {/* Table Biaya */}
      <div className='divider'></div>
      <div className='px-4 pb-4'>
        <h2 className='text-2xl font-semibold'>Biaya</h2>
        <Table<ClosingExpense>
          data={
            isResponseSuccess(closingData) ? closingData.data?.expenses : []
          }
          columns={[
            {
              header: 'PO Number',
              accessorKey: 'po_number',
            },
            {
              header: 'Total',
              accessorKey: 'total',
            },
            {
              header: 'Status',
              accessorKey: 'status',
              cell(props) {
                return (
                  <Badge
                    className={{
                      badge: 'rounded-lg',
                    }}
                    variant='soft'
                    color={
                      props.row.original.step < 5
                        ? props.row.original.step == 1
                          ? 'neutral'
                          : 'success'
                        : 'error'
                    }
                  >
                    {formatTitleCase(props.row.original.step_name)}
                  </Badge>
                );
              },
            },
          ]}
          className={{
            containerClassName: cn('my-4'),
            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
            tableClassName: 'font-inter w-full table-sm min-h-full!',
            headerRowClassName: 'border-b border-b-gray-200',
            headerColumnClassName:
              'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
            bodyRowClassName: 'border-b border-b-gray-200',
            bodyColumnClassName:
              'px-3 py-3 last:flex last:flex-row last:justify-end',
            paginationClassName: 'hidden',
          }}
        />
        {/* {errorExpense && (
          <div className='text-center text-error text-sm'>
            *Pastikan semua biaya sudah selesai sebelum melakukan closing.
          </div>
        )} */}
      </div>

      {/* Table Persediaan Gudang */}
      <div className='divider'></div>
      <div className='px-4 pb-4'>
        <h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
        <Table<StockItem>
          data={
            isResponseSuccess(closingData)
              ? closingData.data?.stock_remaining
              : []
          }
          columns={[
            {
              header: 'Product',
              accessorKey: 'product_name',
            },
            {
              header: 'Kategori',
              accessorKey: 'product_category',
            },
            {
              header: 'Quantity',
              accessorKey: 'quantity',
            },
            {
              header: 'UOM',
              accessorKey: 'uom',
            },
          ]}
          className={{
            containerClassName: cn('my-4'),
            tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
            tableClassName: 'font-inter w-full table-sm min-h-full!',
            headerRowClassName: 'border-b border-b-gray-200',
            headerColumnClassName:
              'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
            bodyRowClassName: 'border-b border-b-gray-200',
            bodyColumnClassName:
              'px-3 py-3 last:flex last:flex-row last:justify-end',
            paginationClassName: 'hidden',
          }}
        />
        {/* {errorStock && (
          <div className='text-center text-error text-sm'>
            *Masih ada sisa stock yang belum dihabiskan.
          </div>
        )} */}
      </div>

      <div className='p-4 mt-6'>
        <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
          <Button
            className='w-full'
            color='error'
            isLoading={isLoading}
            disabled={!isCanCloseValid}
            onClick={() => closeModal.openModal()}
          >
            <Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
            {isCanClose ? 'Close' : 'Unclose'}
          </Button>
        </RequirePermission>
      </div>

      <ConfirmationModal
        ref={closeModal.ref}
        type='error'
        text={
          isCanClose
            ? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
            : 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
        }
        secondaryButton={{
          text: 'Tidak',
        }}
        primaryButton={{
          text: 'Ya',
          color: 'error',
          isLoading: isClosingLoading,
          onClick: confirmationModalCloseClickHandler,
        }}
      />
    </>
  );
};

export default ProjectFlockClosingForm;
