import type { SignalPerformancePoint } from "@/types/insight";

type Props = {
    points: SignalPerformancePoint[];
};

const WIDTH = 720;
const HEIGHT = 220;
const PAD_X = 14;
const PAD_Y = 18;

export default function SignalPerformanceChart({ points }: Props) {
    if (points.length < 2) {
        return (
            <div className="flex h-40 items-center justify-center rounded-lg border border-border bg-background/40 text-xs text-muted-foreground">
                Belum cukup settled signals untuk membentuk equity curve.
            </div>
        );
    }

    return (
        <div className="space-y-3">
            <PerformanceLine
                title="Cumulative R"
                points={points}
                value={(point) => point.cumulative_r}
                suffix="R"
            />
            <PerformanceLine
                title="Drawdown"
                points={points}
                value={(point) => point.drawdown_r}
                suffix="R"
            />
        </div>
    );
}

type LineProps = {
    title: string;
    points: SignalPerformancePoint[];
    value: (point: SignalPerformancePoint) => number;
    suffix: string;
};

function PerformanceLine({ title, points, value, suffix }: LineProps) {
    const values = points.map(value);
    const min = Math.min(0, ...values);
    const max = Math.max(0, ...values);
    const range = Math.max(max - min, 1);
    const x = (index: number) =>
        PAD_X + (index / (points.length - 1)) * (WIDTH - PAD_X * 2);
    const y = (current: number) =>
        PAD_Y + ((max - current) / range) * (HEIGHT - PAD_Y * 2);
    const line = points
        .map((point, index) => `${x(index)},${y(value(point))}`)
        .join(" ");
    const zeroY = y(0);
    const lastValue = value(points[points.length - 1]);

    return (
        <div className="rounded-lg border border-border bg-background/40 p-3">
            <div className="mb-2 flex items-center justify-between gap-3">
                <div>
                    <div className="text-[10px] font-semibold uppercase tracking-[.14em] text-muted-foreground">
                        {title}
                    </div>
                    <div className="mt-1 text-sm font-bold">
                        {lastValue >= 0 ? "+" : ""}
                        {lastValue.toFixed(2)}
                        {suffix}
                    </div>
                </div>
                <div className="text-right text-[10px] text-muted-foreground">
                    {points.length} settled signals
                </div>
            </div>
            <div className="overflow-hidden rounded-md">
                <svg
                    viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
                    className="h-44 w-full"
                    role="img"
                    aria-label={`${title} performance chart`}
                >
                    <line
                        x1={PAD_X}
                        x2={WIDTH - PAD_X}
                        y1={zeroY}
                        y2={zeroY}
                        className="stroke-border"
                        strokeWidth="1"
                        strokeDasharray="4 4"
                    />
                    <polyline
                        points={line}
                        fill="none"
                        className="stroke-foreground"
                        strokeWidth="2.5"
                        strokeLinejoin="round"
                        strokeLinecap="round"
                    />
                    <circle
                        cx={x(points.length - 1)}
                        cy={y(lastValue)}
                        r="4"
                        className="fill-foreground"
                    />
                </svg>
            </div>
        </div>
    );
}