import { Head } from "@inertiajs/react";
import {
    Activity,
    ArrowDownRight,
    ArrowUpRight,
    Check,
    ChevronDown,
    RefreshCw,
    Search,
    Waves,
} from "lucide-react";
import { ReactNode, useEffect, useMemo, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Label } from "@/components/ui/label";
import { useI18n } from "@/lib/i18n";
import CustomerWorkspaceNav from "@/components/customer-workspace-nav";
import DataFreshness from "@/components/data-freshness";
import { DataState } from "@/components/data-state";
import { usePolledJson } from "@/hooks/use-polled-json";
import AppLayout from "@/layouts/app-layout";

type MarketType = "spot" | "futures";

type SymbolItem = {
    symbol: string;
    name: string;
};

type LargeTrade = {
    id: number;
    time: number;
    price: number;
    quantity: number;
    notional: number;
    side: "buy" | "sell";
};

type WhaleData = {
    symbol: string;
    market: "spot" | "futures";
    provider: string;
    threshold: number;
    timeframe: string;
    updated_at: number;
    sample: {
        trades: number;
        large_trades: number;
        from: number | null;
        to: number | null;
    };
    price: {
        last: number | null;
        change_24h_pct: number | null;
    };
    flow: {
        buy_value: number;
        sell_value: number;
        net_value: number;
        buy_count: number;
        sell_count: number;
        total_count: number;
        buy_pct: number | null;
        sell_pct: number | null;
        largest_trade: LargeTrade | null;
    };
    large_trades: LargeTrade[];
    order_book: {
        bid_share_pct: number | null;
        bid_value: number | null;
        ask_value: number | null;
        bid_wall?: { price: number | null; value: number } | null;
        ask_wall?: { price: number | null; value: number } | null;
        spread_bps: number | null;
    } | null;
    market_context: {
        volume_24h: number | null;
        trades_24h: number | null;
        taker_buy_ratio: number | null;
        open_interest_change_pct: number | null;
        liquidation_total: number | null;
        liquidation_long: number | null;
        liquidation_short: number | null;
    };
};

type ProviderOption = {
    id: number;
    name: string;
    slug: string;
    driver: string;
    markets: string[];
    capabilities: Record<string, boolean | string[]>;
};

type Props = {
    providers: ProviderOption[];
    defaultProvider: string;
    symbols: Record<string, Record<MarketType, SymbolItem[]>>;
    defaultSymbol: string;
    defaultMarket: MarketType;
    canUseWhaleActivity: boolean;
};

const timeframes = ["1m", "5m", "15m", "1h", "4h"] as const;
const thresholds = [
    100_000, 250_000, 500_000, 1_000_000, 5_000_000, 10_000_000,
];

function formatMoney(value: number | null | undefined, digits = 0): string {
    if (value === null || value === undefined || !Number.isFinite(value))
        return "—";
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        notation: Math.abs(value) >= 1_000_000 ? "compact" : "standard",
        maximumFractionDigits: digits,
    }).format(value);
}

function formatPrice(value: number | null | undefined): string {
    if (value === null || value === undefined || !Number.isFinite(value))
        return "—";
    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 8 }).format(
        value,
    );
}

function formatNumber(value: number | null | undefined): string {
    if (value === null || value === undefined || !Number.isFinite(value))
        return "—";
    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(
        value,
    );
}

function formatTime(value: number): string {
    return new Date(value).toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
    });
}

function formatAge(timestamp: number | null | undefined): string {
    if (!timestamp) return "—";
    const seconds = Math.max(0, Math.round(Date.now() / 1000 - timestamp));
    if (seconds < 60) return `${seconds}s`;
    const minutes = Math.floor(seconds / 60);
    if (minutes < 60) return `${minutes}m`;
    return `${Math.floor(minutes / 60)}h`;
}

