import { Head } from "@inertiajs/react";
import { useEffect, useRef, useState } from "react";
import AppLayout from "@/layouts/app-layout";
import AnalysisPageHeader from "@/components/analysis-page-header";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { BarChart3, RefreshCw, TrendingDown, TrendingUp } from "lucide-react";

import { useI18n } from "@/lib/i18n";
import CustomerWorkspaceNav from "@/components/customer-workspace-nav";
type Row = {
    label: string;
    signals?: number;
    count?: number;
    win_rate?: number | null;
    average_r?: number | null;
};
type ProviderOption = { slug: string; name: string; markets?: string[] };
type Api = {
    providers?: ProviderOption[];
    meta?: { provider?: string };
    summary: {
        total: number;
        active: number;
        completed: number;
        wins: number;
        losses: number;
        win_rate: number | null;
        total_r: number | null;
        average_r: number | null;
    };
    timeframes: Row[];
    directions: Row[];
    markets: Row[];
    confidence_bands: Row[];
    r_distribution: Row[];
    equity: { index: number; equity_r: number }[];
};
const card = "rounded-xl border border-sidebar-border/70 bg-card p-4 shadow-sm";
const pct = (v: number | null | undefined) =>
    v == null ? "—" : `${v.toFixed(1)}%`;
const r = (v: number | null | undefined) =>
    v == null ? "—" : `${v >= 0 ? "+" : ""}${v.toFixed(2)}R`;
