import { Button, Card, Col, DatePicker, Form, Input, Row } from "antd";
import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import * as XLSX from "xlsx";
import Papa from "papaparse";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { FileExcelFilled } from "@ant-design/icons";
import { Excel } from "antd-table-saveas-excel";
import { RmCountPriceListDto, RmCountPriceListRequestDto, RmRatesInfoReq } from "@gtpl/shared-models/raw-material-procurement";
import { RmCountPriceListService } from "@gtpl/shared-services/raw-material-procurement";
import moment, { Moment } from "moment";

export interface RmCountPriceListFormProps {
  reasonsData: RmCountPriceListDto;
  updateReasons: (reasons: RmCountPriceListDto) => void;
  isUpdate: boolean;
  closeForm: () => void;
}

export function RmCountPriceListForm(props: RmCountPriceListFormProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [form] = Form.useForm();
  const [data, setData] = useState<any[]>([]);
  const [maxEffectiveDate, setMaxEffectiveDate] = useState<Moment | null>(null);
  const [columns, setColumns] = useState<string[]>([]);
  const [values, setValues] = useState<any[]>([]);
  const service = new RmCountPriceListService();
  const [loading, setLoading] = useState(false);
  const history = useHistory();

  const importExcel = (file: any) => {
    const data = new Uint8Array(file);
    const wb = XLSX.read(data, { type: "array", cellDates: true });
    let sheet: any[] = [];
    for (const Sheet in wb.Sheets) {
      if (wb.Sheets.hasOwnProperty(Sheet)) {
        sheet.push(XLSX.utils.sheet_to_json(wb.Sheets[Sheet], { raw: true, header: 1 }));
      }
    }
    return sheet;
  };

  const exceldata = [
    {
      title: "SNo",
      dataIndex: "sNo",
      render: (text: any, object: any, index: number) => index + 1,
      width: 60,
    },
    {
      title: "Count",
      dataIndex: "count",
      width: 500,
      render: (text: any, record: any) => (record.count ? record.count : "-"),
    },
    {
      title: "Price",
      dataIndex: "price",
      width: 100,
      render: (text: any, record: any) => (record.price ? record.price : "-"),
    },
    {
      title: "Company",
      dataIndex: "company",
      width: 100,
      render: (text: any, record: any) => (record.company ? record.company : "-"),
    },
    {
      title: "Type",
      dataIndex: "type",
      width: 100,
      render: (text: any, record: any) => (record.type ? record.type : "-"),
    },
  ];

  let createdUser = props.isUpdate ? localStorage.getItem("createdUser") || "" : "";

  const exportExcel = () => {
    const excel = new Excel();
    excel.addSheet("Rm Count Price List Excel").addColumns(exceldata).saveAs("Rm Count List format.xlsx");
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file && file.type === "text/csv") {
      setSelectedFile(file);
      Papa.parse(file, {
        header: true,
        complete: function (result) {
          const columnArray: string[][] = [];
          const valueArray: any[] = [];
          const parsedData = result.data.map((d: any) => {
            const normalizedData: any = {};
            for (const key in d) {
              const normalizedKey = key.replace(/\s/g, "").replace(/[\(\)\.]/g, "").replace(/-/g, "").toLowerCase();
              normalizedData[normalizedKey] = d[key];
            }
            columnArray.push(Object.keys(normalizedData));
            valueArray.push(Object.values(normalizedData));
            return {
              sNo: normalizedData.sno ? parseInt(normalizedData.sno, 10) : null,
              count: normalizedData.count ? normalizedData.count : null,
              price: normalizedData.price ? parseFloat(normalizedData.price) : null,
              company: normalizedData.company || null,
              type: normalizedData.type || null,
            };
          });
          setData(parsedData);
          setColumns(columnArray[0] ? columnArray[0].filter((key): key is string => typeof key === "string") : []);
          setValues(valueArray);
        },
        skipEmptyLines: true,
      });
    } else if (file && file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
      setSelectedFile(file);
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = async () => {
        const csvData: any = reader.result;
        const sheetData = importExcel(csvData);
        const filteredNestedData = sheetData.filter((innerData: any[]) =>
          innerData.some((row: any) => row.length > 0)
        );
  
        const output = filteredNestedData.map((innerData: any[]) => {
          const header = innerData[0].map((key: string) =>
            key.replace(/\s/g, "").replace(/[\(\)\.]/g, "").replace(/-/g, "").toLowerCase()
          );
          const dataRows = innerData.slice(1).map((row: any[]) => {
            if (row.every((value: any) => value === "")) return null;
            const obj: any = {};
            header.forEach((key: string, index: number) => {
              obj[key] = row[index];
            });
            return obj;
          }).filter((row: any) => row !== null);
  
          return dataRows.map((row: any) => ({
            sNo: row.sno ? parseInt(row.sno, 10) : null,
            count: row.count ? row.count : null,
            price: row.price ? row.price : null,
            company: row.company || null,
            type: row.type || null,
          }));
        });
  
        const parsedData = output.reduce((acc, val) => acc.concat(val), []);
        setData(parsedData);
      };
    } else {
      AlertMessages.getErrorMessage("Please select a valid .csv or .xlsx file.");
      setSelectedFile(null);
      setData([]);
    }
  };

  // const handleUpload = async () => {
  //   try {
  //     await form.validateFields();
  //     const effectiveFromDate = form.getFieldValue("effectiveFromDate")?.toDate();
  //     const effectiveToDate = form.getFieldValue("effectiveToDate")?.toDate();
  
  //     if (!selectedFile || data.length === 0) {
  //       AlertMessages.getErrorMessage("Please upload a valid file first.");
  //       return;
  //     }
  
  //     const invalidRows = data.filter((item) => !item.count || !item.type);
  //     if (invalidRows.length > 0) {
  //       AlertMessages.getErrorMessage(
  //         `Invalid data in rows: ${invalidRows.map((row) => `SNo: ${row.sNo || "Unknown"}`).join(", ")}. Please ensure count and type are provided.`
  //       );
  //       return;
  //     }
  
  //     const rmCountPriceListData = data.map((item: any) => {
  //       return new RmCountPriceListDto(
  //         0,
  //         item.count || 0,
  //         item.price || 0,
  //         true,
  //         createdUser,
  //         new Date(),
  //         createdUser,
  //         1,
  //         new Date(),
  //         item.company || "",
  //         item.type || "",
  //         null,
  //         effectiveFromDate,
  //         effectiveToDate
  //       );
  //     });
  
  //     const req = new RmCountPriceListRequestDto(rmCountPriceListData, createdUser);
  //     setLoading(true);
  //     const res = await service.saveRmCountPricelistInfo(req);
  //     if (res.status) {
  //       AlertMessages.getSuccessMessage(res.internalMessage);
  //       history.push("/rm-count-pricelist-grid");
  //     } else {
  //       // Handle specific error for invalid effective dates
  //       // if (res.code === 1111 && "invalidRecords" in res.data) {
  //       //   AlertMessages.getErrorMessage(res.internalMessage);
  //       // }
  //         {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   } catch (error) {
  //     AlertMessages.getErrorMessage(error.message);
  //   } finally {
  //     setLoading(false);
  //   }
  // };

  // const handleFileChange = (event) => {
  //   const file = event.target.files[0];
  //   if (file && file.type === 'text/csv') {
  //     setSelectedFile(event.target.files[0]);
  //     Papa.parse(event.target.files[0], {
  //       header: true,
  //       complete: function (result) {
  //         {
  //           const columnArray = [];
  //           const valueArray = [];
            
  //           result.data.map((d) => {
  //                               columnArray.push(Object.keys(d))
  //               valueArray.push(Object.values(d))
  //                         });
  //                       setData(result.data)
  //           setColumns(columnArray[0])
  //           setValues(valueArray)
  //         }
  //       },
  //       skipEmptyLines: true,
  //     });
  //   } else if(file && file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
  //     setSelectedFile(event.target.files[0]);
  //     let csvData
  //     var reader = new FileReader()
  //     reader.readAsArrayBuffer(file)
  //     reader.onload = async data => {
  //       let csvData1: any = reader.result;
  //       csvData = importExcel(csvData1);
  //       // let headersRow = getHeaderArray(csvData[0][3]);
  //       // csvData[0].shift()
  //       // csvData[0].shift()
  //       // csvData[0].shift()
  //       // console.log(csvData[0],'????????')
  //       const filteredNestedData = csvData.filter(innerData => innerData.some(row => row.length > 0));
  
  //       const output = filteredNestedData.map(innerData => {
  //         const header = innerData[0];
  //         return innerData.slice(1).map(row => {
  //           if (row.every(value => value === '')) {
  //             return null; // Skip rows with all empty values
  //           }
  //           return row.reduce((acc, value, index) => {
  //             acc[header[index]] = value;
  //             return acc;
  //           }, {});
  //         }).filter(row => row !== null); // Remove rows with all empty values
  //       });  
  //          setData(output[0])   
  //     }
  //   }else {
  //     alert('Please select a valid .csv file.');
  //     setSelectedFile(null);
  //   }
  // };
  
  const handleUpload = async () => {
    try {
      await form.validateFields();
      const effectiveFromDate = form.getFieldValue("effectiveFromDate")?.toDate();
      const effectiveToDate = form.getFieldValue("effectiveToDate")?.toDate();
  
      if (!selectedFile || data.length === 0) {
        AlertMessages.getErrorMessage("Please upload a valid file first.");
        return;
      }

      if (effectiveToDate && moment(effectiveToDate).isBefore(moment(effectiveFromDate), 'day')) {
        AlertMessages.getErrorMessage("Effective To Date must be after Effective From Date.");
        return;
      }

      const invalidRows = data.filter((item) => !item.count || !item.type);
      if (invalidRows.length > 0) {
        AlertMessages.getErrorMessage(
          `Invalid data in rows: ${invalidRows.map((row) => `SNo: ${row.sNo || "Unknown"}`).join(", ")}. Please ensure count and type are provided.`
        );
        return;
      }
  
     
      const rmCountPriceListData = data.map((item: any) => ({
        count: item.count || 0,
        price: item.price || 0,
        company: item.company || "",
        type: item.type || "",
        effectiveFromDate: effectiveFromDate,
        effectiveToDate: effectiveToDate,
      }));
  
   
      const req = new RmCountPriceListRequestDto(rmCountPriceListData as any, createdUser);
      console.log('Payload size:', new TextEncoder().encode(JSON.stringify(req)).length / 1024, 'KB'); 
      setLoading(true);
      const res = await service.saveRmCountPricelistInfo(req);
      if (res.status) {
        AlertMessages.getSuccessMessage(res.internalMessage);
        history.push("/rm-count-pricelist-grid");
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    } catch (error) {
      AlertMessages.getErrorMessage(error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card
      title="RM Count PriceList"
      extra={
        <Link to="/rm-count-pricelist-grid">
          <Button type="primary">View</Button>
        </Link>
      }
    >
      <Form form={form}>
        <Row gutter={24}>
        <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item
              name="effectiveFromDate"
              label="Effective From Date"
              rules={[{ required: true, message: "Please select effective date" }]}
            >
              <DatePicker
                style={{ width: "100%" }}
                format="YYYY-MM-DD"
              />
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item
              name="effectiveToDate"
              label="Effective To Date"
              rules={[{ required: false }]}
            >
              <DatePicker
                style={{ width: "100%" }}
                format="YYYY-MM-DD"
                disabledDate={(current) => {
                  const effectiveFromDate = form.getFieldValue("effectiveFromDate");
                  if (effectiveFromDate) {
                    return current && current < moment(effectiveFromDate).startOf("day");
                  }
                  return false;
                }}
              />
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item >
              <input
                type="file"
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                onChange={handleFileChange}
              />
              <label style={{ color: "blue", whiteSpace: "nowrap" }}>
                Only csv & excel files are allowed
              </label>
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Button
              type="primary"
              onClick={handleUpload}
              loading={loading}
              disabled={!form.getFieldValue('effectiveDate') && !selectedFile || data.length === 0}
            >
              Upload
            </Button>
          </Col>
          <Col>
            <Button
              type="default"
              style={{ color: "green" }}
              onClick={exportExcel}
              icon={<FileExcelFilled />}
            >
              Sample Format for Excel Upload
            </Button>
          </Col>
        </Row>
        <Form.Item style={{ display: "none" }} name="createdUser" initialValue={createdUser}>
          <Input hidden />
        </Form.Item>
      </Form>
    </Card>
  );
}

export default RmCountPriceListForm;