import { ArrowDownRight, ArrowUpRight, Link2, RefreshCw } from "lucide-react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { DataCardState } from "./DataCardState";
import { useI18n } from "@/lib/i18n";
import { usePolledJson } from "@/hooks/use-polled-json";
import type { MarketType } from "@/lib/market";
import { useMemo, useState } from "react";

type Props = {
    leader: string;
    market: MarketType;
    interval: string;
    provider?: string;
};

type RelayMetric = {
    lag: number;
    score: number;
    correlation: number | null;
    follow_rate: number | null;
    avg_move_pct: number | null;
    event_count: number;
    sample_count: number;
    confidence: number;
};

type RelayCandidate = {
    symbol: string;
    last: number;
    change_pct: number;
    quote_volume: number;
    up: RelayMetric | null;
    down: RelayMetric | null;
};

type RelayData = {
    provider: string;
    market: MarketType;
    interval: string;
    window: number;
    max_lag: number;
    leader: {
        symbol: string;
        last: number | null;
        change_pct: number | null;
        quote_volume: number | null;
        sample_count: number;
    };
    candidates: RelayCandidate[];
    updated_at: string;
};

type Direction = "up" | "down";

function shortSymbol(symbol: string): string {
    return symbol.replace(/USDT$/, "");
}

function formatPct(value: number | null | undefined, digits = 1): string {
    return value == null || !Number.isFinite(value)
        ? "—"
        : `${value >= 0 ? "+" : ""}${value.toFixed(digits)}%`;
}

function formatCorr(value: number | null | undefined): string {
    return value == null || !Number.isFinite(value)
        ? "—"
        : `${value >= 0 ? "+" : ""}${value.toFixed(2)}`;
}

