import { useEffect, useRef } from "react";
import {
    createSeriesMarkers,
    LineStyle,
    type IPriceLine,
    type ISeriesApi,
    type ISeriesMarkersPluginApi,
    type SeriesMarker,
    type Time,
} from "lightweight-charts";

export type SignalAlertEvent =
    | "detected"
    | "entry_reached"
    | "target_hit"
    | "invalidated"
    | "entry_warning";

interface SignalEventMarkerOverlayProps {
    series: ISeriesApi<"Candlestick"> | null;
    event: SignalAlertEvent | null;
    time: number | null;
    price?: number | null;
}

const EVENT_META: Record<
    SignalAlertEvent,
    {
        label: string;
        color: string;
        position: "aboveBar" | "belowBar";
        shape: "arrowUp" | "arrowDown" | "circle" | "square";
    }
> = {
    detected: {
        label: "SIGNAL",
        color: "#38bdf8",
        position: "belowBar",
        shape: "circle",
    },
    entry_reached: {
        label: "ENTRY",
        color: "#f59e0b",
        position: "belowBar",
        shape: "arrowUp",
    },
    target_hit: {
        label: "TP",
        color: "#22c55e",
        position: "aboveBar",
        shape: "square",
    },
    invalidated: {
        label: "INVALIDATED",
        color: "#ef4444",
        position: "aboveBar",
        shape: "arrowDown",
    },
    entry_warning: {
        label: "ENTRY WARNING",
        color: "#f59e0b",
        position: "belowBar",
        shape: "circle",
    },
};

export default function SignalEventMarkerOverlay({
    series,
    event,
    time,
    price,
}: SignalEventMarkerOverlayProps) {
    const markersRef = useRef<ISeriesMarkersPluginApi<Time> | null>(null);
    const priceLineRef = useRef<IPriceLine | null>(null);

    useEffect(() => {
        if (!series) return;

        markersRef.current?.detach();
        markersRef.current = null;
        if (priceLineRef.current) {
            series.removePriceLine(priceLineRef.current);
            priceLineRef.current = null;
        }

        if (!event || time == null || !Number.isFinite(time)) return;

        const meta = EVENT_META[event];
        const marker: SeriesMarker<Time> = {
            id: `signal-event-${event}-${time}`,
            time: Math.floor(time) as Time,
            position: meta.position,
            shape: meta.shape,
            color: meta.color,
            text: meta.label,
            size: 2,
        };

        markersRef.current = createSeriesMarkers<Time>(series, [marker], {
            autoScale: false,
            zOrder: "top",
        });

        if (price != null && Number.isFinite(price) && price > 0) {
            priceLineRef.current = series.createPriceLine({
                price,
                color: meta.color,
                lineWidth: 1,
                lineStyle: LineStyle.Dotted,
                axisLabelVisible: true,
                title: meta.label,
            });
        }

        return () => {
            markersRef.current?.detach();
            markersRef.current = null;
            if (priceLineRef.current) {
                series.removePriceLine(priceLineRef.current);
                priceLineRef.current = null;
            }
        };
    }, [series, event, time, price]);

    return null;
}