import { Button, Card, Col, Form, Input, Row, Select } from 'antd';
import Table, { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useRef, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { CommonResponse } from '@gtpl/shared-models/production-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { StockService } from '@gtpl/shared-services/procurement';
import { Excel } from 'antd-table-saveas-excel';
import { DateEnum, stockDropdownData } from '@gtpl/shared-models/common-models';
import { StockDto } from '@gtpl/shared-models/procurement-management';
import moment from 'moment';

const itemWiseDeadStockReport = () => {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const searchInput = useRef(null);
  const [page, setPage] = useState(1);
  const service = new StockService();

  const [dead, setDead] = useState([]);
  const [disable, setDisable] = useState<boolean>(false);

  const [form] = Form.useForm();
  const [itemSubDropDown, setItemSubDropDown] = useState<StockDto[]>([]);
  const [itemDropDown, setItemDropDown] = useState<StockDto[]>([]);
  const [itemCatDropDown, setItemCatDropDown] = useState<any[]>([]);
  const [pageSize, setPageSize] = useState(100);


  const { Option } = Select;

  useEffect(() => {
    getDeadStockSummary();
    getItemSubDropForStockReport();
    getItemDropForStockReport();
    getItemCatDropForStockReport();
  }, []);

  const getItemDropForStockReport = () => {
    service.getItemNames()
      .then((res) => {
        if (res.status) {
          setItemDropDown(res.data);
        } else {
          setItemDropDown([]);
        }
      }).catch(err => {
        AlertMessages.getErrorMessage(err.message);
        setItemDropDown([]);
      });
  }

  const getItemCatDropForStockReport = () => {
    service.getItemCategory()
      .then((res) => {
        if (res.status) {
          setItemCatDropDown(res.data);
        } else {
          setItemCatDropDown([]);
        }
      }).catch(err => {
        AlertMessages.getErrorMessage(err.message);
        setItemCatDropDown([]);
      });
  }

  const getItemSubDropForStockReport = () => {
    service.getItemSubCategory()
      .then((res) => {
        if (res.status) {
          setItemSubDropDown(res.data);
        } else {
          setItemSubDropDown([]);
        }
      }).catch(err => {
        AlertMessages.getErrorMessage(err.message);
        setItemSubDropDown([]);
      });
  }
  const onReset = () => {
    form.resetFields();
    getDeadStockSummary();
  };

  const getDeadStockSummary = () => {
    const req = new stockDropdownData();

    if (form.getFieldValue('categoryName') !== undefined) {
      setDisable(true);
      req.itemCategoryId = form.getFieldValue('categoryName');
    }
    if (form.getFieldValue('itemSubCategoryName') !== undefined) {
      req.itemSubCategoryId = form.getFieldValue('itemSubCategoryName');
    }
    if (form.getFieldValue('itemName') !== undefined) {
      req.itemId = form.getFieldValue('itemName');
    }

    if (form.getFieldValue('dateRange') !== undefined) {
      req.dateRange = form.getFieldValue('dateRange');
    }

    // req.fromDate = form.getFieldValue('fromDate') ? form.getFieldValue('fromDate').format('YYYY-MM-DD') : moment().subtract(90, 'days').format('YYYY-MM-DD');
    // req.toDate = form.getFieldValue('toDate') ? form.getFieldValue('toDate').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD');

    service.getAllDeadStockReport(req)
      .then((res) => {
        setDisable(false);
        if (res.status) {
          setDead(res.data);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
          setDead([]);
        }
      })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
        setDead([]);
        setDisable(false);
      });
  };

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  };

  const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button type="primary" onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : false,
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => searchInput.current.select(), 100);
      }
    },
    render: text =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text.toString()? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

  const excelcolumns = [
    {
      title: 'Item Category',
      dataIndex: 'itemCategory',
    },
    {
      title: 'Item SubCategory',
      dataIndex: 'itemSubCategoryName',
    },
    {
      title: 'Quantity',
      dataIndex: 'quantity',
    },
    {
      title: 'Item Name',
      dataIndex: 'itemName',
    },
    {
      title: 'Date',
      dataIndex: 'date',
      render: (text: any, record: any) => { return record.date ? record.date : '-' },
    },
   
  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('DeadStockReport')
      .addColumns(excelcolumns)
      .addDataSource(dead)
      .saveAs('DeadStockReport.xlsx');
  }

  const stockColumns1: ColumnProps<any>[] = [
    {
      title: 'S No',
      key: 'id',
      width: '70px',
      responsive: ['md'],
      align: 'left',
      render: (text, object, index) => (page - 1) * 10 + (index + 1),
    },
    {
      title: 'Item Category',
      key: 'itemCategory',
      dataIndex: 'itemCategory',
      width: 100,
      responsive: ['md'],
      align: 'left',
      ...getColumnSearchProps('itemCategory'),
      sorter: (a, b) => a.itemCategory?.localeCompare(b.itemCategory),
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Item SubCategory',
      key: 'itemSubCategoryName',
      dataIndex: 'itemSubCategoryName',
      width: 100,
      responsive: ['md'],
      align: 'left',
      ...getColumnSearchProps('itemSubCategoryName'),
      sorter: (a, b) => a.itemSubCategoryName?.localeCompare(b.itemSubCategoryName),
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Quantity',
      key: 'quantity',
      dataIndex: 'quantity',
      width: 100,
      responsive: ['md'],
      align: 'left',
      ...getColumnSearchProps('quantity'),
      sorter: (a, b) => a.quantity - b.quantity,
      sortDirections: ['descend', 'ascend'],
      render: (text, record) => {
        const qty = Number(record.quantity); // Convert to a number
        return !isNaN(qty) // Check if qty is a valid number
            ? qty % 1 === 0 // Check if qty is a whole number
                ? qty.toFixed(0) // No decimal places
                : qty.toFixed(1) // One decimal place
            : '-';
    }

    },
    {
      title: 'Item Name',
      key: 'itemName',
      dataIndex: 'itemName',
      width: 100,
      responsive: ['md'],
      align: 'left',
      ...getColumnSearchProps('itemName'),
      sorter: (a, b) => a.itemName?.localeCompare(b.itemName),
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Aging in Days',
      key: 'aging',
      dataIndex: 'aging',
      width: 100,
      responsive: ['md'],
      align: 'left',
      // Remove localeCompare and use direct numeric comparison for sorting
      sorter: (a, b) => a.aging - b.aging,
      sortDirections: ['descend', 'ascend'],
    },    
    {
      title: 'Date',
      key: 'date',
      dataIndex: 'date',
      width: 100,
      responsive: ['md'],
      align: 'left',
      ...getColumnSearchProps('date'),
      sorter: (a, b) => a.date?.localeCompare(b.date),
      sortDirections: ['descend', 'ascend'],
      render: (text: any, record: any) => { return record.date ? record.date : '-' },
    },
    
  ];

  return (
    <div className="stockContainer">
      <Card
              title={<span style={{ color: 'white' }}>Dead Stock Report</span>}
        extra={<Button onClick={() => { exportExcel(); }}>Get Excel</Button>}
        style={{ textAlign: 'center' }}
        headStyle={{ backgroundColor: '#69c0ff', border: 0 }} >

      <Form form={form} onFinish={getDeadStockSummary} layout="vertical">
          <Row gutter={24}>
            <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 5 }}
                lg={{ span: 4}}
                xl={{ span: 4 }}
              >
              <Form.Item
                name="categoryName"
                label="Item Category"
              >
                <Select
                allowClear
                  showSearch
                  placeholder="Select Item Category"
                  optionFilterProp="children"
                  // onChange={() => form.submit()}
                >
                  { itemCatDropDown.map(val=> {
                     return <Option key={val.itemCategoryId} value={val.itemCategoryId}>
                      {val.categoryName}
                    </Option>
})}
                </Select>
              </Form.Item>



            </Col>
            <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 5 }}
                lg={{ span: 5 }}
                xl={{ span: 5 }}
              >
              <Form.Item
                name="itemSubCategoryName"
                label="Item SubCategory"
              >
                <Select
                  showSearch
                  allowClear
                  placeholder="Select Item SubCategory"
                  optionFilterProp="children"
                  // onChange={() => form.submit()}
                >
                  {  itemSubDropDown === undefined ? '' : itemSubDropDown.map(val => {
                     return <Option key={val.itemSubCategoryId} value={val.itemSubCategoryId}>
                      {val.itemSubCategoryName}
                    </Option>
})}
                </Select>
              </Form.Item>
            </Col>
            <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 5 }}
                lg={{ span: 5 }}
                xl={{ span: 5 }}
              >
              <Form.Item
                name="itemName"
                label="Item Name"
              >
                <Select
              showSearch
              optionFilterProp="children"
              filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select Item Name"
                dropdownMatchSelectWidth={false}
                allowClear
              >
                  { itemSubDropDown === undefined ? '' : itemDropDown.map(val => {
                    return  <Option key={val.itemId} value={val.itemId}>
                      {val.itemName}
                    </Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            {/* <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 4 }}
                lg={{ span: 4 }}
                xl={{ span: 5 }}
              >
              <Form.Item
                name="itemName"
                label="Item Name"
              >
                <Select
                  showSearch
                  allowClear
                  placeholder="Select a Item Name"
                  optionFilterProp="children"
                  // onChange={() => form.submit()}
                >
                  { itemSubDropDown === undefined ? '' : itemDropDown.map(val => {
                    return  <Option key={val.itemId} value={val.itemId}>
                      {val.itemName}
                    </Option>
                  })}
                </Select>
              </Form.Item>
            </Col> */}
            <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 4 }}
                lg={{ span: 4 }}
                xl={{ span: 4 }}
              >
              <Form.Item
                name="dateRange"
                label="Date Range"
              >
                <Select
                  showSearch
                  allowClear
                  placeholder="Select Date Range"
                  optionFilterProp="children"
                  
                >
                   {Object.keys(DateEnum).map((inc: any) => {
                        const daterange = DateEnum[inc]; // Get the actual value from the enum
                        return (
                        <Option key={daterange} value={daterange}>
                            {daterange}
                        </Option>
                        );
                    })}
                </Select>
              </Form.Item>
            </Col>
            <Col
                xs={{ span: 24 }}
                sm={{ span: 24 }}
                md={{ span: 4 }}
                lg={{ span: 4 }}
                xl={{ span: 5 }}
                style={{marginTop:30}}
              >
              <Button
                type="primary"
                htmlType="submit"
                disabled={disable}
              >
                Get Report
              </Button>


              <Button
                type="primary"
                // icon={<UndoOutlined />}
                onClick={onReset}
                style={{marginLeft:20}}
              >
                Reset
              </Button>
              {/* <Button
                type="primary"
                onClick={exportExcel}
                style={{ marginLeft: 8 }}
              >
                Export to Excel
              </Button> */}
            </Col>
          </Row>
   
      </Form>
      <br></br>
     
        <Table
          className="stockTable"
          size="small"
          rowKey="id"
          bordered
          dataSource={dead}
          columns={stockColumns1}
          pagination={{
            pageSize: 100,
            onChange(current, pageSize) {
              setPage(current);
              setPageSize(pageSize);
            },
          }}
        />
      </Card>
    </div>
  );
};

export default itemWiseDeadStockReport;