export default function MarketRelayPanel({
    leader,
    market,
    interval,
    provider = "binance",
}: Props) {
    const { t } = useI18n();
    const [direction, setDirection] = useState<Direction>("up");
    const [windowSize, setWindowSize] = useState(120);
    const [maxLag, setMaxLag] = useState(3);
    const url = useMemo(() => {
        return `/market/lead-lag?${new URLSearchParams({
            leader,
            market,
            interval,
            provider,
            window: String(windowSize),
            max_lag: String(maxLag),
            max_candidates: "8",
        }).toString()}`;
    }, [leader, market, interval, provider, windowSize, maxLag]);
    const { data, error, loading, updatedAt, refetch } =
        usePolledJson<RelayData>(url, 60_000, true);

    const candidates = useMemo(() => {
        if (!data) return [];
        const key = direction === "up" ? "up" : "down";
        return [...data.candidates]
            .filter((candidate) => candidate[key] !== null)
            .sort((a, b) => (b[key]?.score ?? 0) - (a[key]?.score ?? 0));
    }, [data, direction]);

    const directionLabel =
        direction === "up"
            ? t("When the leader rises", "When the leader rises")
            : t("When the leader falls", "When the leader falls");

    return (
        <Card className="min-w-0 overflow-hidden border-border bg-card shadow-xs py-3 px-0!">
            <CardHeader className="border-b border-border/60 py-3">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div className="flex min-w-0 items-center gap-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border bg-muted/40 text-primary">
                            <Link2 className="size-5" />
                        </div>
                        <div className="min-w-0">
                            <div className="text-xs font-semibold uppercase tracking-[.14em] text-muted-foreground">
                                {t("Market Relay", "Market Relay")}
                            </div>
                            <div className="mt-0.5 truncate text-sm font-semibold text-foreground">
                                {leader.replace(/USDT$/, "")} leads ·{" "}
                                {provider.toUpperCase()} · {interval}
                            </div>
                        </div>
                    </div>
                    <div className="flex flex-wrap items-center gap-2 sm:justify-end">
                        <Select
                            value={direction}
                            onValueChange={(value) =>
                                setDirection(value as Direction)
                            }
                        >
                            <SelectTrigger className="h-9 w-38.75 text-xs">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="up">
                                    {t("Leader rises", "Leader rises")}
                                </SelectItem>
                                <SelectItem value="down">
                                    {t("Leader falls", "Leader falls")}
                                </SelectItem>
                            </SelectContent>
                        </Select>
                        <Select
                            value={String(windowSize)}
                            onValueChange={(value) =>
                                setWindowSize(Number(value))
                            }
                        >
                            <SelectTrigger className="h-9 w-28 text-xs">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                {[60, 120, 200, 300].map((value) => (
                                    <SelectItem
                                        key={value}
                                        value={String(value)}
                                    >
                                        {value} candles
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={refetch}
                            disabled={loading}
                            className="h-9 gap-2 text-xs"
                        >
                            <RefreshCw
                                className={`size-3.5 ${loading ? "animate-spin" : ""}`}
                            />
                            {t("Refresh", "Refresh")}
                        </Button>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="space-y-4 p-4 pt-3">
                <DataCardState
                    loading={loading}
                    error={error}
                    hasData={Boolean(data)}
                    onRetry={refetch}
                    loadingLabel={t(
                        "Scanning lead-lag relationships…",
                        "Scanning lead-lag relationships…",
                    )}
                    empty={!loading && !error && !data}
                    emptyLabel={t(
                        "Market relay data is not available yet.",
                        "Data market relay belum tersedia.",
                    )}
                />

                {data && (
                    <>
                        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-muted/20 px-3 py-2.5">
                            <Badge
                                variant="secondary"
                                className="font-semibold"
                            >
                                {shortSymbol(data.leader.symbol)}
                            </Badge>
                            <span className="text-xs text-muted-foreground">
                                {directionLabel}
                            </span>
                            <span className="text-xs font-bold tabular-nums text-foreground">
                                {formatPct(data.leader.change_pct, 2)} 24h
                            </span>
                            <span className="text-[11px] text-muted-foreground">
                                · {data.leader.sample_count} samples · max{" "}
                                {data.max_lag} lag
                            </span>
                        </div>

                        <div className="space-y-2">
                            {candidates.slice(0, 6).map((candidate, index) => {
                                const metric = candidate[direction];
                                if (!metric) return null;
                                return (
                                    <div
                                        key={candidate.symbol}
                                        className="rounded-xl border border-border bg-background p-3"
                                    >
                                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                            <div className="flex min-w-0 items-center gap-2">
                                                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-bold">
                                                    {index + 1}
                                                </span>
                                                {direction === "up" ? (
                                                    <ArrowUpRight className="size-4 shrink-0 text-success-600" />
                                                ) : (
                                                    <ArrowDownRight className="size-4 shrink-0 text-destructive-600" />
                                                )}
                                                <span className="font-semibold">
                                                    {shortSymbol(
                                                        candidate.symbol,
                                                    )}
                                                </span>
                                                <Badge
                                                    variant="outline"
                                                    className="text-[10px]"
                                                >
                                                    lag {metric.lag}
                                                </Badge>
                                            </div>
                                            <div className="text-left sm:text-right">
                                                <div className="text-sm font-bold tabular-nums">
                                                    {metric.follow_rate?.toFixed(
                                                        1,
                                                    )}
                                                    % follow
                                                </div>
                                                <div className="text-[10px] text-muted-foreground">
                                                    score{" "}
                                                    {metric.score.toFixed(1)}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
                                            <Metric
                                                label={t(
                                                    "Lagged corr",
                                                    "Lagged corr",
                                                )}
                                                value={formatCorr(
                                                    metric.correlation,
                                                )}
                                            />
                                            <Metric
                                                label={t(
                                                    "Avg follower",
                                                    "Avg follower",
                                                )}
                                                value={formatPct(
                                                    metric.avg_move_pct,
                                                    3,
                                                )}
                                            />
                                            <Metric
                                                label={t("Events", "Events")}
                                                value={String(
                                                    metric.event_count,
                                                )}
                                            />
                                            <Metric
                                                label={t(
                                                    "Confidence",
                                                    "Confidence",
                                                )}
                                                value={`${metric.confidence.toFixed(0)}%`}
                                            />
                                        </div>
                                    </div>
                                );
                            })}
                        </div>

                        {candidates.length === 0 && (
                            <div className="rounded-xl border border-dashed border-border p-4 text-center text-xs text-muted-foreground">
                                No follower has enough historical directional
                                events for a reliable relay ranking.
                            </div>
                        )}

                        <div className="text-[11px] leading-4 text-muted-foreground">
                            Market Relay ranks historical followers of the
                            selected leader. It estimates timing and
                            follow-through from closed candles; it does not
                            predict or guarantee the next move.
                            {updatedAt && (
                                <span className="ml-1">
                                    · {t("Updated", "Updated")}{" "}
                                    {new Date(updatedAt).toLocaleTimeString()}
                                </span>
                            )}
                        </div>
                    </>
                )}
            </CardContent>
        </Card>
    );
}

function Metric({ label, value }: { label: string; value: string }) {
    return (
        <div className="rounded-lg border border-border/70 bg-muted/20 p-2">
            <div className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground">
                {label}
            </div>
            <div className="mt-0.5 text-xs font-bold tabular-nums text-foreground">
                {value}
            </div>
        </div>
    );
}