import { Card, Col, DatePicker, Form, Row, Select, Tooltip } from "antd";
import React, { useEffect, useState } from "react";
import PaybleAndDueComponent from "./paybale-and-due-dasboard-compnet";
import PackingPayablesDashboard from "../packing-payables-dashboard";
import RMInvoiceAmountVendorsGraph from "./rm-inv-amount-vendors-graph";
import RMInvoiceOverdueAmountVendorsGraph from "./rm-inv-overdue-amount-graph";
import PackingVendorPay from "../packing-vendor-pay";
import GeneralVendorPay from "../general-vendor-pay";
import moment, { Moment } from "moment";
import { CalendarOutlined } from "@ant-design/icons";
import RMPayblesDashboard from "../rm-paybles-dashboard";
import PackingPaidDashboard from "../packing-paid-dashboard";
import { CollectionsService, PurchasesProductService } from "@gtpl/shared-services/finance";
import { SuppliersService, UnitcodeService, VendorsService } from "@gtpl/shared-services/masters";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { GrnService } from "@gtpl/shared-services/procurement";
import Title from "antd/lib/typography/Title";
import { useForm } from "antd/lib/form/Form";


export default function RmCeoDashboard() {
    const { RangePicker } = DatePicker;
    const [unitCodes,setUnitCodes]=useState([])
    const grnService = new GrnService()
    const {Option}=Select;
    const [unit,setUnit]=useState<any>();
    const [supplier,setSupplier]=useState<any>();
    const [vendor,setVendor]=useState<any>();
    const [companyData,setCompanyData]=useState<any>()
    const collectionService=new CollectionsService()
    const [company,setCompany]=useState<any>()
    const [companyName,setCompanyName]=useState<any>()
    const [supplierSelection,setSupplierSelection] = useState<boolean>(false)
    const [year,setYear]=useState<any>()
    const [month,setMonth]=useState<any>()
         const [form]=useForm()

     const initialRange: [Moment, Moment] = [
    moment().subtract(1, "days"),
    moment()
  ];

    const [dateRange, setDateRange] = useState<[Moment, Moment] | null>(initialRange);
    const colors = {
        primary: '#2D3A4B',
        secondary: '#4A90E2',
        accent: '#FF6B6B',
        background: '#F8F9FA',
        textSecondary: '#6C757D',
        success: '#28A745',
        warning: '#FFC107',
        headerBg: 'powderblue',
        headerText: '#FFFFFF',
        cardHover: '#F8F9FA'
    };

    const handleDateChange = (dates: [Moment, Moment], dateStrings: [string, string]) => {
        setDateRange(dates);
        setYear(null);   // reset year/month if user picks custom range
  setMonth(null);
   form.setFieldsValue({
    year: null,
    month: null,
  });
    };

    const handleUnitChange = (value: any) => {
        setUnit(value);
    }

    const handleCompanyChange = (value: any,option:any) => {
        setCompany(value);
        setCompanyName(option?.props?.['data-company']);
    }

    const handleSupplierChange = (value: any) => {
        setSupplier(value);
        if(value > 0){
            setSupplierSelection(true)
        }else{
            setSupplierSelection(false)
        }
    }

    
    const handleVendorChange = (value: any) => {
        setVendor(value);
    }
const handleYearChange = (value: number | null) => {
    setYear(value);
  setMonth(null); // reset month on year change
  const start = moment(`${value}-01-01`);
    const end = moment(`${value}-12-31`);
  setDateRange([start, end]); 
  if (!value) {
    setDateRange(initialRange);
  }
//     setYear(value);

//     if (value) {
//       // If year selected → clear date range & enable month
//       fromDate = moment(`${year}-01-01`).format("YYYY-MM-DD");
//   toDate = moment(`${year}-12-31`).format("YYYY-MM-DD");
//     } else {
//       // If year cleared → reset date range & disable month
//       setDateRange(initialRange);
//       setMonth(null);
//     }
  };

            const handleMonthChange = (value: any) => {
        setMonth(value);
         if (year && value) {
    const start = moment(`${year}-${value}`, "YYYY-MM").startOf("month");
    const end = moment(`${year}-${value}`, "YYYY-MM").endOf("month");
    setDateRange([start, end]);   // update dateRange too
  }
    }

    // Extract formatted fromDate and toDate
    // const fromDate = dateRange ? dateRange[0].format('YYYY-MM-DD') : null;
    // const toDate = dateRange ? dateRange[1].format('YYYY-MM-DD') : null;
    let fromDate: string | null = null;
let toDate: string | null = null;

if (year && month) {
  // Year + Month selected
  const startOfMonth = moment(`${year}-${month}`, "YYYY-MM").startOf("month");
  const endOfMonth = moment(`${year}-${month}`, "YYYY-MM").endOf("month");
  fromDate = startOfMonth.format("YYYY-MM-DD");
  toDate = endOfMonth.format("YYYY-MM-DD");
} else if (year) {
  // Only Year selected
  fromDate = moment(`${year}-01-01`).format("YYYY-MM-DD");
  toDate = moment(`${year}-12-31`).format("YYYY-MM-DD");
} else if (dateRange) {
  // No year → fall back to custom range
  fromDate = dateRange[0].format("YYYY-MM-DD");
  toDate = dateRange[1].format("YYYY-MM-DD");
}
    const vendorsService=new VendorsService();
    const [vendorsData, setVendorsData] = useState<any>([]);

    console.log("dateRange", dateRange);

    useEffect(() => {
        getAllUnits()
        getAllSuppliers();
        getAllVendors();
        getCompanysForCeoDashboard()

    },[])

      const getAllVendors= () => {
        vendorsService.getAllActiveVendors().then(res => {
          if (res.status) {
            const activeVendors = res.data.filter(vendor => vendor.isActive !== false);
            setVendorsData(activeVendors);          } else {
            if (res.intlCode) {
                setVendorsData([]);
                AlertMessages.getErrorMessage(res.internalMessage);
            } else {
             AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        }).catch(err => {
          setVendorsData([]);
          AlertMessages.getErrorMessage(err.message);
        })
      }

      const getCompanysForCeoDashboard = () => {
        collectionService.getCompanysForCeoDashboard().then((res) => {
            if (res.status) {
                setCompanyData(res.data)
            }
        })
    }

    const getAllUnits = () => {
        grnService.getUnitsForCeoDashboard().then((res) => {
            if (res.status) {
                setUnitCodes(res.data)
            }
        })
    }

    const suppliersService=new SuppliersService();
    const [suppliersData, setSuppliersData] = useState<any[]>([]);
     const currentYear = new Date().getFullYear();
  const years = Array.from({ length: 20 }, (_, i) => currentYear - i);
  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

    const getAllSuppliers= () => {
      suppliersService.getAllSuppliers(null).then(res => {
        if (res.status) {
          setSuppliersData(res.data);
        } else {
          if (res.intlCode) {
            setSuppliersData([]);
              AlertMessages.getErrorMessage(res.internalMessage);
          } else {
           AlertMessages.getErrorMessage(res.internalMessage);
          }
        }
      }).catch(err => {
        setSuppliersData([]);
        AlertMessages.getErrorMessage(err.message);
      })
    }

    const onSupplierHover = (farmerId) => {
        setSupplier(farmerId)
        console.log(farmerId,'farmerid')
        // if(farmerId > 0){
        //     console.log(true,'==true')
        //     setSupplierHover(true)
        // }else{
        //     setSupplier(null)
        //     console.log(false,'==false')
        //     setSupplierHover(false)
        // }
    }

console.log(company,"companyyyyyyyyyyy")
    return (
        <>
             <Row gutter={24}>
              <Col>
                    <Title level={3} style={{ marginTop: 0, color: colors.primary }}>
                      Payables Dashboard
                    </Title>
                  </Col>
                  </Row>
                  <br/>
                  <Form form={form}>
        <Row gutter={24}>
            <Col>
                <Tooltip title="Date range applies only to Stock In & Out">
                    <RangePicker
                        onChange={handleDateChange}
                        style={{ width: '100%', maxWidth: 230 }}
                        allowClear={false}
                        value={dateRange}
                        suffixIcon={<CalendarOutlined style={{ color: colors.textSecondary }} />}
                    />
                </Tooltip>
            </Col>
              <Col>
        <Form.Item
          name="year"
          label="Year"
          // rules={[{ required: true, message: "Please select year" }]}
        >
          <Select placeholder="Select Year" style={{ width: 120 }} allowClear
            showSearch
            optionFilterProp="children" onChange={handleYearChange}>
            {years.map((year) => (
              <Option key={year} value={year}>
                {year}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Col>

      {/* Month Dropdown */}
      <Col>
        <Form.Item
          name="month"
          label="Month"
          // rules={[{ required: true, message: "Please select month" }]}
        >
          <Select placeholder="Select Month" style={{ width: 150 }} allowClear
            showSearch
            optionFilterProp="children" onChange={(value)=>handleMonthChange(value)} disabled={!year}>
            {months.map((month, idx) => (
              <Option key={idx} value={idx + 1}>
                {month}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4}} xl={{ span: 7 }}>
                        <Form.Item name="unitId" label="Unit">
                            <Select
                                placeholder="Select Unit"
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                allowClear
                                onChange={(val)=>handleUnitChange(val)}
                                dropdownMatchSelectWidth={false}
                            >
                               {unitCodes.map(dropData => {
                                    return <Option value={dropData.unitCodeId}>{dropData.plantCode}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                    </Row>
                    <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 9 }}>
                        <Form.Item name="companyId" label="Company">
                            <Select
                                placeholder="Select Company"
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                allowClear
                                onChange={(val,option)=>handleCompanyChange(val,option)}
                                dropdownMatchSelectWidth={false}
                                
                            >
                               {companyData?.map(dropData => {
                                    return <Option key={dropData.companyId} value={dropData.companyId} data-company={dropData.company}>{dropData.company}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }}>
                        <Form.Item name="supplierId" label="Supplier"
                         >
                            <Select
                                placeholder="Select Supplier"
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                allowClear
                                onChange={(val)=>handleSupplierChange(val)}
                                dropdownMatchSelectWidth={false}
                            >
                               {suppliersData.map(dropData => {
                                    return <Option value={dropData.supplierId}>{dropData.supplierName}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 7 }}>
                        <Form.Item name="vendorId" label="Vendor"
                         >
                            <Select
                                placeholder="Select Vendor"
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                allowClear
                                onChange={(val)=>handleVendorChange(val)}
                                dropdownMatchSelectWidth={false}

                            >
                               {vendorsData.map(dropData => {
                                    return <Option value={dropData.vendorId}>{dropData.vendorName}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                    </Row>
                    </Form>
            <br />
            <Row gutter={24}>
                <Col span={16}>
                    <Row gutter={[0, 24]}>
                        <Col span={24}>
                            <RMInvoiceAmountVendorsGraph fromDate={fromDate} toDate={toDate} unit={unit} farmerId={supplierSelection ? supplier : undefined} division={companyName} onSupplierHover={onSupplierHover} />
                        </Col>
                        <Col span={24}>
                            <RMInvoiceOverdueAmountVendorsGraph fromDate={fromDate} toDate={toDate} unit={unit} farmerId={supplierSelection ? supplier : undefined} division={companyName} onSupplierHover={onSupplierHover} />
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                    <Row gutter={[0, 24]}>
                        <Col span={24}>
                            <RMPayblesDashboard fromDate={fromDate} toDate={toDate} unit={unit} supplier={supplier} company={companyName}/>
                        </Col>
                        <Col span={24}>
                            <PaybleAndDueComponent fromDate={fromDate} toDate={toDate} unit={unit} supplier={supplier} company={companyName} />
                        </Col>
                        <Col span={24}>
                            <PackingPayablesDashboard fromDate={fromDate} toDate={toDate} unit={unit} vendor={vendor} company={company} />
                        </Col>
                        <Col span={24}>
                            <PackingPaidDashboard fromDate={fromDate} toDate={toDate} unit={unit} vendor={vendor} company={company} />
                        </Col>
                        <Col span={24}>
                            <PackingVendorPay fromDate={fromDate} toDate={toDate} unit={unit} vendor={vendor} company={company} />
                        </Col>
                        <Col span={24}>
                            <GeneralVendorPay fromDate={fromDate} toDate={toDate} unit={unit} vendor={vendor} company={company} />
                        </Col>
                    </Row>
                </Col>
            </Row>
        </>
    )
}