import { useEffect, useState, useMemo } from 'react';
import { Space, Spin, Table, message, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { AppContainer } from '../../../components/AppContainer';
import jwtAxios from '../../../api/axiosInstance';
import { ENDPOINTS } from '../../../api/endpoints';

const ENTITY_LABEL = 'Lotwise Stock Report';
const ENTITY_ENDPOINT = ENDPOINTS.STOCK_FINAL_REPORT; // Reusing final stock report endpoint

const LotwiseStockReport = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  const fetchData = async () => {
    setLoading(true);
    try {
      let url = `${ENTITY_ENDPOINT}?page=1&limit=10000`; // Fetch all for frontend grouping
      const res = await jwtAxios.get(url);
      const records = res.data?.result?.data || [];
      setData(records);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch lotwise stock report');
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleExport = async () => {
    try {
      // const params = new URLSearchParams();
      // Assuming new endpoint is added in ENDPOINTS
      const url = `${ENDPOINTS.STOCK_FINAL_REPORT}/lot-wise/export`;

      const response = await jwtAxios.get(url, { responseType: 'blob' });
      const blob = new Blob([response.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.setAttribute('download', `lotwise_stock_report_${dayjs().format('YYYY-MM-DD')}.xlsx`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(downloadUrl);
    } catch (err) {
      message.error('Failed to export Excel report');
    }
  };

  const groupedData = useMemo(() => {
    const groups: Record<string, any[]> = {};
    data.forEach(item => {
      // --- Old code ---
      // const vegName = item.vegetable?.name || item.vegetableName || '-';
      // if (!groups[vegName]) groups[vegName] = [];
      // groups[vegName].push(item);
      // ----------------

      // --- New code ---
      const isBagOnly = item.unit !== 'KG' && Number(item.quantity || 0) === 0;
      const bUnits = Number(item.remainingBags || 0);
      const bWgts = isBagOnly ? 0 : Number(item.remainingQuantity || 0);
      
      if (bUnits === 0 && bWgts === 0) return;

      const vegName = item.vegetable?.name || item.vegetableName || '-';
      if (!groups[vegName]) groups[vegName] = [];
      groups[vegName].push(item);
    });

    const formatted: any[] = [];
    Object.keys(groups).sort().forEach(vegName => {
      // Header row
      formatted.push({
        key: `header_${vegName}`,
        isHeader: true,
        ItemName: vegName,
      });

      let tAUnits = 0, tSUnits = 0, tBUnits = 0;
      let tAWgts = 0, tSWgts = 0, tBWgts = 0;

      groups[vegName].forEach((item, idx) => {
        const isBagOnly = item.unit !== 'KG' && Number(item.quantity || 0) === 0;

        const aUnits = Number(item.bags || 0);
        const bUnits = Number(item.remainingBags || 0);
        const sUnits = aUnits - bUnits;

        const aWgts = isBagOnly ? 0 : Number(item.quantity || 0);
        const bWgts = isBagOnly ? 0 : Number(item.remainingQuantity || 0);
        const sWgts = isBagOnly ? 0 : (aWgts - bWgts);

        tAUnits += aUnits; tSUnits += sUnits; tBUnits += bUnits;
        tAWgts += aWgts; tSWgts += sWgts; tBWgts += bWgts;

        formatted.push({
          key: `item_${item.id}_${idx}`,
          isHeader: false,
          ItemName: vegName,
          LotNo: item.lotNo || '-',
          ArrDate: item.purchaseDate ? dayjs(item.purchaseDate).format('DD/MM/YYYY') : '-',
          AUnits: aUnits,
          SUnits: sUnits,
          BUnits: bUnits,
          AWgts: aWgts,
          SWgts: sWgts,
          BWgts: bWgts,
          Rate: Number(item.costPerUnit || 0),
          SValue: 0,
          SupName: item.supplier?.name || item.cashSupplierName || '-',
          Loc: item.supplier?.district?.name || 'TRICHY', // Fallback
        });
      });

      // Total row
      formatted.push({
        key: `total_${vegName}`,
        isTotal: true,
        ItemName: vegName,
        AUnits: tAUnits,
        SUnits: tSUnits,
        BUnits: tBUnits,
        AWgts: tAWgts,
        SWgts: tSWgts,
        BWgts: tBWgts,
      });
    });

    return formatted;
  }, [data]);

  const columns = [
    {
      title: 'ItemName',
      dataIndex: 'ItemName',
      render: (text: string, record: any) => {
        if (record.isHeader) return <strong className="text-gray-800 text-base">{text}</strong>;
        if (record.isTotal) return <span className="text-purple-600 font-bold ml-10">Total :</span>;
        return null;
      },
      width: 150,
    },
    {
      title: 'Lot No',
      dataIndex: 'LotNo',
      render: (text: string, record: any) => record.isHeader || record.isTotal ? null : text,
    },
    {
      title: 'Arr.Date',
      dataIndex: 'ArrDate',
      render: (text: string, record: any) => record.isHeader || record.isTotal ? null : text,
    },
    {
      title: 'AUnits',
      dataIndex: 'AUnits',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-blue-600 font-bold' : ''}>{val}</span>,
    },
    {
      title: 'SUnits',
      dataIndex: 'SUnits',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-blue-600 font-bold' : ''}>{val}</span>,
    },
    {
      title: 'BUnits',
      dataIndex: 'BUnits',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-red-500 font-bold' : 'text-red-500'}>{val}</span>,
    },
    {
      title: 'AWgts',
      dataIndex: 'AWgts',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-blue-600 font-bold' : ''}>{val}</span>,
    },
    {
      title: 'SWgts',
      dataIndex: 'SWgts',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-blue-600 font-bold' : ''}>{val}</span>,
    },
    {
      title: 'BWgts',
      dataIndex: 'BWgts',
      render: (val: number, record: any) => record.isHeader ? null : <span className={record.isTotal ? 'text-orange-500 font-bold' : 'text-orange-500'}>{val}</span>,
    },
    {
      title: 'Rate',
      dataIndex: 'Rate',
      render: (val: number, record: any) => record.isHeader || record.isTotal ? null : val,
    },
    {
      title: 'Sup Name',
      dataIndex: 'SupName',
      render: (text: string, record: any) => record.isHeader || record.isTotal ? null : <div className="max-w-[150px] whitespace-pre-wrap">{text}</div>,
    },
    {
      title: 'LOC',
      dataIndex: 'Loc',
      render: (text: string, record: any) => record.isHeader || record.isTotal ? null : text,
    },
  ];

  return (
    <div>
      <Spin spinning={loading}>
        <AppContainer title={ENTITY_LABEL}>
          <div className="flex flex-wrap justify-between items-center gap-3 mb-4 pb-4 border-b border-gray-200">
            <Space wrap>
            </Space>
            <Space>
              <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>
                Export Excel
              </Button>
            </Space>
          </div>
          <Table
            rowKey="key"
            columns={columns}
            dataSource={groupedData}
            pagination={false}
            scroll={{ x: 'max-content', y: 600 }}
            size="small"
            rowClassName={(record) => {
              if (record.isHeader) return 'bg-gray-100';
              if (record.isTotal) return 'bg-gray-50';
              return '';
            }}
          />
        </AppContainer>
      </Spin>
    </div>
  );
};

export default LotwiseStockReport;