import { useEffect, useRef } from "react";
import { X, CheckCircle2 } from "lucide-react";

type TradingOnboardingProps = {
    open: boolean;
    onComplete: () => void;
};

const steps = [
    {
        title: "Choose a signal mode",
        description:
            "Strict, Balanced, and Flexible control how selectively the signal engine filters qualifying setups.",
    },
    {
        title: "Read the signal",
        description:
            "Start with direction, confidence, freshness, and the reasons shown by the signal engine.",
    },
    {
        title: "Review the analysis plan",
        description:
            "Use Entry, Invalidation, Target, Risk/Reward, and sizing context as a structured view of the market setup.",
    },
    {
        title: "Understand risk context",
        description:
            "Risk Budget, Position Size, Notional, and Margin describe different analytical views of exposure. They are not interchangeable.",
    },
];

export default function TradingOnboarding({
    open,
    onComplete,
}: TradingOnboardingProps) {
    const closeRef = useRef<HTMLButtonElement | null>(null);

    useEffect(() => {
        if (!open) return;
        closeRef.current?.focus();

        const onKeyDown = (event: KeyboardEvent) => {
            if (event.key === "Escape") onComplete();
        };
        window.addEventListener("keydown", onKeyDown);
        return () => window.removeEventListener("keydown", onKeyDown);
    }, [open, onComplete]);

    if (!open) return null;

    return (
        <div
            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
            role="presentation"
            onMouseDown={(event) => {
                if (event.target === event.currentTarget) onComplete();
            }}
        >
            <section
                role="dialog"
                aria-modal="true"
                aria-labelledby="trading-onboarding-title"
                className="w-full max-w-2xl overflow-hidden rounded-2xl border border-border bg-card shadow-2xl"
            >
                <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4 sm:px-6">
                    <div>
                        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
                            Quick tour
                        </p>
                        <h2
                            id="trading-onboarding-title"
                            className="mt-1 text-lg font-semibold text-foreground"
                        >
                            How the Analysis workspace works
                        </h2>
                        <p className="mt-1 text-sm text-muted-foreground">
                            A short guide to the information shown on this page.
                            It does not execute or recommend trades.
                        </p>
                    </div>
                    <button
                        ref={closeRef}
                        type="button"
                        onClick={onComplete}
                        aria-label="Close analysis guide"
                        className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </div>

                <div className="grid gap-3 p-5 sm:grid-cols-2 sm:p-6">
                    {steps.map((step, index) => (
                        <div
                            key={step.title}
                            className="rounded-xl border border-border bg-background/60 p-4"
                        >
                            <div className="flex items-start gap-3">
                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground">
                                    {index + 1}
                                </span>
                                <div>
                                    <h3 className="text-sm font-semibold text-foreground">
                                        {step.title}
                                    </h3>
                                    <p className="mt-1.5 text-xs leading-5 text-muted-foreground">
                                        {step.description}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                <div className="flex flex-col gap-3 border-t border-border bg-muted/10 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <CheckCircle2 className="h-4 w-4" />
                        You can reopen this guide with “How it works”.
                    </div>
                    <button
                        type="button"
                        onClick={onComplete}
                        className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-opacity hover:opacity-90"
                    >
                        Got it
                    </button>
                </div>
            </section>
        </div>
    );
}