'use client';

import Badge from '@/components/Badge';
import Button from '@/components/Button';
import Card from '@/components/Card';
import SelectInput, {
  OptionType,
  useSelect,
} from '@/components/input/SelectInput';
import PillBadge from '@/components/PillBadge';
import Table from '@/components/Table';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn, formatDate, formatTitleCase } from '@/lib/helper';
import { ProjectFlockApi } from '@/services/api/production/project-flock';
import { ProjectFlockKandangApi } from '@/services/api/production';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { Icon } from '@iconify/react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import useSWR from 'swr';
import { FormHeader } from '@/components/helper/form/FormHeader';
import Link from 'next/link';
import RequirePermission from '@/components/helper/RequirePermission';

const ProjectFlockChickinDetail = ({
  projectFlockId,
}: {
  projectFlockId: number | undefined;
}) => {
  const router = useRouter();

  // Tables Props
  const { state: tableFilterState } = useTableFilter({
    initial: { search: '' },
    paramMap: { page: 'page', pageSize: 'limit' },
  });

  // States
  const [searchProjectFlock, setSearchProjectFlock] = useState('');
  const [selectedProjectFlock, setSelectedProjectFlock] =
    useState<OptionType | null>(null);
  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();

  // Fetch Data
  const { data: listProjectFlockKandang } = useSWR(
    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
      search: searchProjectFlock,
      project_flock_id:
        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
    }).toString()}`,
    ProjectFlockKandangApi.getAllFetcher
  );

  const {
    options: options,
    isLoadingOptions: isLoadingListProjectFlock,
    rawData: listProjectFlock,
  } = useSelect<ProjectFlock>(
    ProjectFlockApi.basePath,
    'id',
    'flock_name',
    '',
    {
      search: searchProjectFlock,
    }
  );

  // Handle Function
  const handleChickinClick = async (
    projectFlockKandang: ProjectFlockKandang
  ) => {
    router.push(
      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
    );
  };

  const handleChangeProjectFlock = (val: OptionType | null) => {
    setSelectedProjectFlock(val);
    if (isResponseSuccess(listProjectFlock) && val) {
      const selected = listProjectFlock.data.find(
        (pf) => pf.id === Number(val.value)
      );
      setProjectFlock(selected);
    } else {
      setProjectFlock(undefined);
    }
    if (projectFlockId) {
      router.push('/production/project-flock/chickin/add');
    }
    if (!val && projectFlockId) {
      router.push('/production/project-flock/chickin/add');
    }
  };

  useEffect(() => {
    if (projectFlockId && isResponseSuccess(listProjectFlock)) {
      setProjectFlock(
        listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
      );
    }
  }, [projectFlockId, listProjectFlock]);
  return (
    <>
      {/* Header */}
      <div className='flex flex-row justify-between items-center px-4 py-4'>
        <div className='flex flex-row items-center h-full gap-2'>
          <Link
            href={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
            className='hover:text-gray-400'
          >
            <Icon icon='mdi:arrow-left' width={24} height={24} />
          </Link>
          <div className='divider divider-horizontal p-0 m-0'></div>
          <div className='text-sm text-neutral'>
            Chick In {projectFlock?.flock_name}
          </div>
        </div>
      </div>
      {/* <FormHeader
        title={`Chick In ${projectFlock?.flock_name ?? 'Project Flock'}`}
        backUrl={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
      /> */}
      {/* <div className='flex flex-col gap-4 w-full my-4'>
        <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
          <SelectInput
            required
            label='Ganti Project Flock'
            placeholder='Pilih Project Flock'
            options={options}
            onInputChange={(val) => {
              setSearchProjectFlock(val);
            }}
            isLoading={isLoadingListProjectFlock}
            value={
              projectFlock
                ? {
                    label: `${projectFlock?.flock_name}`,
                    value: projectFlock?.id,
                  }
                : null
            }
            onChange={(val) => {
              handleChangeProjectFlock(val as OptionType | null);
            }}
            isSearchable
            isClearable
            startAdornment={
              projectFlock && (
                <Badge
                  variant='soft'
                  color='success'
                  size='sm'
                  className={{
                    badge: 'whitespace-nowrap font-semibold',
                  }}
                >
                  Periode {projectFlock?.period}
                </Badge>
              )
            }
          />
        </div>
      </div> */}
      {/* Informasi Umum */}
      {projectFlock && (
        <div className='border-t-1 border-gray-300'>
          <div className='p-4 flex flex-col gap-4'>
            <h2 className='text-2xl font-semibold'>Informasi Umum</h2>
            {/* Badge Row  */}
            <div className='flex flex-row gap-2'>
              <Badge
                variant='soft'
                color={
                  projectFlock.approval.step_number == 1
                    ? 'neutral'
                    : projectFlock.approval.step_number == 2
                      ? 'success'
                      : projectFlock.approval.step_number >= 3
                        ? 'error'
                        : undefined
                }
                className={{
                  badge: 'rounded-lg px-2',
                }}
              >
                <Icon
                  icon='mdi:circle'
                  width={12}
                  height={12}
                  color={
                    projectFlock.approval.step_number == 1
                      ? 'neutral'
                      : projectFlock.approval.step_number == 2
                        ? 'success'
                        : projectFlock.approval.step_number >= 3
                          ? 'error'
                          : undefined
                  }
                />{' '}
                {projectFlock.approval.step_name}
              </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:bookmark' width={12} height={12} />
                {` ${formatTitleCase(projectFlock.category)}`}
              </Badge>
            </div>
            {/* Information Grid */}
            <div className='grid grid-cols-3 gap-4'>
              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
                <Icon width={14} height={14} icon='mdi:account' /> Submitted
              </div>
              <div className='col-span-2'>
                <Badge
                  variant='soft'
                  color='neutral'
                  className={{
                    badge: 'rounded-lg px-2',
                  }}
                >
                  <Icon icon='mdi:account-circle' width={14} height={14} />{' '}
                  {projectFlock.created_user.name}
                </Badge>
              </div>

              <div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
                <Icon width={14} height={14} icon={'mdi:clock'} /> History
              </div>
              <div className='col-span-2'>
                <Button variant='outline' className='py-1 text-sm'>
                  See History{' '}
                  <Icon
                    icon='mdi:arrow-top-right-thin'
                    width={11}
                    height={11}
                  />
                </Button>
              </div>

              {/* BARIS 1 */}
              <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>

              {/* BARIS 2 */}
              <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>

              <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' /> FCR
              </div>
              <div className='col-span-2'>{projectFlock.fcr.name}</div>

              {/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
              <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' />{' '}
                Kategori
              </div>
              <div className='col-span-2'>
                {formatTitleCase(projectFlock.category)}
              </div>
            </div>
          </div>
        </div>
      )}
      {/* <Card
        title='Informasi Flock'
        className={{
          wrapper: 'w-full bg-white mb-3',
        }}
      >
        <Table<ProjectFlock>
          emptyContent={
            <div className='w-full p-5 text-center'>
              <span className='text-lg opacity-50'>
                Pilih project flock terlebih dahulu...
              </span>
            </div>
          }
          data={projectFlock ? [projectFlock] : []}
          columns={[
            {
              header: 'ID',
              accessorKey: 'id',
            },
            {
              header: 'Area',
              accessorKey: 'area.name',
            },
            {
              header: 'Lokasi',
              accessorKey: 'location.name',
            },
            {
              header: 'Nama Flock',
              accessorKey: 'flock_name',
            },
            {
              header: 'Kategori',
              accessorKey: 'category',
            },
            {
              header: 'Status',
              accessorKey: 'status',
              cell: (props) => {
                return props.row.original.approval?.step_name ? (
                  <PillBadge
                    color={(() => {
                      switch (
                        props.row.original.approval?.step_name.toUpperCase()
                      ) {
                        case 'AKTIF':
                          return 'red';
                        case 'PENGAJUAN':
                          return 'green';
                        default:
                          return 'gray';
                      }
                    })()}
                    content={props.row.original.approval?.step_name
                      .toLowerCase()
                      .replace(/_/g, ' ')
                      .replace(/\b\w/g, (char) => char.toUpperCase())}
                  />
                ) : (
                  '-'
                );
              },
            },
            {
              header: 'FCR Layer',
              accessorKey: 'fcr.name',
            },
          ]}
          page={undefined}
          className={{
            containerClassName: cn({
              'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
            }),
            tableWrapperClassName: 'overflow-x-auto min-h-full!',
            tableClassName: 'font-inter w-full table-auto min-h-full!',
            headerRowClassName: 'border-b border-b-gray-200',
            headerColumnClassName:
              'px-6 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-6 py-3 last:flex last:flex-row last:justify-end',
            paginationClassName: 'hidden',
          }}
        />
      </Card> */}
      {/* Card Kandangs */}
      <div className='border-t-1 border-gray-300'>
        <div className='p-4 flex flex-col gap-4'>
          <h2 className='text-2xl font-semibold'>Daftar Kandang</h2>
          {isResponseSuccess(listProjectFlock) ? (
            <>
              {/* 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'}
                  />{' '}
                  Disetujui (
                  {isResponseSuccess(listProjectFlockKandang) &&
                    listProjectFlockKandang.data.filter(
                      (k) => k.approval?.step_number == 1
                    ).length}
                  )
                </Badge>
                <div className='divider divider-horizontal p-0 m-0'></div>
                <Badge
                  variant='soft'
                  color={'neutral'}
                  className={{
                    badge: 'rounded-lg px-2',
                  }}
                >
                  <Icon
                    icon='mdi:circle'
                    width={12}
                    height={12}
                    color={'neutral'}
                  />{' '}
                  Pengajuan (
                  {isResponseSuccess(listProjectFlockKandang) &&
                    listProjectFlockKandang.data.filter(
                      (k) => k.approval?.step_number == 2
                    ).length}
                  )
                </Badge>
                <div className='divider divider-horizontal p-0 m-0'></div>
                <Badge
                  color='error'
                  variant='soft'
                  className={{ badge: 'rounded-lg px-2' }}
                >
                  <Icon
                    icon={`mdi:circle`}
                    width={12}
                    height={12}
                    color='error'
                  />
                  Belum Chickin (
                  {isResponseSuccess(listProjectFlockKandang) &&
                    listProjectFlockKandang.data.filter(
                      (k) => k.approval == null
                    ).length}
                  )
                </Badge>
              </div>
              {/* Card Kandang */}
              <Card
                variant='bordered'
                className={{
                  wrapper: 'w-full',
                  body: 'p-3',
                }}
              >
                <div className='flex flex-col gap-6'>
                  {isResponseSuccess(listProjectFlockKandang) &&
                    listProjectFlockKandang.data.map((kandang) => (
                      <div
                        key={kandang.id}
                        className='flex flex-row justify-between items-center'
                      >
                        <div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
                          <Badge
                            variant='soft'
                            color={
                              kandang.approval
                                ? kandang.approval.step_number == 1
                                  ? 'success'
                                  : 'neutral'
                                : 'error'
                            }
                            className={{
                              badge: 'rounded-lg px-2',
                            }}
                          >
                            <Icon
                              icon='mdi:circle'
                              width={12}
                              height={12}
                              color={
                                kandang.approval
                                  ? kandang.approval.step_number == 1
                                    ? 'success'
                                    : 'neutral'
                                  : 'gray'
                              }
                            />
                          </Badge>
                          <span className='font-semibold'>
                            {kandang.kandang.name}
                          </span>
                        </div>
                        <RequirePermission permissions='lti.production.chickins.create'>
                          <Button
                            variant='outline'
                            className='py-1 text-sm'
                            onClick={() => {
                              handleChickinClick(kandang);
                            }}
                            disabled={projectFlock?.approval?.step_number === 1}
                          >
                            Chick In{' '}
                            <Icon
                              icon='mdi:arrow-top-right-thin'
                              width={11}
                              height={11}
                            />
                          </Button>
                        </RequirePermission>
                      </div>
                    ))}
                </div>
              </Card>
            </>
          ) : (
            <div className='w-full p-5 text-center'>
              <span className='text-lg opacity-50'>
                Pilih project flock terlebih dahulu...
              </span>
            </div>
          )}
        </div>
      </div>
      {/* <Card
        title='Daftar Kandang'
        className={{
          wrapper: 'w-full bg-white',
        }}
      >
        <Table<ProjectFlockKandang>
          emptyContent={
            <div className='w-full p-5 text-center'>
              <span className='text-lg opacity-50'>
                Pilih project flock terlebih dahulu...
              </span>
            </div>
          }
          data={
            projectFlock && isResponseSuccess(listProjectFlockKandang)
              ? listProjectFlockKandang.data
              : []
          }
          columns={[
            {
              header: '#',
              cell: (props) =>
                tableFilterState.pageSize * (tableFilterState.page - 1) +
                props.row.index +
                1,
            },
            {
              accessorFn: (row) => row?.project_flock?.area?.name,
              header: 'Area',
            },
            {
              accessorFn: (row) => row?.project_flock?.location?.name,
              header: 'Lokasi',
            },
            {
              accessorKey: 'kandang.name',
              header: 'Kandang',
            },
            {
              accessorKey: 'kandang.capacity',
              header: 'Kapasitas',
            },
            {
              accessorFn: () => projectFlock?.period,
              header: 'Periode',
            },
            {
              accessorKey: 'approval.step_name',
              header: 'Status',
              cell: (props) => {
                return props.row.original.approval?.step_name ? (
                  <PillBadge
                    color={(() => {
                      switch (
                        props.row.original.approval?.step_name.toUpperCase()
                      ) {
                        case 'DISETUJUI':
                          return 'green';
                        case 'PENGAJUAN':
                          return 'yellow';
                        default:
                          return 'gray';
                      }
                    })()}
                    content={props.row.original.approval?.step_name
                      .toLowerCase()
                      .replace(/_/g, ' ')
                      .replace(/\b\w/g, (char) => char.toUpperCase())}
                  />
                ) : projectFlock?.approval?.step_number === 1 ? (
                  <PillBadge color='red' content={'Tidak Dapat Chick In'} />
                ) : (
                  <PillBadge color='gray' content={'Belum Chick In'} />
                );
              },
            },
            {
              header: 'Aksi',
              cell: (props) => {
                return (
                  <>
                    <Button
                      color='success'
                      variant='outline'
                      onClick={() => {
                        handleChickinClick(props.row.original);
                      }}
                      className='p-1'
                      disabled={projectFlock?.approval?.step_number === 1}
                    >
                      <Icon
                        icon='mdi:home-import-outline'
                        width={18}
                        height={18}
                      />
                      Chickin
                    </Button>
                  </>
                );
              },
            },
          ]}
          page={undefined}
          className={{
            containerClassName: cn({
              'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
            }),
            tableWrapperClassName: 'overflow-x-auto min-h-full!',
            tableClassName: 'font-inter w-full table-auto min-h-full!',
            headerRowClassName: 'border-b border-b-gray-200',
            headerColumnClassName:
              'px-6 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-6 py-3 last:flex last:flex-row last:justify-end',
            paginationClassName: 'hidden',
          }}
        />
      </Card> */}
    </>
  );
};

export default ProjectFlockChickinDetail;