function Bars({
    rows,
    field,
}: {
    rows: Row[];
    field: "signals" | "count" | "win_rate" | "average_r";
}) {
    const max = Math.max(
        1,
        ...rows.map((x) => Math.abs(Number(x[field] ?? 0))),
    );
    return (
        <div className="space-y-3">
            {rows.map((x) => {
                const n = Number(x[field] ?? 0);
                return (
                    <div key={x.label}>
                        <div className="mb-1 flex justify-between text-sm">
                            <span>{x.label}</span>
                            <span className="font-medium">
                                {field === "win_rate"
                                    ? pct(x.win_rate)
                                    : field === "average_r"
                                      ? r(x.average_r)
                                      : n}
                            </span>
                        </div>
                        <div className="h-2 rounded-full bg-muted">
                            <div
                                className="h-full rounded-full bg-primary"
                                style={{
                                    width: `${Math.min(100, (Math.abs(n) / max) * 100)}%`,
                                }}
                            />
                        </div>
                    </div>
                );
            })}
        </div>
    );
}
export default function Analytics() {
    const { t } = useI18n();
    const [data, setData] = useState<Api | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState("");
    const [market, setMarket] = useState("all");
    const [provider, setProvider] = useState("all");
    const [interval, setInterval] = useState("");
    const [direction, setDirection] = useState("all");
    const requestRef = useRef<AbortController | null>(null);
    const requestIdRef = useRef(0);
    const load = async () => {
        requestRef.current?.abort();
        const controller = new AbortController();
        requestRef.current = controller;
        const requestId = ++requestIdRef.current;
        setLoading(true);
        setError("");
        try {
            const q = new URLSearchParams();
            if (market !== "all") q.set("market", market);
            if (provider !== "all") q.set("provider", provider);
            if (interval) q.set("interval", interval);
            if (direction !== "all") q.set("direction", direction);
            const res = await fetch(`/signals/analytics/data?${q}`, {
                headers: { Accept: "application/json" },
                credentials: "same-origin",
                cache: "no-store",
                signal: controller.signal,
            });
            if (!res.ok) throw new Error("Unable to load analytics");
            const payload = (await res.json()) as Api;
            if (requestId === requestIdRef.current) setData(payload);
        } catch (e) {
            if (e instanceof DOMException && e.name === "AbortError") return;
            if (requestId === requestIdRef.current) {
                setError(
                    e instanceof Error ? e.message : "Unable to load analytics",
                );
            }
        } finally {
            if (requestId === requestIdRef.current) setLoading(false);
        }
    };
    useEffect(() => {
        void load();
        return () => {
            requestRef.current?.abort();
            requestRef.current = null;
        };
    }, [market, provider, interval, direction]);
    return (
        <AppLayout
            breadcrumbs={[
                { title: "Signal Analytics", href: "/signals/analytics" },
            ]}
        >
            <Head title={t("Signal Analytics")} />
            <div className="product-page-content mx-auto w-full max-w-[1600px] space-y-6">
                <AnalysisPageHeader
                    eyebrow={t("Signal workspace")}
                    title={t("Signal Analytics")}
                    description={t(
                        "Review historical signal performance across providers, markets, timeframes, and directions.",
                    )}
                    actions={
                        <Button
                            variant="outline"
                            onClick={() => void load()}
                            disabled={loading}
                        >
                            <RefreshCw className="mr-2 size-4" />
                            {t("Refresh")}
                        </Button>
                    }
                />
                <CustomerWorkspaceNav group="signals" />
                <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
                    <Select value={provider} onValueChange={setProvider}>
                        <SelectTrigger aria-label={t("Market provider")}>
                            <SelectValue placeholder={t("All providers")} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">{t("All providers")}</SelectItem>
                            {(data?.providers ?? []).map((item) => (
                                <SelectItem key={item.slug} value={item.slug}>
                                    {item.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    <Select value={market} onValueChange={setMarket}>
                        <SelectTrigger><SelectValue placeholder={t("All markets")} /></SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">{t("All markets")}</SelectItem>
                            <SelectItem value="spot">{t("Spot")}</SelectItem>
                            <SelectItem value="futures">{t("Futures")}</SelectItem>
                        </SelectContent>
                    </Select>
                    <Select value={interval || "all"} onValueChange={(value) => setInterval(value === "all" ? "" : value)}>
                        <SelectTrigger><SelectValue placeholder={t("All timeframes")} /></SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">{t("All timeframes")}</SelectItem>
                            <SelectItem value="5m">{t("5m")}</SelectItem>
                            <SelectItem value="15m">{t("15m")}</SelectItem>
                            <SelectItem value="30m">{t("30m")}</SelectItem>
                            <SelectItem value="1h">{t("1h")}</SelectItem>
                            <SelectItem value="4h">{t("4h")}</SelectItem>
                            <SelectItem value="1d">{t("1d")}</SelectItem>
                        </SelectContent>
                    </Select>
                    <Select value={direction} onValueChange={setDirection}>
                        <SelectTrigger><SelectValue placeholder={t("Both directions")} /></SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">{t("Both directions")}</SelectItem>
                            <SelectItem value="long">{t("Long")}</SelectItem>
                            <SelectItem value="short">{t("Short")}</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                {error && (
                    <div className="rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm">
                        {error}
                    </div>
                )}
                {loading && !data ? (
                    <div className={card}>{t("Loading analytics…")}</div>
                ) : (
                    data && (
                        <>
                            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                {[
                                    ["Signals", data.summary.total],
                                    ["Win rate", pct(data.summary.win_rate)],
                                    ["Average R", r(data.summary.average_r)],
                                    ["Total R", r(data.summary.total_r)],
                                ].map(([a, b]) => (
                                    <div className={card} key={String(a)}>
                                        <div className="text-sm text-muted-foreground">
                                            {a}
                                        </div>
                                        <div className="mt-2 text-2xl font-semibold">
                                            {b}
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div className="grid gap-4 lg:grid-cols-2">
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("Timeframe")}
                                    </h2>
                                    <Bars
                                        rows={data.timeframes}
                                        field="signals"
                                    />
                                </section>
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("LONG vs SHORT")}
                                    </h2>
                                    <Bars
                                        rows={data.directions}
                                        field="signals"
                                    />
                                </section>
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("Confidence vs Win Rate")}
                                    </h2>
                                    <Bars
                                        rows={data.confidence_bands}
                                        field="win_rate"
                                    />
                                </section>
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("Confidence vs Average R")}
                                    </h2>
                                    <Bars
                                        rows={data.confidence_bands}
                                        field="average_r"
                                    />
                                </section>
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("R Distribution")}
                                    </h2>
                                    <Bars
                                        rows={data.r_distribution}
                                        field="count"
                                    />
                                </section>
                                <section className={card}>
                                    <h2 className="mb-4 font-semibold">
                                        {t("Market")}
                                    </h2>
                                    <Bars rows={data.markets} field="signals" />
                                </section>
                            </div>
                            <section className={card}>
                                <div className="mb-4 flex items-center gap-2">
                                    <BarChart3 className="h-5 w-5" />
                                    <h2 className="font-semibold">
                                        {t("Equity Curve (R)")}
                                    </h2>
                                </div>
                                <div className="flex h-52 min-w-160 items-end gap-1 overflow-x-auto">
                                    {data.equity.length ? (
                                        data.equity.map((p, i) => {
                                            const min = Math.min(
                                                0,
                                                ...data.equity.map(
                                                    (x) => x.equity_r,
                                                ),
                                            );
                                            const max = Math.max(
                                                1,
                                                ...data.equity.map(
                                                    (x) => x.equity_r,
                                                ),
                                            );
                                            return (
                                                <div
                                                    key={i}
                                                    title={`${p.index}: ${r(p.equity_r)}`}
                                                    className="min-w-1 flex-1 rounded-t bg-primary/70"
                                                    style={{
                                                        height: `${Math.max(3, ((p.equity_r - min) / (max - min)) * 100)}%`,
                                                    }}
                                                />
                                            );
                                        })
                                    ) : (
                                        <div className="text-sm text-muted-foreground">
                                            {t(
                                                "No completed signals in this filter.",
                                            )}
                                        </div>
                                    )}
                                </div>
                            </section>
                            <div className="grid gap-4 sm:grid-cols-2">
                                <div className={card}>
                                    <div className="flex items-center gap-2">
                                        <TrendingUp className="h-4 w-4" />
                                        <span className="text-sm text-muted-foreground">
                                            {t("Wins")}
                                        </span>
                                    </div>
                                    <div className="mt-2 text-xl font-semibold">
                                        {data.summary.wins}
                                    </div>
                                </div>
                                <div className={card}>
                                    <div className="flex items-center gap-2">
                                        <TrendingDown className="h-4 w-4" />
                                        <span className="text-sm text-muted-foreground">
                                            {t("Invalidated")}
                                        </span>
                                    </div>
                                    <div className="mt-2 text-xl font-semibold">
                                        {data.summary.losses}
                                    </div>
                                </div>
                            </div>
                        </>
                    )
                )}
            </div>
        </AppLayout>
    );
}