import React, { useState, useEffect, useRef } from 'react';
import './DateRangePicker.scss';
import DownArrow from "../../SVG/DownArrow";
import dayjs, { Dayjs } from "dayjs";
import CustomDatePicker from "../Forms/CustomDateTimePicker/CustomDatePicker";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import FormButtonSubmit from "../Forms/FormButton/FormButtonSubmit";

export interface DateRangePickerProps {
    placeholder?: string;
    disabled?: boolean;
    onFromChange?: (from: Dayjs | null) => void;
    onToChange?: (to: Dayjs | null) => void;
    value?: [Dayjs | null, Dayjs | null]; // from, to
    isLoading?: boolean;
    theme?: 'default' | 'service-header' | 'search-listbox' | 'search-listbox-blue' | 'form-options' | 'mass-exodus';
    hasError?: string;
    clearable?: boolean;
}

export default function DateRangePicker({
                                            placeholder = "Εύρος Ημερομηνιών",
                                            value,
                                            disabled = false,
                                            onFromChange,
                                            onToChange,
                                            isLoading = false,
                                            theme = 'default',
                                            hasError = '',
                                            clearable = false,
                                        }: DateRangePickerProps) {
    const [isOpen, setIsOpen] = useState(false);
    const [fromDate, setFromDate] = useState<Dayjs | null>(value?.[0] ? dayjs(value[0]) : dayjs());
    const [toDate, setToDate] = useState<Dayjs | null>(value?.[1] ? dayjs(value[1]) : dayjs());

    const pickerRef = useRef<HTMLDivElement>(null);

    // Sync internal state when parent changes `value`
    useEffect(() => {
        if (value) {
            setFromDate(value[0] ? dayjs(value[0]) : null);
            setToDate(value[1] ? dayjs(value[1]) : null);
        }
    }, [value]);

    // Close when clicking outside
    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (pickerRef.current?.contains(target)) return;
            if (target.closest('.MuiPickersPopper-root')) return;
            if (isOpen) setIsOpen(false);
        };
        window.addEventListener("mousedown", handleClickOutside);
        return () => window.removeEventListener("mousedown", handleClickOutside);
    }, [isOpen]);

    const arrowColor = theme === 'search-listbox-blue' ? 'white' : '#707070';

    const applyHandler = () => {
        onFromChange?.(fromDate);
        onToChange?.(toDate);
        setIsOpen(false);
    };

    const clearHandler = (e: React.MouseEvent) => {
        e.stopPropagation();
        setFromDate(null);
        setToDate(null);
        onFromChange?.(null);
        onToChange?.(null);
    };

    const displayText =
        fromDate?.isValid() && toDate?.isValid()
            ? `${fromDate.format("DD/MM/YYYY")} - ${toDate.format("DD/MM/YYYY")}`
            : placeholder;

    return (
        <div
            ref={pickerRef}
            className={`date-range-picker ${theme} ${hasError ? 'hasError' : ''}`}
        >
            <div
                className={`date-range-picker__head ${disabled ? 'disabled' : ''} ${isLoading ? 'loading' : ''} ${fromDate && toDate ? 'hasSelected' : ''}`}
                onClick={() => !disabled && !isLoading && setIsOpen(!isOpen)}
            >
                <span>{displayText}</span>
                <div className="buttons">
                    {clearable && (fromDate || toDate) && (
                        <span className="clear-btn" onClick={clearHandler}>×</span>
                    )}
                    <span className={"down-arrow"}>
                        <DownArrow color={arrowColor} />
                    </span>
                </div>
            </div>

            {isOpen && !disabled && (
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <div className="date-range-picker__content">
                        <label>Από:</label>
                        <CustomDatePicker
                            value={fromDate}
                            onChange={(newVal: React.SetStateAction<dayjs.Dayjs | null>) => setFromDate(newVal)}
                            minDate={dayjs().subtract(10, "year")}
                            maxDate={dayjs().add(10, "year")}
                            hasError={hasError}
                            readOnly={disabled}
                        />

                        <label>Έως:</label>
                        <CustomDatePicker
                            value={toDate}
                            onChange={(newVal: React.SetStateAction<dayjs.Dayjs | null>) => setToDate(newVal)}
                            minDate={fromDate || dayjs().subtract(10, "year")}
                            maxDate={dayjs().add(10, "year")}
                            hasError={hasError}
                            readOnly={disabled}
                        />
                        <FormButtonSubmit disabled={!fromDate && !toDate} onClick={applyHandler}>  ΕΦΑΡΜΟΓΗ</FormButtonSubmit>
                    </div>
                </LocalizationProvider>
            )}

            {hasError && <p className="error-message">{hasError}</p>}
        </div>
    );
}