import React from "react";
import { Dayjs } from "dayjs";
import "./timemarker.css";

export interface TimeMarkerProps {
    start: Dayjs;
    end: Dayjs;

    startColor?: string;
    endColor?: string;

    width?: number | string;

    /** Se dispara al confirmar long press */
    onLongPress?: () => void;

    /** Duración del long press en ms (default: 500) */
    longPressDelay?: number;
}

export default function TimeMarker({
    start,
    end,
    startColor = "#3B82F6",
    endColor = "#EF4444",
    width = "100%",
    onLongPress,
    longPressDelay = 1000,
}: TimeMarkerProps): React.ReactElement {
    const sameDay = start.isSame(end, "day");

    const startText = start.format("DD MMM YYYY · HH:mm");
    const endText = sameDay ? end.format("HH:mm") : end.format("DD MMM YYYY · HH:mm");

    const timerRef = React.useRef<number | null>(null);
    const [pressed, setPressed] = React.useState(false);

    const startPress = () => {
        if (!onLongPress) return;

        setPressed(true);

        timerRef.current = window.setTimeout(() => {
            setPressed(false);
            onLongPress();
        }, longPressDelay);
    };

    const endPress = () => {
        setPressed(false);

        if (timerRef.current) {
            clearTimeout(timerRef.current);
            timerRef.current = null;
        }
    };

    return (
        <div
            className="time-marker-container"
            style={{
                width: typeof width === "number" ? `${width}px` : width,
                transform: pressed ? "scale(0.97)" : "scale(1)",
                boxShadow: pressed ? "0 8px 20px rgba(0,0,0,0.12)" : undefined,
                transition: "transform 120ms ease, box-shadow 120ms ease",
                cursor: onLongPress ? "pointer" : "default",
                userSelect: "none",
            }}
            /* Touch */
            onTouchStart={startPress}
            onTouchEnd={endPress}
            onTouchMove={endPress}
            onTouchCancel={endPress}
            /* Mouse */
            onMouseDown={startPress}
            onMouseUp={endPress}
            onMouseLeave={endPress}
        >
            {/* START */}
            <div className="time-marker left">
                <div className="marker-badge" style={{ "--badge-color": startColor } as React.CSSProperties}>
                    <span className="marker-icon">▶</span>
                    <span className="marker-label">START</span>
                </div>
                <div className="marker-datetime">{startText}</div>
            </div>

            {/* END */}
            <div className="time-marker right">
                <div className="marker-badge" style={{ "--badge-color": endColor } as React.CSSProperties}>
                    <span className="marker-icon">■</span>
                    <span className="marker-label">END</span>
                </div>
                <div className="marker-datetime">{endText}</div>
            </div>
        </div>
    );
}
