import { useEffect, useState } from "react";
import { BarChart3, RefreshCw } from "lucide-react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import type { MarketType } from "@/lib/market";

interface Props {
    market: MarketType;
    symbol?: string;
    interval?: string;
    provider?: string;
}

type RegimeRow = {
    regime: string;
    label: string;
    signals: number;
    completed: number;
    wins: number;
    losses: number;
    win_rate: number | null;
    average_r: number | null;
    total_r: number | null;
};

type Api = {
    summary: { signals: number; classified: number; skipped: number };
    regimes: RegimeRow[];
    meta: { historical_as_of: boolean; adaptive_weighting: boolean };
};

const pct = (v: number | null) => (v == null ? "—" : `${v.toFixed(1)}%`);
const r = (v: number | null) =>
    v == null ? "—" : `${v >= 0 ? "+" : ""}${v.toFixed(2)}R`;

export default function RegimePerformancePanel({
    market,
    symbol,
    interval,
    provider = "binance",
}: Props) {
    const [data, setData] = useState<Api | null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const load = () => {
        if (market !== "futures") return;
        setLoading(true);
        setError("");
        const params = new URLSearchParams({ market: "futures", limit: "50", provider });
        if (symbol) params.set("symbol", symbol);
        if (interval) params.set("interval", interval);

        fetch(`/market/regime-performance?${params.toString()}`, {
            headers: {
                Accept: "application/json",
                "X-Requested-With": "XMLHttpRequest",
            },
            credentials: "same-origin",
            cache: "no-store",
        })
            .then(async (response) => {
                if (!response.ok)
                    throw new Error("Regime performance unavailable");
                return response.json() as Promise<Api>;
            })
            .then(setData)
            .catch((err: unknown) =>
                setError(
                    err instanceof Error
                        ? err.message
                        : "Regime performance unavailable",
                ),
            )
            .finally(() => setLoading(false));
    };

    useEffect(load, [market, symbol, interval, provider]);

    if (market !== "futures") return null;

    return (
        <Card className="overflow-hidden border-border bg-card shadow-xs py-4 px-0!">
            <CardHeader className="border-b border-border/60">
                <div className="flex items-center justify-between gap-3">
                    <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-muted/40 text-primary">
                            <BarChart3 className="size-5" />
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-foreground">
                                Regime Performance
                            </div>
                            <div className="text-[11px] text-muted-foreground">
                                Historical signal outcomes by market regime
                            </div>
                        </div>
                    </div>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={load}
                        disabled={loading}
                        className="h-9 gap-2 text-xs font-medium shadow-xs"
                    >
                        <RefreshCw
                            className={`size-3.5 ${loading ? "animate-spin" : ""}`}
                        />
                        Refresh
                    </Button>
                </div>
            </CardHeader>
            <CardContent className="p-5 pt-4 space-y-4">
                {error && (
                    <div className="rounded-xl border border-border bg-muted/20 p-3.5 text-xs text-muted-foreground shadow-xs">
                        {error}
                    </div>
                )}
                {!error && !data && (
                    <div className="h-24 animate-pulse rounded-xl bg-muted/30" />
                )}
                {data && (
                    <>
                        <div className="grid gap-3 sm:grid-cols-3">
                            <Metric
                                label="Signals"
                                value={String(data.summary.signals)}
                            />
                            <Metric
                                label="Classified"
                                value={String(data.summary.classified)}
                            />
                            <Metric
                                label="Skipped"
                                value={String(data.summary.skipped)}
                            />
                        </div>
                        <div className="overflow-x-auto rounded-xl border border-border shadow-xs">
                            <table className="w-full min-w-[720px] text-xs">
                                <thead className="bg-muted/40 text-left text-muted-foreground">
                                    <tr>
                                        <th className="px-3 py-2.5">Regime</th>
                                        <th className="px-3 py-2.5">Signals</th>
                                        <th className="px-3 py-2.5">
                                            Win Rate
                                        </th>
                                        <th className="px-3 py-2.5">
                                            Average R
                                        </th>
                                        <th className="px-3 py-2.5">Total R</th>
                                        <th className="px-3 py-2.5">W / L</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {data.regimes.map((row) => (
                                        <tr
                                            key={row.regime}
                                            className="border-b border-border/60 last:border-0 hover:bg-muted/20"
                                        >
                                            <td className="px-3 py-3 font-medium text-foreground">
                                                {row.label}
                                            </td>
                                            <td className="px-3 py-3">
                                                {row.signals}
                                            </td>
                                            <td className="px-3 py-3">
                                                {pct(row.win_rate)}
                                            </td>
                                            <td className="px-3 py-3">
                                                {r(row.average_r)}
                                            </td>
                                            <td className="px-3 py-3">
                                                {r(row.total_r)}
                                            </td>
                                            <td className="px-3 py-3">
                                                {row.wins} / {row.losses}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <div className="rounded-xl border border-border bg-muted/20 p-3.5 text-xs text-muted-foreground shadow-xs">
                            Regime dihitung menggunakan kondisi historis pada
                            waktu signal terdeteksi. Data ini hanya untuk
                            analisis; adaptive signal weighting masih{" "}
                            <span className="font-medium text-foreground">
                                OFF
                            </span>
                            .
                        </div>
                    </>
                )}
            </CardContent>
        </Card>
    );
}

function Metric({ label, value }: { label: string; value: string }) {
    return (
        <div className="rounded-xl border border-border bg-background p-3.5 shadow-xs">
            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
                {label}
            </div>
            <div className="mt-1 text-base font-semibold text-foreground">
                {value}
            </div>
        </div>
    );
}