import { type FC, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { DocumentDownload } from 'iconsax-react';
import Table from '@/components/Table';
import Filters from '@/components/Filters';
import Button from '@/components/Button';
import PageLoading from '@/components/PageLoading';
import { usePermissions } from '@/hooks/usePermissions';
import { PermissionEnum } from '@/pages/roles/enum/Enum';
import { useGetDailyOrderReport } from './hooks/useDailyOrderReportData';
import { useDailyOrderReportFilters } from './hooks/useDailyOrderReportFilters';
import { getDailyOrderReportTableColumns } from './components/DailyOrderReportTableColumns';
import { useDailyOrderReportFiltersFields } from './components/DailyOrderReportFiltersFields';
import { getDailyOrderReport } from './service/OrderService';
import { exportDailyOrderReportExcel } from './utils/exportDailyOrderReportExcel';
import type { DailyOrderReportItem } from './types/Types';
import type { RowDataType } from '@/components/types/TableTypes';

const DailyOrderReport: FC = () => {
  const { t } = useTranslation('global');
  const { checkPermission, isLoading: isPermissionsLoading } = usePermissions();
  const { filters, apiParams, handleFiltersChange } = useDailyOrderReportFilters();
  const { data: reportData, isLoading } = useGetDailyOrderReport(apiParams);
  const [isExporting, setIsExporting] = useState(false);

  const columns = getDailyOrderReportTableColumns();
  const filterFields = useDailyOrderReportFiltersFields();

  const reportItems = useMemo(() => {
    return (reportData?.data || []).map((item) => ({
      ...item,
      id: item.date,
    }));
  }, [reportData?.data]);

  const handleExportExcel = async () => {
    setIsExporting(true);
    try {
      const response = await getDailyOrderReport(apiParams);
      const items = (response?.data || []).map((item) => ({
        ...item,
        id: item.date,
      }));
      exportDailyOrderReportExcel(items);
    } finally {
      setIsExporting(false);
    }
  };

  if (isPermissionsLoading) {
    return <PageLoading />;
  }

  if (!checkPermission(PermissionEnum.VIEW_ORDER_REPORTS)) {
    return (
      <div className='mt-5 text-sm text-gray-500'>
        شما دسترسی مشاهده این گزارش را ندارید.
      </div>
    );
  }

  return (
    <div className='mt-5'>
      <div className='flex justify-between items-center'>
        <h1 className='text-lg font-light'>{t('submenu.orders_daily_report')}</h1>
        <Button
          className='w-fit px-4'
          isloading={isExporting}
          disabled={isLoading}
          onClick={handleExportExcel}
        >
          <div className='flex items-center gap-2'>
            <DocumentDownload size={18} color='#fff' />
            <span>خروجی Excel</span>
          </div>
        </Button>
      </div>

      <div className='mt-8'>
        <Filters
          fields={filterFields}
          onChange={handleFiltersChange}
          initialValues={filters}
          showClearButton
        />
      </div>

      <Table<DailyOrderReportItem & RowDataType>
        columns={columns}
        data={reportItems as (DailyOrderReportItem & RowDataType)[]}
        isloading={isLoading}
      />
    </div>
  );
};

export default DailyOrderReport;