'use client';

import React, { useMemo } from 'react';
import { Icon } from '@iconify/react';
import { ColumnDef } from '@tanstack/react-table';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import { useUiStore } from '@/stores/ui/ui.store';
import {
  UniformityDetailItem,
  UniformityInfoUmum,
} from '@/types/api/production/uniformity';
import Table from '@/components/Table';
import StatusBadge from '@/components/helper/StatusBadge';
import {
  getWeightStatusText,
  getWeightStatusBadgeColor,
} from '@/components/pages/production/uniformity/uniformity-utils';
import { BodyWeightData } from '@/types/api/production/uniformity';

interface UniformityDetailsPreviewProps {
  info_umum: UniformityInfoUmum;
  uniformity_details?: UniformityDetailItem[];
  uniformityId: number;
}

const UniformityDetailsPreview = ({
  info_umum,
  uniformity_details,
}: UniformityDetailsPreviewProps) => {
  const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);

  const handleClose = () => {
    setExpandedDrawerOpen(false);
  };

  const tableData = useMemo(() => {
    if (!uniformity_details) return [];

    return uniformity_details.map(
      (detail: UniformityDetailItem, index: number) => ({
        id: `body-weight-${index + 1}`,
        number: index + 1,
        weight: detail.weight,
        status: detail.range.toLowerCase() as 'ideal' | 'outside',
      })
    );
  }, [uniformity_details]);

  const columnsUniformity: ColumnDef<BodyWeightData>[] = useMemo(
    () => [
      {
        accessorKey: 'number',
        header: 'Number',
        cell: (props) => props.row.original.number,
      },
      {
        accessorKey: 'weight',
        header: 'Weight (g)',
        cell: (props) => <span>{props.row.original.weight}</span>,
      },
      {
        accessorKey: 'status',
        header: 'Status',
        cell: (props) => {
          const status = props.row.original.status;
          return status ? (
            <StatusBadge
              color={getWeightStatusBadgeColor(status)}
              text={getWeightStatusText(status)}
            />
          ) : (
            <StatusBadge color='info' text='Unknown' />
          );
        },
      },
    ],
    []
  );

  return (
    <section className='w-full h-full bg-white border-l border-gray-200'>
      {/* Header */}
      <DrawerHeader
        leftIcon=''
        subtitle={info_umum?.file_name ?? 'Uniformity Details'}
        subtitleClassName='text-sm font-medium text-base-content/50 line-clamp-1'
        showDivider={false}
      >
        <button
          className='p-0 text-error hover:bg-transparent hover:text-error/50 cursor-pointer'
          onClick={handleClose}
        >
          <Icon icon='mdi:close' width={24} height={24} />
        </button>
      </DrawerHeader>

      {/* Form Section */}
      <section className='w-full p-4'>
        {info_umum ? (
          <div className='flex flex-col gap-3'>
            {/* Body Weight Details */}
            {uniformity_details && uniformity_details.length > 0 ? (
              <div className=''>
                <Table<BodyWeightData>
                  data={tableData}
                  columns={columnsUniformity}
                  pageSize={15}
                  className={{ containerClassName: 'mb-5' }}
                />
              </div>
            ) : (
              <div className='flex flex-col items-center justify-center py-10 text-gray-400'>
                <Icon
                  icon='mdi:file-document-outline'
                  width={64}
                  height={64}
                  className='mb-4'
                />
                <p className='text-lg'>No data available</p>
                <p className='text-sm'>Body weight details not found</p>
              </div>
            )}
          </div>
        ) : (
          <div className='flex flex-col items-center justify-center py-10 text-gray-400'>
            <Icon
              icon='mdi:file-document-outline'
              width={64}
              height={64}
              className='mb-4'
            />
            <p className='text-lg'>No data available</p>
            <p className='text-sm'>Uniformity details not found</p>
          </div>
        )}
      </section>
    </section>
  );
};

export default UniformityDetailsPreview;