export default function WhaleActivity({
    providers,
    defaultProvider,
    symbols,
    defaultSymbol,
    defaultMarket,
    canUseWhaleActivity,
}: Props) {
    const { t } = useI18n();
    const [provider, setProvider] = useState(defaultProvider);
    const [market, setMarket] = useState<MarketType>(defaultMarket);
    const [symbol, setSymbol] = useState(defaultSymbol);
    const [threshold, setThreshold] = useState("100000");
    const [timeframe, setTimeframe] =
        useState<(typeof timeframes)[number]>("5m");

    const providerSymbols = symbols[provider] ?? { spot: [], futures: [] };
    const selectedProvider = providers.find((item) => item.slug === provider);
    const availableSymbols = providerSymbols[market] ?? [];
    const selectedItem = useMemo(
        () =>
            availableSymbols.find((item) => item.symbol === symbol) ??
            availableSymbols[0] ?? { symbol, name: symbol },
        [availableSymbols, symbol],
    );

    useEffect(() => {
        if (providers.length > 0 && !providers.some((item) => item.slug === provider)) {
            setProvider(providers[0].slug);
        }
    }, [providers, provider]);

    useEffect(() => {
        if (
            availableSymbols.length > 0 &&
            !availableSymbols.some((item) => item.symbol === symbol)
        ) {
            setSymbol(availableSymbols[0].symbol);
        }
    }, [availableSymbols, symbol]);

    useEffect(() => {
        const supported = selectedProvider?.markets ?? [];
        if (!supported.includes(market)) {
            setMarket((supported[0] as MarketType) ?? "spot");
        }
    }, [market, selectedProvider]);

    const query = new URLSearchParams({
        provider,
        symbol: selectedItem.symbol,
        market,
        threshold,
        timeframe,
    }).toString();

    const { data, error, loading, updatedAt, refetch } = usePolledJson<WhaleData>(
        `/whale-activity/data?${query}`,
        10_000,
        canUseWhaleActivity,
    );

    const buyPct = data?.flow.buy_pct ?? 0;
    const sellPct = data?.flow.sell_pct ?? 0;
    const netPositive = (data?.flow.net_value ?? 0) >= 0;

    return (
        <>
            <Head title={t("Whale Activity")} />
            <div className="product-page min-h-full">
                <div className="product-page-content mx-auto w-full max-w-[1600px] space-y-5">
                    <CustomerWorkspaceNav group="analysis" />

                    <div className="flex min-w-0 flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
                        <div>
                            <div className="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-[.2em] text-success-400">
                                <Waves className="size-3" />{" "}
                                {t("Market Intelligence")}
                            </div>
                            <h1 className="text-2xl font-bold text-foreground">
                                {t("Whale Activity")}
                            </h1>
                            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
                                {t(
                                    "Monitor large public trades and directional flow from the selected exchange.",
                                )}
                            </p>
                        </div>
                        <div className="flex items-center justify-end xl:col-span-5">
                            <DataFreshness updatedAt={updatedAt} loading={loading} staleAfterMs={30_000} />
                        </div>
                        <div className="grid w-full min-w-0 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:w-full xl:max-w-6xl xl:grid-cols-5">
                            <div className="space-y-1.5">
                                <Label className="text-xs font-semibold text-muted-foreground">
                                    {t("Provider", "Provider")}
                                </Label>
                                <Select
                                    value={provider}
                                    onValueChange={(value) => {
                                        setProvider(value);
                                        const nextSymbols = symbols[value]?.[market] ?? [];
                                        if (!nextSymbols.some((item) => item.symbol === symbol)) {
                                            setSymbol(nextSymbols[0]?.symbol ?? "");
                                        }
                                    }}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder={t("Choose provider", "Choose provider")} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {providers.map((item) => (
                                            <SelectItem key={item.slug} value={item.slug}>
                                                {item.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-1.5">
                                <Label className="text-xs font-semibold text-muted-foreground">
                                    {t("Coin", "Coin")}
                                </Label>
                                <CoinPicker
                                    items={availableSymbols}
                                    value={selectedItem.symbol}
                                    onValueChange={setSymbol}
                                    placeholder={t(
                                        "Choose Binance coin",
                                        "Choose Binance coin",
                                    )}
                                    searchPlaceholder={t(
                                        "Search BTC, ETH, NEAR...",
                                        "Search BTC, ETH, NEAR...",
                                    )}
                                    noResultsText={t(
                                        "No coins found.",
                                        "No coins found.",
                                    )}
                                />
                            </div>
                            <div className="space-y-1.5">
                                <Label className="text-xs font-semibold text-muted-foreground">
                                    {t("Market", "Market")}
                                </Label>
                                <Select
                                    value={market}
                                    onValueChange={(value) => {
                                        const nextMarket = value as MarketType;
                                        setMarket(nextMarket);
                                        const nextSymbols =
                                            symbols[nextMarket] ?? [];
                                        if (
                                            !nextSymbols.some(
                                                (item) =>
                                                    item.symbol === symbol,
                                            )
                                        ) {
                                            setSymbol(
                                                nextSymbols[0]?.symbol ??
                                                    defaultSymbol,
                                            );
                                        }
                                    }}
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="spot">
                                            {t("Spot")}
                                        </SelectItem>
                                        <SelectItem value="futures">
                                            {t("Futures")}
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-1.5">
                                <Label className="text-xs font-semibold text-muted-foreground">
                                    {t("Timeframe", "Timeframe")}
                                </Label>
                                <Select
                                    value={timeframe}
                                    onValueChange={(value) =>
                                        setTimeframe(
                                            value as (typeof timeframes)[number],
                                        )
                                    }
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {timeframes.map((value) => (
                                            <SelectItem
                                                key={value}
                                                value={value}
                                            >
                                                {value}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-1.5">
                                <Label className="text-xs font-semibold text-muted-foreground">
                                    {t(
                                        "Large Trade Threshold",
                                        "Large Trade Threshold",
                                    )}
                                </Label>
                                <div className="flex gap-2">
                                    <Select
                                        value={threshold}
                                        onValueChange={setThreshold}
                                    >
                                        <SelectTrigger className="w-full">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {thresholds.map((value) => (
                                                <SelectItem
                                                    key={value}
                                                    value={String(value)}
                                                >
                                                    ≥ {formatMoney(value)}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        onClick={refetch}
                                        disabled={loading}
                                        aria-label={t("Refresh")}
                                        title={t("Refresh")}
                                    >
                                        <RefreshCw
                                            className={`size-4 ${loading ? "animate-spin" : ""}`}
                                        />
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {error && (
                        <DataState
                            kind="error"
                            title={t("Whale activity could not be refreshed.")}
                            description={error}
                            actionLabel={t("Retry")}
                            onAction={refetch}
                        />
                    )}

                    {loading && !data ? (
                        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4" aria-label={t("Loading whale activity")}>
                            {[1, 2, 3, 4].map((item) => (
                                <Card key={item} className="border-border/70 bg-card/80">
                                    <CardContent className="space-y-3 p-5">
                                        <div className="h-3 w-24 animate-pulse rounded bg-muted/60" />
                                        <div className="h-7 w-32 animate-pulse rounded bg-muted/50" />
                                        <div className="h-3 w-20 animate-pulse rounded bg-muted/40" />
                                    </CardContent>
                                </Card>
                            ))}
                        </div>
                    ) : null}

                    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        <MetricCard
                            label={t("Last Price")}
                            value={formatPrice(data?.price.last)}
                            suffix={
                                data?.price.change_24h_pct !== null &&
                                data?.price.change_24h_pct !== undefined
                                    ? `${data.price.change_24h_pct >= 0 ? "+" : ""}${data.price.change_24h_pct.toFixed(2)}% 24h`
                                    : undefined
                            }
                        />
                        <MetricCard
                            label={t("Large Buy")}
                            value={formatMoney(data?.flow.buy_value)}
                            hint={`${data?.flow.buy_count ?? 0} ${t("events")}`}
                            positive
                        />
                        <MetricCard
                            label={t("Large Sell")}
                            value={formatMoney(data?.flow.sell_value)}
                            hint={`${data?.flow.sell_count ?? 0} ${t("events")}`}
                            negative
                        />
                        <MetricCard
                            label={t("Net Large Flow")}
                            value={formatMoney(data?.flow.net_value)}
                            hint={
                                netPositive
                                    ? t("Net buy flow")
                                    : t("Net sell flow")
                            }
                            positive={netPositive}
                            negative={!netPositive}
                        />
                    </div>

                    <div className="grid gap-5 lg:grid-cols-[1.4fr_0.8fr]">
                        <Card>
                            <CardHeader>
                                <div className="flex items-center justify-between gap-3">
                                    <div>
                                        <CardTitle className="text-lg">
                                            {t("Whale Flow")}
                                        </CardTitle>
                                        <CardDescription>
                                            {t(
                                                "Large trades above the selected threshold from the latest sample.",
                                            )}
                                        </CardDescription>
                                    </div>
                                    <Badge variant="outline">
                                        {data?.sample.large_trades ?? 0}{" "}
                                        {t("events")}
                                    </Badge>
                                </div>
                            </CardHeader>
                            <CardContent className="space-y-5">
                                <div>
                                    <div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
                                        <span className="flex items-center gap-1.5 text-success-500">
                                            <ArrowUpRight className="size-3.5" />{" "}
                                            {t("Buy")}{" "}
                                            {data?.flow.buy_pct?.toFixed(1) ??
                                                "0.0"}
                                            %
                                        </span>
                                        <span className="flex items-center gap-1.5 text-destructive-500">
                                            {t("Sell")}{" "}
                                            {data?.flow.sell_pct?.toFixed(1) ??
                                                "0.0"}
                                            %{" "}
                                            <ArrowDownRight className="size-3.5" />
                                        </span>
                                    </div>
                                    <div className="flex h-3 overflow-hidden rounded-full bg-muted">
                                        <div
                                            className="bg-success-500 transition-all"
                                            style={{ width: `${buyPct}%` }}
                                        />
                                        <div
                                            className="bg-destructive-500 transition-all"
                                            style={{ width: `${sellPct}%` }}
                                        />
                                    </div>
                                </div>

                                <div className="grid gap-3 sm:grid-cols-3">
                                    <Info
                                        label={t("Buy value")}
                                        value={formatMoney(
                                            data?.flow.buy_value,
                                        )}
                                    />
                                    <Info
                                        label={t("Sell value")}
                                        value={formatMoney(
                                            data?.flow.sell_value,
                                        )}
                                    />
                                    <Info
                                        label={t("Largest trade")}
                                        value={formatMoney(
                                            data?.flow.largest_trade?.notional,
                                        )}
                                    />
                                </div>

                                <div className="rounded-lg border bg-muted/20 p-3 text-xs text-muted-foreground">
                                    {t("Sample")}: {data?.sample.trades ?? 0}{" "}
                                    {t("aggregate trades")}. {t("Window")}{" "}
                                    {data?.timeframe ?? timeframe}.{" "}
                                    {t("Updated")} {formatAge(data?.updated_at)}{" "}
                                    {t("ago")}.
                                </div>
                            </CardContent>
                        </Card>

                        <Card>
                            <CardHeader>
                                <CardTitle className="text-lg">
                                    {t("Market Context")}
                                </CardTitle>
                                <CardDescription>
                                    {t(
                                        "Supporting market data for the selected symbol.",
                                    )}
                                </CardDescription>
                            </CardHeader>
                            <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                                <Info
                                    label={t("24h Volume")}
                                    value={formatMoney(
                                        data?.market_context.volume_24h,
                                    )}
                                />
                                <Info
                                    label={t("Taker Buy Ratio")}
                                    value={
                                        data?.market_context.taker_buy_ratio !==
                                            null &&
                                        data?.market_context.taker_buy_ratio !==
                                            undefined
                                            ? `${data.market_context.taker_buy_ratio.toFixed(1)}%`
                                            : "—"
                                    }
                                />
                                <Info
                                    label={t("Open Interest Change")}
                                    value={
                                        data?.market_context
                                            .open_interest_change_pct !==
                                            null &&
                                        data?.market_context
                                            .open_interest_change_pct !==
                                            undefined
                                            ? `${data.market_context.open_interest_change_pct >= 0 ? "+" : ""}${data.market_context.open_interest_change_pct.toFixed(2)}%`
                                            : "—"
                                    }
                                />
                                <Info
                                    label={t("Liquidations")}
                                    value={formatMoney(
                                        data?.market_context.liquidation_total,
                                    )}
                                />
                                <Info
                                    label={t("Order Book Bid Share")}
                                    value={
                                        data?.order_book?.bid_share_pct !==
                                            null &&
                                        data?.order_book?.bid_share_pct !==
                                            undefined
                                            ? `${data.order_book.bid_share_pct.toFixed(1)}%`
                                            : "—"
                                    }
                                />
                                <Info
                                    label={t("Spread")}
                                    value={
                                        data?.order_book?.spread_bps !== null &&
                                        data?.order_book?.spread_bps !==
                                            undefined
                                            ? `${data.order_book.spread_bps.toFixed(2)} bps`
                                            : "—"
                                    }
                                />
                            </CardContent>
                        </Card>
                    </div>

                    <Card>
                        <CardHeader>
                            <div className="flex items-center justify-between gap-3">
                                <div>
                                    <CardTitle className="text-lg">
                                        {t("Recent Large Trades")}
                                    </CardTitle>
                                    <CardDescription>
                                        {selectedItem.symbol} ·{" "}
                                        {selectedItem.name} ·{" "}
                                        {market === "futures"
                                            ? t("Futures")
                                            : t("Spot")}
                                    </CardDescription>
                                </div>
                                <Badge variant="outline">
                                    <Activity className="size-3" />{" "}
                                    {data?.flow.total_count ?? 0}
                                </Badge>
                            </div>
                        </CardHeader>
                        <CardContent>
                            {data?.large_trades?.length ? (
                                <Table className="min-w-[680px]">
                                    <TableHeader className="bg-muted/30 text-xs text-muted-foreground">
                                        <TableRow>
                                            <TableHead className="px-4 py-3">{t("Time")}</TableHead>
                                            <TableHead className="px-4 py-3">{t("Side")}</TableHead>
                                            <TableHead className="px-4 py-3 text-right">{t("Notional")}</TableHead>
                                            <TableHead className="px-4 py-3 text-right">{t("Price")}</TableHead>
                                            <TableHead className="px-4 py-3 text-right">{t("Quantity")}</TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {data.large_trades.map((trade) => (
                                            <TableRow key={`${trade.id}-${trade.time}`}>
                                                <TableCell className="px-4 py-3 text-muted-foreground">{formatTime(trade.time)}</TableCell>
                                                <TableCell className="px-4 py-3">
                                                    <Badge variant="outline" className={trade.side === "buy" ? "border-success-500/20 bg-success-500/10 text-success-500" : "border-destructive-500/20 bg-destructive-500/10 text-destructive-500"}>
                                                        {trade.side === "buy" ? t("BUY") : t("SELL")}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell className="px-4 py-3 text-right font-semibold">{formatMoney(trade.notional)}</TableCell>
                                                <TableCell className="px-4 py-3 text-right">{formatPrice(trade.price)}</TableCell>
                                                <TableCell className="px-4 py-3 text-right text-muted-foreground">{formatNumber(trade.quantity)}</TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            ) : (
                                <div className="rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground">
                                    {t(
                                        "No large trades matched the selected threshold in the current sample.",
                                    )}
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    <Card className="border-warning-400/20 bg-warning-400/5">
                        <CardContent className="pt-6 text-xs leading-5 text-muted-foreground">
                            {t(
                                "Whale Activity detects large market trades from Binance aggregate trade data. The BUY/SELL side describes the aggressive market side inferred from the exchange trade flag; it does not identify a specific wallet or trader. The page uses the latest aggregate-trade sample and the selected notional threshold.",
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}

function CoinPicker({
    items,
    value,
    onValueChange,
    placeholder,
    searchPlaceholder,
    noResultsText,
}: {
    items: SymbolItem[];
    value: string;
    onValueChange: (value: string) => void;
    placeholder: string;
    searchPlaceholder: string;
    noResultsText: string;
}) {
    const { t } = useI18n();
    const [open, setOpen] = useState(false);
    const [search, setSearch] = useState("");

    const selectedItem = items.find((item) => item.symbol === value);
    const filteredItems = useMemo(() => {
        const normalized = search.trim().toLowerCase();
        if (!normalized) {
            return items.slice(0, 100);
        }

        return items
            .filter(
                (item) =>
                    item.symbol.toLowerCase().includes(normalized) ||
                    item.name.toLowerCase().includes(normalized),
            )
            .slice(0, 100);
    }, [items, search]);

    return (
        <Dialog
            open={open}
            onOpenChange={(nextOpen) => {
                setOpen(nextOpen);
                if (!nextOpen) {
                    setSearch("");
                }
            }}
        >
            <DialogTrigger asChild>
                <Button
                    variant="outline"
                    className="w-full justify-between font-normal"
                >
                    <span className="min-w-0 truncate text-left">
                        {selectedItem ? (
                            <>
                                {selectedItem.symbol}{" "}
                                <span className="text-muted-foreground">
                                    · {selectedItem.name}
                                </span>
                            </>
                        ) : (
                            placeholder
                        )}
                    </span>
                    <ChevronDown className="size-4 shrink-0 opacity-60" />
                </Button>
            </DialogTrigger>
            <DialogContent className="p-0 sm:max-w-xl">
                <DialogHeader className="border-b px-5 pb-4 pt-5">
                    <DialogTitle>{t("Select Coin", "Select Coin")}</DialogTitle>
                    <DialogDescription>
                        {t(
                            "Search the Binance market catalog by symbol or coin name.",
                            "Search the Binance market catalog by symbol or coin name.",
                        )}
                    </DialogDescription>
                </DialogHeader>
                <div className="px-5 pt-1">
                    <div className="relative">
                        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            autoFocus
                            value={search}
                            onChange={(event) => setSearch(event.target.value)}
                            placeholder={searchPlaceholder}
                            className="pl-9"
                        />
                    </div>
                </div>
                <div className="max-h-105 overflow-y-auto px-3 pb-4 pt-2">
                    {filteredItems.length > 0 ? (
                        <div className="grid gap-1 sm:grid-cols-2">
                            {filteredItems.map((item) => {
                                const isSelected = item.symbol === value;

                                return (
                                    <Button
                                        key={item.symbol}
                                        type="button"
                                        variant="ghost"
                                        className="h-auto justify-between px-3 py-2 text-left"
                                        onClick={() => {
                                            onValueChange(item.symbol);
                                            setOpen(false);
                                            setSearch("");
                                        }}
                                    >
                                        <span className="min-w-0">
                                            <span className="block font-medium">
                                                {item.symbol}
                                            </span>
                                            <span className="block truncate text-xs text-muted-foreground">
                                                {item.name}
                                            </span>
                                        </span>
                                        {isSelected && (
                                            <Check className="size-4 shrink-0 text-success-500" />
                                        )}
                                    </Button>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
                            {noResultsText}
                        </div>
                    )}
                    {!search.trim() && items.length > 100 && (
                        <p className="px-2 pt-3 text-center text-xs text-muted-foreground">
                            {t(
                                "Showing the first 100 markets. Search to find a specific coin.",
                                "Showing the first 100 markets. Search to find a specific coin.",
                            )}
                        </p>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
}

function MetricCard({
    label,
    value,
    hint,
    suffix,
    positive = false,
    negative = false,
}: {
    label: string;
    value: string;
    hint?: string;
    suffix?: string;
    positive?: boolean;
    negative?: boolean;
}) {
    return (
        <Card>
            <CardContent className="pt-6">
                <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    {label}
                </div>
                <div
                    className={`mt-2 text-2xl font-bold ${positive ? "text-success-500" : negative ? "text-destructive-500" : "text-foreground"}`}
                >
                    {value}
                </div>
                {(hint || suffix) && (
                    <div className="mt-1 text-xs text-muted-foreground">
                        {hint ?? suffix}
                    </div>
                )}
            </CardContent>
        </Card>
    );
}

function Info({ label, value }: { label: string; value: string }) {
    return (
        <div className="rounded-lg border bg-muted/20 p-3">
            <div className="text-xs text-muted-foreground">{label}</div>
            <div className="mt-1 font-semibold text-foreground">{value}</div>
        </div>
    );
}

WhaleActivity.layout = (page: ReactNode) => (
    <AppLayout breadcrumbs={[{ title: "Whale Activity", href: "" }]}>
        {page}
    </AppLayout>
);