import { Button, Card, Col, DatePicker, Form, Input, Modal, Row, Select, Table, TableProps, Tag } from 'antd';
import { ColumnProps } from 'antd/es/table';
import { ProdlogService } from 'libs/shared-services/production/src/lib/prod-log.service';
import React, { useEffect, useRef, useState } from 'react';
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { OperationTypeEnum } from 'libs/shared-models/common-models/src/lib/enum/operation-type.enum';
import { JobReportingInfoReq } from '@gtpl/shared-models/production-management';
import moment from 'moment';
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { ProductionInventoryService } from '@gtpl/shared-services/production';

const { Option } = Select;
const { Item: FormItem } = Form;

export const NonSoakingReportingInfo = () => {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const service = new ProductionInventoryService();
  const prodlogservice = new ProdlogService();
  const [data, setData] = useState<{ product: string; [key: string]: any }[]>([]);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [lotINo, setLotINo] = useState('lotNumber');
  const [form] = Form.useForm();
  const [selectedRange, setSelectedRange] = useState('days');
  const [lotNumbers, setLotNumbers] = useState<any[]>([]);
  const [products, setProducts] = useState<string[]>([]);
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const initialDateRange = [moment().subtract(7, 'days'), moment()];

  useEffect(() => {
    getInfo();
    fetchLotNumbers();
    fetchProducts();
  }, []);

  const fetchLotNumbers = async () => {
    try {
      const res = await prodlogservice.getLotNumberDetails();
      if (res.status) {
        setLotNumbers(res.data);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    } catch (err) {
      AlertMessages.getErrorMessage(err.message);
    }
  };

  const fetchProducts = async () => {
    try {
      const req = new JobReportingInfoReq();
      const res = await service.getNonSoakedProductsdata(req);
      if (res.status) {
        const typedData = res.data as { product: string; [key: string]: any }[];
        const uniqueProducts = [...new Set(typedData.map(item => item.product))].filter(Boolean);
        setProducts(uniqueProducts);
      }
    } catch (err) {
      console.error('Error fetching products:', err);
    }
  };

  const getInfo = (values: any = {}) => {
    const req = new JobReportingInfoReq();
    if (form.getFieldValue('lotNumber') != undefined) {
      req.lotNumber = form.getFieldValue('lotNumber');
    }
    if (form.getFieldValue('operation') != undefined) {
      req.operation = form.getFieldValue('operation');
    }
    if (form.getFieldValue('product') != undefined) {
      req.product = form.getFieldValue('product');
    }
    if (form.getFieldValue('status') != undefined) {
      req.status = form.getFieldValue('status');
    }
    if (form.getFieldValue('dateRange') != undefined) {
      req.fromDate = form.getFieldValue('dateRange')[0].format('YYYY-MM-DD');
      req.toDate = form.getFieldValue('dateRange')[1].format('YYYY-MM-DD');
    }
    
    service.getNonSoakedProductsdata(req).then((res) => {
      if (res.status) {
        setData(res.data as { product: string; [key: string]: any }[]);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setData([]);
      }
    })
    .catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setData([]);
    });
  };

  const goToLotDetailView = (lotNumber: string) => {
    setLotINo(lotNumber);
    console.log("lotNo", lotNumber);
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onReset = () => {
    form.resetFields();
    setPage(1); 
    getInfo({
      dateRange: initialDateRange
    });
  };

  const onFinish = (values: any) => {
    setPage(1);
    getInfo(values);
  };

  const { RangePicker, MonthPicker } = DatePicker;

  // const handleDateRangeChange = (value) => {
  //   setSelectedRange(value);
  //   form.resetFields(['dateRange']);
  // };

  const renderDatePicker = () => {
    if (selectedRange === 'days') {
      return <RangePicker />;
    } else if (selectedRange === 'months') {
      return <RangePicker picker="month" />;
    } else if (selectedRange === 'years') {
      return <RangePicker picker="year" />;
    }
  };

  const getColumnSearchProps = (dataIndex: string) => ({
    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 onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <SearchOutlined type="search" 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()); }
    },
    render: text =>
      text ? (
        searchedColumn === dataIndex ? (
          <Highlighter
            highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
            searchWords={[searchText]}
            autoEscape
            textToHighlight={text.toString()}
          />
        ) : text
      )
        : null
  });

  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };

  const columns: ColumnProps<any>[] = [
    {
      title: 'S No',
      key: 'sNo',
      responsive: ['sm'],
      render: (text, object, index) => ((page - 1) * pageSize) + index + 1, 
    },
    {
      title: 'Product',
      dataIndex: 'product',
      sorter: (a, b) => a.product?.localeCompare(b.product),
      ...getColumnSearchProps('product'),
      render: (value, record) => (record.product ? record.product : "-"),
    },
    {
      title: 'Lot Number',
      dataIndex: 'lotCode',
      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('lotCode'),
       sorter: (a, b) => a.lotCode?.localeCompare(b.lotCode),
      render: (value, record) => (record.lotCode ? record.lotCode : "-"),
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
      sorter: (a, b) => a.operation?.localeCompare(b.operation),
      render: (value, record) => (record.operation ? record.operation : "-"),
    },
    {
      title: 'Grade',
      dataIndex: 'grade',
      render: (text, record) => record.grade ? record.grade : '-',
    },
    {
      title: 'Count',
      dataIndex: 'COUNT',
      render: (text, record) => record.COUNT ? record.COUNT : '-'
    },
    {
      title: 'From Product',
      dataIndex: 'fromProduct',
      sorter: (a, b) => a.fromProduct?.localeCompare(b.fromProduct),
      render: (text, record) => record.fromProduct ? record.fromProduct : '-'
    },
  ];


  const handleTableChange = (pagination: any) => {
    setPage(pagination.current);
    setPageSize(pagination.pageSize);
  };

  return (
    <Card
      title={<span style={{ color: "white" }}>Non soaking Reporting</span>}
      style={{ textAlign: "center" }}
      headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
    >
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Row gutter={24}>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 4 }}>
            <FormItem name='lotNumber' label='Lot Number'>
              <Select placeholder='Select Job Number' allowClear showSearch optionFilterProp='children'>
                {lotNumbers.map((lot) => (
                  <Option key={lot.lot_number} value={lot.lot_number}>
                    {lot.lot_number}
                  </Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <FormItem name='operation' label='Operation'>
              <Select placeholder='Select operation' allowClear>
                {Object.values(OperationTypeEnum).map((operation) => (
                  <Option key={operation} value={operation}>
                    {operation}
                  </Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <FormItem name='product' label='Product'>
              <Select placeholder='Select product' allowClear showSearch optionFilterProp='children'>
                {products.map((product) => (
                  <Option key={product} value={product}>
                    {product}
                  </Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <FormItem name='dateRange' label='Date Range'>
            {renderDatePicker()}
            </FormItem>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item label="Status" name="status">
              <Select placeholder="Select Status" allowClear>
                <Option value={PassOrFail.PASS}>PASS</Option>
                <Option value={PassOrFail.FAIL}>FAIL</Option>
              </Select>
            </Form.Item>
          </Col> */}
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 3 }} style={{ marginTop:'29px' }}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 1 }} style={{ marginTop:'29px' }}>
            <Form.Item>
              <Button type="primary" htmlType="reset" onClick={onReset}>
                Reset
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      
      <Table
        className="custom-table-wrapper"
        columns={columns}
        dataSource={data}
        size="small"
        onRow={(record) => ({
          style: {
            backgroundColor: record.result === "FAIL" ? "rgba(255, 0, 0, 0.2)" : "transparent",
          },
        })}
        pagination={{
          current: page,
          pageSize: pageSize,
          total: data.length, 
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
          
        }}
        onChange={handleTableChange}
      />
      
    </Card>
  );
};

export default NonSoakingReportingInfo;