import React, { useCallback, useEffect, useState } from 'react';
import './CustomerPurchaseConfirm.scss';
import axios from 'axios';
import {
  ArrowRightOutlined,
  DeleteFilled,
  CheckCircleOutlined,
} from '@ant-design/icons';
import { Table } from 'antd';

const url_string = window.location.href;
const url = new URL(url_string);
const codesParam = url.searchParams.get('code');

import { getSession, sessionStore } from '../../../Services/Others';
import Loader from '../../../Components/Loader/Loader';
import { useDispatch } from 'react-redux';
import {
  CustomerPurchase,
  getPurchaseLowStock,
} from '../../../Features/ConfigMasterPage/ConfigMasterPage';
import { Messages } from '../../../Components/Notifications/Messages';
import PurchasePDFPrint from './PurchasePDFPrint';
import { Buttons } from '../../../../ownLib/my-ui-lib';
import PozoLoader1 from '../../../Components/PozoAppLoader/PozoLoader1';
import PozoLoader2 from '../../../Components/PozoAppLoader/PozoLoader2';

function CustomerPurchaseConfirm() {
  const apiUrlToken = import.meta.env.ENV_API_URL_TOKEN;
  const dispatch = useDispatch();

  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [products, setProducts] = useState([]);
  const [message, setMessage] = useState({ type: null, data: null });
  const [orderSuccess, setOrderSuccess] = useState(false);
  const [details, setDetails] = useState({
    AppId: '',
    CompId: '',
    BranchId: '',
  });

  const handleOrderSuccess = () => {
    setOrderSuccess(true);
  };

  console.log(products, 'hsbdjhsdjvbsdj');
  useEffect(() => {
    if (!codesParam) {
      setLoading(true);
      return;
    }
    initializeSession();
    getPurchaseData();
  }, []);

  const getPurchaseData = async () => {
    try {
      const response = await dispatch(getPurchaseLowStock(codesParam)).unwrap();
      const list = response?.data?.data;
      setDetails({
        AppId: list?.[0]?.AppId,
        CompId: list?.[0]?.CompId,
        BranchId: list?.[0]?.BranchId,
      });
      setProducts(list);
      setLoading(false);
      if (list?.[0]?.LinkStatus === 'N') {
        setOrderSuccess(true);
      }
    } catch (error) {
      setLoading(false);
      console.error('❌ Error getting purchase data:', error);
    }
  };

  const initializeSession = async () => {
    try {
      await addSession();
      setLoading(false);
    } catch (error) {
      console.error('❌ Error initializing session:', error);
      setLoading(false);
    }
  };

  const addSession = async () => {
    if (!getSession('auth')) {
      try {
        const data = { username: '1000000001', password: '1234' };
        const response = await axios.post(
          `${apiUrlToken}/jwtTokenGenerator`,
          data,
          {
            headers: {
              'Content-Type': 'application/json',
              Accept: 'application/json',
            },
          }
        );

        const { token } = response?.data;

        if (token) {
          sessionStore('auth', token);
          sessionStore('LoginType', 'Kiosk');
        }
      } catch (error) {
        console.error('❌ Error adding session:', error);
      }
    }
  };

  const handleRequiredQtyChange = (ProdId, value) => {
    // allow only digits
    if (!/^\d*$/.test(value)) return;

    setProducts((prev) =>
      prev.map((p) => (p.ProdId === ProdId ? { ...p, OrderQty: value } : p))
    );
  };

  const handleDeleteProduct = (record) => {
    setProducts((prev) => prev?.filter((p) => p.ProdId !== record.ProdId));
  };

  const filteredProducts = products?.filter((p) =>
    p.ProdName?.toLowerCase()?.includes(searchTerm?.toLowerCase())
  );

  // const purchasePost = async () => {
  //     if (!products || products.length === 0) return;

  //     const groupedBySupplier = products.reduce((acc, p) => {
  //         const suppId = p.SupplierDetails?.[0]?.SuppId;
  //         if (!acc[suppId]) acc[suppId] = [];
  //         acc[suppId].push(p);
  //         return acc;
  //     }, {});

  //     const payloadArray = Object.values(groupedBySupplier).map(group => {
  //         const firstProduct = group[0];
  //         return {
  //             CompId: firstProduct.CompId,
  //             BranchId: firstProduct.BranchId,
  //             AppId: firstProduct.AppId,
  //             SuppId: firstProduct.SupplierDetails?.[0]?.SuppId,
  //             Remarks: "",
  //             LocationType: firstProduct.SupplierDetails?.[0]?.Type,
  //             CreatedBy: '',
  //             OrderDetails: group.map(p => ({
  //                 ProdId: p.ProdId,
  //                 OrderQty: Number(p.OrderQty || 0),
  //                 ProdVariantName: p.ProdVariantName || ""
  //             }))
  //         };
  //     });

  //     try {
  //         const response = await dispatch(CustomerPurchase(payloadArray)).unwrap();
  //         if (response?.status === 200) {
  //             setOrderId(response?.data?.[0]?.OrderId);
  //             setMessage({ type: 'success', data: "Purchase Order Added Successfully" });
  //             setOrderSuccess(true);
  //         } else {
  //             setMessage({ type: 'error', data: "Error submitting order" });
  //         }
  //     } catch (error) {
  //         setMessage({ type: 'error', data: error });
  //     }
  // };

  const onComplete = useCallback(() => {
    setMessage({ type: null, data: null });
  }, []);

  const ProductdataColumns = [
    {
      title: 'SI NO',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      render: (_, __, index) => index + 1,
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
    },
    {
      title: 'Current Qty',
      dataIndex: 'BalanceQty',
      key: 'BalanceQty',
      align: 'center',
    },
    {
      title: 'Required Qty',
      dataIndex: 'OrderQty',
      key: 'OrderQty',
      align: 'center',
      render: (_, record) => (
        <input
          type="text"
          value={record.OrderQty || ''}
          onChange={(e) =>
            handleRequiredQtyChange(record.ProdId, e.target.value)
          }
          className="CustomerPurchaseConfirm-requiredInput"
        />
      ),
    },
    {
      title: 'Action',
      key: 'Action',
      width: '80px',
      align: 'center',
      render: (_, record) => (
        <DeleteFilled
          style={{ color: '#FF4D4F', cursor: 'pointer' }}
          onClick={() => handleDeleteProduct(record)}
        />
      ),
    },
  ];

  if (loading) {
    // return  <PozoLoader1/>;
    return <PozoLoader2 />;
  }

  return (
    <div className="CustomerPurchaseConfirm-container">
      <Messages
        messageType={message.type}
        messageData={message.data}
        onComplete={onComplete}
      />

      <div className="CustomerPurchaseConfirm-card">
        {orderSuccess ? (
          <div
            className="CustomerPurchaseConfirm-success"
            style={{ textAlign: 'center', marginTop: '50px' }}
          >
            <CheckCircleOutlined
              style={{ fontSize: '60px', color: 'green', marginBottom: '20px' }}
            />
            <h2>Order Placed Successfully!</h2>
            <p>Your purchase order has been submitted.</p>
          </div>
        ) : (
          <>
            {/* <h1 className="CustomerPurchaseConfirm-title">{products?.[0]?.CompName}</h1> */}
            <h1 className="CustomerPurchaseConfirm-title">
              Low Stock Products
            </h1>

            <div className="supplier-container">
              <p className="supplier-title">Supplier Details</p>

              {/* <div className="supplier-row">
                                <span className="supplier-label">Supplier ID</span>
                                <span className="supplier-value">{products?.[0]?.SupplierDetails?.[0]?.SuppId}</span>
                            </div> */}

              <div className="supplier-row">
                <span className="supplier-label">Supplier Name</span>
                <span className="supplier-value">
                  {products?.[0]?.SupplierDetails?.[0]?.SuppName}
                </span>
              </div>
              {products?.[0]?.SupplierDetails?.[0]?.SuppMobile && (
                <div className="supplier-row">
                  <span className="supplier-label">Supplier Mobile</span>
                  <span className="supplier-value">
                    {products?.[0]?.SupplierDetails?.[0]?.SuppMobile}
                  </span>
                </div>
              )}
              {products?.[0]?.SupplierDetails?.[0]?.SuppEmail && (
                <div className="supplier-row">
                  <span className="supplier-label">Email</span>
                  <span className="supplier-value">
                    {products?.[0]?.SupplierDetails?.[0]?.SuppEmail}
                  </span>
                </div>
              )}

              <div className="supplier-row">
                <span className="supplier-label">Address</span>
                <span className="supplier-value">
                  {products?.[0]?.SupplierDetails?.[0]?.Address1},
                  {products?.[0]?.SupplierDetails?.[0]?.Address2},
                  {products?.[0]?.SupplierDetails?.[0]?.City},
                  {products?.[0]?.SupplierDetails?.[0]?.Dist},
                  {products?.[0]?.SupplierDetails?.[0]?.State} -
                  {products?.[0]?.SupplierDetails?.[0]?.Zip}
                </span>
              </div>
            </div>

            <div className="CustomerPurchaseConfirm-filters">
              <input
                type="text"
                placeholder="Search Product..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="CustomerPurchaseConfirm-search"
              />
            </div>

            {/* TABLE */}
            <Table
              rowKey="UniqueId"
              dataSource={filteredProducts}
              columns={ProductdataColumns}
              pagination={{
                pageSize: 10,
                onChange: (page) => console.log('Page:', page),
              }}
            />

            {/* Submit */}
            <div className="CustomerPurchaseConfirm-button">
              <PurchasePDFPrint
                appId={details?.AppId}
                compId={details?.CompId}
                branchId={details?.BranchId}
                products={products}
                codesParam={codesParam}
                onOrderSuccess={handleOrderSuccess}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default CustomerPurchaseConfirm;