import { Head, Link } from "@inertiajs/react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
    BarChart3,
    BellRing,
    Clock3,
    Flame,
    TrendingDown,
    TrendingUp,
    RefreshCw,
    Star,
    WalletCards,
    ShieldAlert,
    Activity,
    Eye,
    Sparkles,
    Radar,
    type LucideIcon,
} from "lucide-react";
import { dashboard } from "@/routes";
import { useI18n } from "@/lib/i18n";
import MarketMoverLive from "@/components/dashboard/MarketMoverLive";
import CryptoEvents from "@/components/dashboard/CryptoEvents";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import AnalysisWidgetSettings, { type WorkspacePreset } from "@/components/analysis-widget-settings";

type MarketMover = {
    symbol: string;
    last: number;
    change_pct: number;
    quote_volume: number;
};

type Overview = {
    subscription: {
        plan: string;
        name: string;
        active: boolean;
        starts_at: string | null;
        ends_at: string | null;
        is_trial: boolean;
        trial_days_remaining: number;
        price_monthly: number;
        currency: string;
        duration_days: number;
        billing_interval: string;
        features: string[];
        limits: Record<string, number>;
        status: "active" | "expired" | "inactive";
    };
    upgrade: {
        plan: string;
        name: string;
        price_monthly: number;
        price_after_credit: number;
        currency: string;
        duration_days: number;
        billing_interval: string;
        referral_credit_used: number;
        fully_covered_by_referral: boolean;
    } | null;
    workspace: {
        watchlist_count: number;
        watchlist_limit: number;
        active_alerts: number;
        triggered_today: number;
    };
    market_providers: Array<{
        name: string;
        slug: string;
        driver: string;
        markets: string[];
    }>;
    market: {
        gainers: Array<MarketMover>;
        losers: Array<MarketMover>;
        volume: Array<MarketMover>;
    };
    market_stream: {
        enabled: boolean;
        ws_url: string | null;
        driver: string | null;
        provider: string;
    };
    updated_at: string;
};

export default function Dashboard() {
    const [data, setData] = useState<Overview | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const [marketTab, setMarketTab] = useState<"gainers" | "losers" | "volume">(
        "gainers",
    );
    const [marketProvider, setMarketProvider] = useState(
        () =>
            new URLSearchParams(window.location.search)
                .get("provider")
                ?.trim()
                .toLowerCase() || "",
    );
    const DASHBOARD_WIDGET_DEFAULTS = {
        stats: true,
        movers: true,
        events: true,
    };
    const DASHBOARD_WIDGET_ORDER = ["movers", "events", "stats"];
    const DASHBOARD_PRESETS: WorkspacePreset[] = [
        {
            id: "briefing",
            label: "Briefing",
            description: "Market first, then supporting context.",
            order: ["movers", "events", "stats"],
        },
        {
            id: "account",
            label: "Account",
            description: "Your access and workspace metrics first.",
            order: ["stats", "movers", "events"],
        },
        {
            id: "pulse",
            label: "Pulse",
            description: "Fast movers and events with minimal chrome.",
            order: ["movers", "stats", "events"],
        },
    ];
    const [dashboardWidgets, setDashboardWidgets] = useState(
        DASHBOARD_WIDGET_DEFAULTS,
    );
    const [dashboardWidgetOrder, setDashboardWidgetOrder] = useState(
        DASHBOARD_WIDGET_ORDER,
    );
    const [activeDashboardPreset, setActiveDashboardPreset] = useState("briefing");
    const [compactDensity, setCompactDensity] = useState(false);

    useEffect(() => {
        try {
            const stored = window.localStorage.getItem(
                "analysis:dashboard-workspace:v3",
            );
            if (stored) {
                const parsed = JSON.parse(stored) as {
                    widgets?: Record<string, unknown>;
                    order?: unknown;
                    preset?: unknown;
                };
                if (parsed.widgets && typeof parsed.widgets === "object") {
                    setDashboardWidgets({
                        ...DASHBOARD_WIDGET_DEFAULTS,
                        ...Object.fromEntries(
                            Object.keys(DASHBOARD_WIDGET_DEFAULTS).map((key) => [
                                key,
                                parsed.widgets?.[key] !== false,
                            ]),
                        ),
                    });
                }
                if (Array.isArray(parsed.order)) {
                    const known = new Set(DASHBOARD_WIDGET_ORDER);
                    const next = parsed.order.filter(
                        (id): id is string =>
                            typeof id === "string" && known.has(id),
                    );
                    DASHBOARD_WIDGET_ORDER.forEach((id) => {
                        if (!next.includes(id)) next.push(id);
                    });
                    setDashboardWidgetOrder(next);
                }
                if (
                    typeof parsed.preset === "string" &&
                    DASHBOARD_PRESETS.some((preset) => preset.id === parsed.preset)
                ) {
                    setActiveDashboardPreset(parsed.preset);
                }
            }
            setCompactDensity(
                window.localStorage.getItem("analysis:dashboard-density") ===
                    "compact",
            );
        } catch {
            // Keep defaults when localStorage is unavailable.
        }
    }, []);

    const persistDashboardWorkspace = (
        widgets = dashboardWidgets,
        order = dashboardWidgetOrder,
        preset = activeDashboardPreset,
    ) => {
        try {
            window.localStorage.setItem(
                "analysis:dashboard-workspace:v3",
                JSON.stringify({ widgets, order, preset }),
            );
        } catch {}
    };

    const updateDashboardWidget = (id: string, visible: boolean) => {
        setDashboardWidgets((current) => {
            const next = { ...current, [id]: visible };
            persistDashboardWorkspace(next);
            return next;
        });
    };

    const updateDashboardWidgetOrder = (order: string[]) => {
        setDashboardWidgetOrder(order);
        setActiveDashboardPreset("");
        persistDashboardWorkspace(dashboardWidgets, order, "");
    };

    const applyDashboardPreset = (preset: WorkspacePreset) => {
        setDashboardWidgetOrder(preset.order);
        setActiveDashboardPreset(preset.id);
        persistDashboardWorkspace(dashboardWidgets, preset.order, preset.id);
    };

    const resetDashboardWidgets = () => {
        setDashboardWidgets(DASHBOARD_WIDGET_DEFAULTS);
        setDashboardWidgetOrder(DASHBOARD_WIDGET_ORDER);
        setActiveDashboardPreset("briefing");
        setCompactDensity(false);
        try {
            window.localStorage.removeItem("analysis:dashboard-workspace:v3");
            window.localStorage.removeItem("analysis:dashboard-density");
            persistDashboardWorkspace(
                DASHBOARD_WIDGET_DEFAULTS,
                DASHBOARD_WIDGET_ORDER,
                "briefing",
            );
        } catch {}
    };

    const dashboardWidgetPosition = (id: string) =>
        dashboardWidgetOrder.indexOf(id) < 0
            ? DASHBOARD_WIDGET_ORDER.length
            : dashboardWidgetOrder.indexOf(id);


    const requestRef = useRef<AbortController | null>(null);
    const requestGeneration = useRef(0);
    const { t } = useI18n();

    const load = () => {
        requestRef.current?.abort();
        const controller = new AbortController();
        const generation = ++requestGeneration.current;
        requestRef.current = controller;
        setLoading(true);
        setError(false);

        const provider =
            marketProvider ||
            new URLSearchParams(window.location.search)
                .get("provider")
                ?.trim()
                .toLowerCase() ||
            "";
        const overviewUrl = provider
            ? `/dashboard/overview?provider=${encodeURIComponent(provider)}`
            : "/dashboard/overview";

        fetch(overviewUrl, {
            headers: { Accept: "application/json" },
            credentials: "same-origin",
            cache: "no-store",
            signal: controller.signal,
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(
                        t(
                            "Dashboard request failed: :status",
                            "Dashboard request failed: :status",
                            { status: response.status },
                        ),
                    );
                }
                return response.json();
            })
            .then((nextData: Overview) => {
                if (generation === requestGeneration.current) {
                    setData(nextData);
                }
            })
            .catch((reason: unknown) => {
                if (
                    reason instanceof DOMException &&
                    reason.name === "AbortError"
                ) {
                    return;
                }
                if (generation === requestGeneration.current) {
                    setError(true);
                }
            })
            .finally(() => {
                if (generation === requestGeneration.current) {
                    setLoading(false);
                }
            });

        return controller;
    };

    useEffect(() => {
        const controller = load();
        return () => {
            controller.abort();
            requestRef.current = null;
        };
    }, [marketProvider]);

    useEffect(() => {
        const timer = window.setInterval(() => {
            if (document.visibilityState === "visible") {
                load();
            }
        }, 60_000);

        return () => window.clearInterval(timer);
    }, [marketProvider]);

    const activeMarketProviders = data?.market_providers ?? [];

    const handleMarketProviderChange = (nextProvider: string) => {
        setMarketProvider(nextProvider);
        const url = new URL(window.location.href);
        if (nextProvider) url.searchParams.set("provider", nextProvider);
        else url.searchParams.delete("provider");
        window.history.replaceState(
            {},
            "",
            `${url.pathname}${url.search}${url.hash}`,
        );
    };

    const marketStream = data?.market_stream;

    const selectedMarketProvider =
        activeMarketProviders.find((item) => item.slug === marketProvider)
            ?.slug ??
        marketStream?.provider ??
        activeMarketProviders[0]?.slug ??
        "";

    const sortedMarket = useMemo(() => {
        if (!data?.market) return [];
        return data.market[marketTab] ?? [];
    }, [data?.market, marketTab]);

    if (!data && !loading) {
        return (
            <>
                <Head title={t("nav.dashboard", "Dashboard")} />
                <div className="product-page min-h-full bg-background text-foreground transition-colors duration-300">
                    <div className="mx-auto max-w-3xl rounded-3xl border border-destructive-500/20 bg-card/95 p-8 shadow-sm">
                        <div className="text-xs font-black uppercase tracking-[.18em] text-destructive-600 dark:text-destructive-400">
                            {t(
                                "dashboard.load_error_title",
                                "Dashboard data unavailable",
                            )}
                        </div>
                        <h1 className="mt-2 text-xl font-black text-foreground">
                            {t(
                                "dashboard.load_error",
                                "We could not refresh your dashboard data. Please try again.",
                            )}
                        </h1>
                        <Button
                            type="button"
                            onClick={load}
                            className="mt-6 rounded-2xl px-5 py-3 text-xs font-bold"
                        >
                            <RefreshCw className="size-4" />
                            {t("common.retry", "Retry")}
                        </Button>
                    </div>
                </div>
            </>
        );
    }

    const subscription = data?.subscription;
    const workspace = data?.workspace;
    const upgrade = data?.upgrade;

    const trialDays = Math.max(
        0,
        Math.ceil(Number(subscription?.trial_days_remaining ?? 0)),
    );
    const trialEndingSoon = Boolean(
        subscription?.is_trial && subscription?.active && trialDays <= 3,
    );
    const expired = subscription?.status === "expired";
    const limit = workspace?.watchlist_limit ?? 0;
    const unlimited = limit < 0;

    const formatPrice = (
        price: number,
        currency: string,
        durationDays?: number,
    ) => {
        if (price < 0) return null;
        try {
            const formatted = new Intl.NumberFormat(undefined, {
                style: "currency",
                currency: currency || "USD",
                maximumFractionDigits: 0,
            }).format(price);
            return durationDays
                ? `${formatted} / ${durationDays} days`
                : formatted;
        } catch {
            return `${currency || "USD"} ${Math.round(price)}`;
        }
    };

    const planPriceLabel =
        subscription && subscription.price_monthly > 0
            ? formatPrice(
                  subscription.price_monthly,
                  subscription.currency,
                  subscription.duration_days,
              )
            : null;
    const upgradePriceLabel = upgrade
        ? formatPrice(
              upgrade.price_after_credit,
              upgrade.currency,
              upgrade.duration_days,
          )
        : null;

    const briefing = useMemo(() => {
        const gainers = data?.market?.gainers ?? [];
        const losers = data?.market?.losers ?? [];
        const averageGain = gainers.length
            ? gainers.reduce((sum, item) => sum + Number(item.change_pct || 0), 0) /
              gainers.length
            : 0;
        const averageLoss = losers.length
            ? losers.reduce((sum, item) => sum + Number(item.change_pct || 0), 0) /
              losers.length
            : 0;
        const spread = averageGain + averageLoss;
        const tone = spread > 2 ? "risk-on" : spread < -2 ? "risk-off" : "mixed";
        const label =
            tone === "risk-on"
                ? "Risk-on"
                : tone === "risk-off"
                  ? "Risk-off"
                  : "Mixed conditions";
        const description =
            tone === "risk-on"
                ? "Upside momentum is leading the market. Watch for continuation and unusual volume."
                : tone === "risk-off"
                  ? "Downside pressure is broadening. Prioritize confirmation and volatility context."
                  : "Market leadership is mixed. Use breadth, volume and signals together before drawing conclusions.";
        const lead = gainers[0];
        const weak = losers[0];
        return { tone, label, description, lead, weak, averageGain, averageLoss };
    }, [data?.market]);

    return (
        <>
            <Head title={t("nav.dashboard", "Dashboard")} />

            {/* Background Utama FinTech Responsif (Light & Dark Mode) */}
            <div className="product-page relative min-h-full overflow-hidden bg-background text-foreground">
                <div className="analysis-grid pointer-events-none absolute inset-x-0 top-0 h-[420px] opacity-70" />
                <div className="product-page-content relative mx-auto w-full max-w-[1600px] space-y-6">
                    {loading && !data ? (
                        <DashboardSkeleton />
                    ) : (
                        <>
                            {/* Trial Banner */}
                            {subscription?.is_trial && subscription?.active && (
                                <div
                                    className={`flex flex-col gap-4 rounded-3xl border p-6 shadow-sm backdrop-blur-md transition sm:flex-row sm:items-center sm:justify-between ${
                                        trialEndingSoon
                                            ? "border-warning-500/20 bg-warning-500/10 text-warning-900 dark:text-warning-100"
                                            : "border-success-500/20 bg-success-500/10 text-success-900 dark:text-success-100"
                                    }`}
                                >
                                    <div className="flex items-start gap-4">
                                        <div
                                            className={`p-3 rounded-2xl bg-card/95 shadow-sm ${trialEndingSoon ? "text-warning-500 dark:text-warning-400" : "text-success-500 dark:text-success-400"} mt-0.5`}
                                        >
                                            <Clock3 className="size-5" />
                                        </div>
                                        <div>
                                            <div
                                                className={`text-xs font-black uppercase tracking-[.18em] ${trialEndingSoon ? "text-warning-600 dark:text-warning-400" : "text-success-600 dark:text-success-400"}`}
                                            >
                                                {t(
                                                    "dashboard.free_trial",
                                                    "Free Trial · :days :unit",
                                                    {
                                                        days: subscription.duration_days,
                                                        unit:
                                                            subscription.duration_days ===
                                                            1
                                                                ? "Day"
                                                                : "Days",
                                                    },
                                                )}
                                            </div>
                                            <h2 className="mt-1 text-lg font-black tracking-tight">
                                                {trialDays > 0
                                                    ? t(
                                                          "dashboard.trial_ends_in",
                                                          "Your trial ends in :days :unit",
                                                          {
                                                              days: trialDays,
                                                              unit:
                                                                  trialDays ===
                                                                  1
                                                                      ? "day"
                                                                      : "days",
                                                          },
                                                      )
                                                    : t(
                                                          "dashboard.trial_ends_today",
                                                          "Your trial ends today",
                                                      )}
                                            </h2>
                                            <p className="mt-1 text-sm text-muted-foreground font-medium">
                                                {t(
                                                    "dashboard.trial_access_description",
                                                    "Access to :plan features during your trial. No payment required.",
                                                    { plan: subscription.name },
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                    <Button
                                        asChild
                                        className="w-full shrink-0 rounded-2xl px-6 py-3 text-xs font-bold shadow-md shadow-success-600/20 sm:w-auto"
                                    >
                                        <Link href="/pricing">
                                            {t(
                                                "dashboard.upgrade_pro",
                                                "Upgrade to Pro · :price",
                                                {
                                                    price:
                                                        upgradePriceLabel ??
                                                        "—",
                                                },
                                            )}
                                        </Link>
                                    </Button>
                                </div>
                            )}

                            {/* Expired Banner */}
                            {expired && (
                                <div className="flex flex-col gap-4 rounded-3xl border border-warning-500/20 bg-warning-500/10 p-6 shadow-sm sm:flex-row sm:items-center sm:justify-between text-warning-900 dark:text-warning-100">
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 rounded-2xl bg-card/95 text-warning-500 dark:text-warning-400 shadow-sm mt-0.5">
                                            <ShieldAlert className="size-5" />
                                        </div>
                                        <div>
                                            <div className="text-xs font-black uppercase tracking-[.18em] text-warning-600 dark:text-warning-400">
                                                {subscription?.is_trial
                                                    ? t(
                                                          "dashboard.trial_expired",
                                                          "Trial Expired",
                                                      )
                                                    : t(
                                                          "dashboard.subscription_expired",
                                                          "Subscription Expired",
                                                      )}
                                            </div>
                                            <h2 className="mt-1 text-lg font-black text-foreground">
                                                {t(
                                                    "dashboard.upgrade_continue",
                                                    "Your :plan access has ended.",
                                                    {
                                                        plan:
                                                            subscription?.name ??
                                                            "subscription",
                                                    },
                                                )}
                                            </h2>
                                            <p className="mt-1 text-sm text-muted-foreground font-medium">
                                                {planPriceLabel
                                                    ? t(
                                                          "dashboard.subscription_expired_price_description",
                                                          "Renew or choose another plan. Current plan price: :price.",
                                                          {
                                                              price: planPriceLabel,
                                                          },
                                                      )
                                                    : t(
                                                          "dashboard.subscription_expired_description",
                                                          "Renew or choose another plan to restore access.",
                                                      )}
                                            </p>
                                        </div>
                                    </div>
                                    <Link
                                        href="/pricing"
                                        className="inline-flex shrink-0 items-center justify-center rounded-2xl bg-primary px-6 py-3 text-xs font-bold text-primary-foreground shadow-md shadow-primary/20 transition hover:brightness-105"
                                    >
                                        {t(
                                            "dashboard.view_plans",
                                            "View plans",
                                        )}
                                    </Link>
                                </div>
                            )}

                            {/* Error State */}
                            {error && (
                                <div className="flex flex-col gap-4 rounded-3xl border border-destructive-500/20 bg-destructive-500/10 p-6 shadow-sm sm:flex-row sm:items-center sm:justify-between text-destructive-900 dark:text-destructive-100">
                                    <div>
                                        <div className="text-xs font-black uppercase tracking-[.18em] text-destructive-600 dark:text-destructive-400">
                                            {t(
                                                "dashboard.load_error_title",
                                                "Dashboard data unavailable",
                                            )}
                                        </div>
                                        <p className="mt-1 text-sm text-muted-foreground font-medium">
                                            {t(
                                                "dashboard.load_error",
                                                "We could not refresh your dashboard data. Your previous data, if any, is still shown.",
                                            )}
                                        </p>
                                    </div>
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={load}
                                        className="w-full shrink-0 rounded-2xl px-5 py-3 text-xs font-bold sm:w-auto"
                                    >
                                        <RefreshCw className="size-4" />
                                        {t("common.retry", "Retry")}
                                    </Button>
                                </div>
                            )}

                            {/* Market Briefing */}
                            <section className="relative overflow-hidden rounded-[2rem] border border-border/70 bg-card/95 p-5 shadow-sm sm:p-7">
                                <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_85%_15%,color-mix(in_oklab,var(--primary)_18%,transparent),transparent_34%),radial-gradient(circle_at_20%_100%,color-mix(in_oklab,var(--info)_12%,transparent),transparent_30%)]" />
                                <div className="relative grid gap-7 xl:grid-cols-[minmax(0,1.4fr)_minmax(320px,.6fr)] xl:items-end">
                                    <div>
                                        <div className="flex flex-wrap items-center gap-2 text-[10px] font-black uppercase tracking-[.2em] text-primary">
                                            <span className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1">
                                                <Sparkles className="size-3" />
                                                Market briefing
                                            </span>
                                            <span className="text-muted-foreground">Live snapshot</span>
                                        </div>
                                        <h1 className="mt-4 max-w-3xl text-3xl font-black tracking-[-0.03em] text-foreground sm:text-4xl lg:text-5xl">
                                            Understand the market before you analyze the details.
                                        </h1>
                                        <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
                                            A concise view of market direction, leadership and unusual activity—designed to give you context in seconds.
                                        </p>
                                    </div>
                                    <div className="grid grid-cols-2 gap-3">
                                        <BriefMetric
                                            label="Market tone"
                                            value={briefing.label}
                                            icon={Activity}
                                            tone={briefing.tone === "risk-on" ? "success" : briefing.tone === "risk-off" ? "danger" : "info"}
                                        />
                                        <BriefMetric
                                            label="Data status"
                                            value={data ? `Updated ${new Date(data.updated_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` : "Loading"}
                                            icon={Eye}
                                            tone="info"
                                        />
                                    </div>
                                </div>
                                <div className="relative mt-7 grid gap-3 border-t border-border/70 pt-5 md:grid-cols-3">
                                    <BriefFinding
                                        label="Market read"
                                        value={briefing.description}
                                    />
                                    <BriefFinding
                                        label="Leading asset"
                                        value={briefing.lead ? `${briefing.lead.symbol} ${briefing.lead.change_pct >= 0 ? "+" : ""}${Number(briefing.lead.change_pct).toFixed(2)}%` : "No leader yet"}
                                    />
                                    <BriefFinding
                                        label="Weakest asset"
                                        value={briefing.weak ? `${briefing.weak.symbol} ${Number(briefing.weak.change_pct).toFixed(2)}%` : "No weakness detected"}
                                    />
                                </div>
                                <div className="relative mt-6 flex flex-col gap-2 border-t border-border/70 pt-5 sm:flex-row sm:items-center sm:justify-between">
                                    <div className="min-w-0">
                                        <p className="text-[10px] font-bold uppercase tracking-[0.16em] text-muted-foreground">
                                            {t("dashboard.workspace_label", "Analysis workspace")}
                                        </p>
                                        <p className="mt-1 text-xs text-muted-foreground">
                                            {t("dashboard.workspace_description", "Use the terminal for deeper market analysis, or customize this overview to fit your workflow.")}
                                        </p>
                                    </div>
                                    <div className="flex w-full flex-wrap gap-2 sm:w-auto sm:justify-end">
                                        <Button asChild className="h-9 rounded-xl px-3.5 text-xs font-bold shadow-sm">
                                            <Link href="/trading/BTCUSDT">
                                                <BarChart3 className="size-3.5" />
                                                {t("dashboard.open_terminal", "Open Market Analysis")}
                                            </Link>
                                        </Button>
                                        <Button asChild variant="outline" className="h-9 rounded-xl px-3 text-xs font-semibold">
                                            <Link href="/market-scanner">
                                                <Radar className="size-3.5" />
                                                {t("dashboard.open_scanner", "Market Scanner")}
                                            </Link>
                                        </Button>
                                        <Button type="button" variant="ghost" onClick={load} aria-label={t("common.refresh", "Refresh")} className="h-9 rounded-xl px-3 text-xs font-semibold">
                                            <RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />
                                            {t("common.refresh", "Refresh")}
                                        </Button>
                                        <Button type="button" variant="outline" size="sm" className="h-9 rounded-xl px-3 text-xs font-semibold" onClick={() => {
                                            const next = !compactDensity;
                                            setCompactDensity(next);
                                            try { window.localStorage.setItem("analysis:dashboard-density", next ? "compact" : "comfortable"); } catch {}
                                        }} aria-pressed={compactDensity}>
                                            {compactDensity ? "Comfortable" : "Compact"}
                                        </Button>
                                        <AnalysisWidgetSettings
                                            settings={[
                                                { id: "stats", label: "Workspace metrics", description: "Plan, watchlist, alerts and access status." },
                                                { id: "movers", label: "Market movers", description: "Live gainers, losers and volume leaders." },
                                                { id: "events", label: "Market pulse", description: "Upcoming and recent crypto market events." },
                                            ]}
                                            value={dashboardWidgets}
                                            order={dashboardWidgetOrder}
                                            presets={DASHBOARD_PRESETS}
                                            activePresetId={activeDashboardPreset}
                                            onChange={updateDashboardWidget}
                                            onOrderChange={updateDashboardWidgetOrder}
                                            onPresetChange={applyDashboardPreset}
                                            onReset={resetDashboardWidgets}
                                            label="Customize"
                                        />
                                    </div>
                                </div>
                            </section>


                            <div className={`grid min-w-0 gap-6 xl:grid-cols-3 ${compactDensity ? "gap-3" : "gap-6"}`}>
                                {dashboardWidgets.stats && (
                                    <div
                                        className="min-w-0 xl:col-span-3"
                                        style={{ order: dashboardWidgetPosition("stats") }}
                                    >
                            <div className={`grid gap-5 sm:grid-cols-2 xl:grid-cols-4 ${compactDensity ? "gap-3" : "gap-5"}`}>
                                <Stat
                                    icon={WalletCards}
                                    label={t("dashboard.plan", "Active Plan")}
                                    value={subscription?.name ?? "—"}
                                    sub={
                                        subscription?.active
                                            ? t(
                                                  "dashboard.active_access",
                                                  "Full Access Granted",
                                              )
                                            : expired
                                              ? t(
                                                    "dashboard.expired",
                                                    "Expired",
                                                )
                                              : t(
                                                    "dashboard.not_active",
                                                    "Not active",
                                                )
                                    }
                                    badgeColor="bg-primary-500/10 text-primary-600 dark:text-primary-400 border-primary-500/20"
                                    badge={
                                        subscription?.active
                                            ? t("Active")
                                            : expired
                                              ? t("Expired")
                                              : t("Inactive")
                                    }
                                />
                                <Stat
                                    icon={Star}
                                    label={t(
                                        "dashboard.watchlist",
                                        "Watchlist Items",
                                    )}
                                    value={`${workspace?.watchlist_count ?? 0}`}
                                    sub={
                                        !subscription?.active
                                            ? t(
                                                  "dashboard.subscription_required",
                                                  "Subscription required",
                                              )
                                            : unlimited
                                              ? t(
                                                    "dashboard.unlimited",
                                                    "Unlimited Slots",
                                                )
                                              : `Limit ${limit}`
                                    }
                                    badgeColor="bg-warning-500/10 text-warning-600 dark:text-warning-400 border-warning-500/20"
                                    badge={
                                        unlimited
                                            ? t("Unlimited")
                                            : t("Tracked")
                                    }
                                />
                                <Stat
                                    icon={BellRing}
                                    label={t(
                                        "dashboard.active_alerts",
                                        "Active Price Alerts",
                                    )}
                                    value={`${workspace?.active_alerts ?? 0}`}
                                    sub={t(
                                        "dashboard.triggered_today",
                                        ":count triggered today",
                                        {
                                            count:
                                                workspace?.triggered_today ?? 0,
                                        },
                                    )}
                                    badgeColor="bg-success-500/10 text-success-600 dark:text-success-400 border-success-500/20"
                                    badge={t("Live")}
                                />
                                <Stat
                                    icon={Clock3}
                                    label={t(
                                        "dashboard.access_ends",
                                        "Subscription Expiry",
                                    )}
                                    value={
                                        subscription?.ends_at
                                            ? new Date(
                                                  subscription.ends_at,
                                              ).toLocaleDateString()
                                            : "—"
                                    }
                                    sub={
                                        subscription?.is_trial
                                            ? t(
                                                  "dashboard.trial",
                                                  "Free Trial Mode",
                                              )
                                            : subscription?.active
                                              ? t(
                                                    "dashboard.subscription_period",
                                                    "Active Billing Cycle",
                                                )
                                              : t(
                                                    "dashboard.access_ended",
                                                    "Access ended",
                                                )
                                    }
                                    badgeColor="bg-primary-500/10 text-primary-600 dark:text-primary-400 border-primary-500/20"
                                    badge={
                                        subscription?.active
                                            ? t("Access")
                                            : t("Ended")
                                    }
                                />
                            </div>

                                    </div>
                                )}

                                {dashboardWidgets.movers && (
                                    <div
                                        className="min-w-0 xl:col-span-2"
                                        style={{ order: dashboardWidgetPosition("movers") }}
                                    >
                                        <section className="self-start rounded-3xl border border-border/70 bg-card/90 p-6 shadow-sm transition-shadow hover:shadow-lg sm:p-8">
                                    <div className="border-b border-slate-100 pb-5 dark:border-slate-800 sm:pb-6">
                                        <div className="flex min-w-0 flex-col gap-4 lg:flex-col lg:items-stretch lg:justify-start 2xl:flex-row 2xl:items-center 2xl:justify-between">
                                            <div className="min-w-0 flex-1">
                                                <h2 className="flex min-w-0 items-center gap-2.5 text-base font-black text-foreground">
                                                    <div className="shrink-0 rounded-xl border border-orange-100 bg-orange-50 p-2 text-orange-600 dark:border-orange-500/20 dark:bg-orange-500/10 dark:text-orange-400">
                                                        <Flame className="size-4" />
                                                    </div>
                                                    <span className="min-w-0 truncate">
                                                        {t(
                                                            "dashboard.market_movers",
                                                            "Market Movers & Pulse",
                                                        )}
                                                    </span>
                                                </h2>
                                                <p className="mt-1 max-w-xl text-xs font-medium text-muted-foreground">
                                                    {t(
                                                        "dashboard.market_movers_description",
                                                        "USDT pairs sorted by momentum and trading volume.",
                                                    )}
                                                </p>
                                            </div>

                                            <div className="flex min-w-0 w-full flex-col gap-2 sm:flex-row sm:items-center 2xl:w-auto 2xl:shrink-0">
                                                <div className="flex w-full min-w-0 items-center gap-2 sm:flex-1 2xl:w-auto 2xl:flex-none">
                                                    <Label className="shrink-0 text-[10px] font-black uppercase tracking-[0.16em] text-muted-foreground">
                                                        Provider
                                                    </Label>
                                                    <Select
                                                        value={
                                                            selectedMarketProvider
                                                        }
                                                        onValueChange={
                                                            handleMarketProviderChange
                                                        }
                                                    >
                                                        <SelectTrigger className="h-9 min-w-0 flex-1 rounded-xl text-xs font-bold sm:min-w-[150px] sm:flex-none 2xl:w-[150px]">
                                                            <SelectValue placeholder="Select provider" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {activeMarketProviders.map(
                                                                (item) => (
                                                                    <SelectItem
                                                                        key={
                                                                            item.slug
                                                                        }
                                                                        value={
                                                                            item.slug
                                                                        }
                                                                    >
                                                                        {
                                                                            item.name
                                                                        }
                                                                    </SelectItem>
                                                                ),
                                                            )}
                                                        </SelectContent>
                                                    </Select>
                                                </div>

                                                {/* Interactive Tabs */}
                                                <Tabs
                                                    value={marketTab}
                                                    onValueChange={(value) =>
                                                        setMarketTab(
                                                            value as
                                                                | "gainers"
                                                                | "losers"
                                                                | "volume",
                                                        )
                                                    }
                                                    className="w-full sm:w-auto"
                                                >
                                                    <TabsList className="grid h-auto w-full grid-cols-3 gap-1 rounded-2xl border border-border/70 bg-muted/60 p-1.5 sm:flex sm:w-auto">
                                                        <TabsTrigger
                                                            value="gainers"
                                                            className="min-w-0 rounded-xl px-2.5 py-2 text-xs sm:px-4 data-[state=active]:text-success-600 dark:data-[state=active]:text-success-400"
                                                        >
                                                            <TrendingUp className="size-3.5 shrink-0" />
                                                            <span className="truncate">
                                                                {t("Gainers")}
                                                            </span>
                                                        </TabsTrigger>
                                                        <TabsTrigger
                                                            value="losers"
                                                            className="min-w-0 rounded-xl px-2.5 py-2 text-xs sm:px-4 data-[state=active]:text-destructive-600 dark:data-[state=active]:text-destructive-400"
                                                        >
                                                            <TrendingDown className="size-3.5 shrink-0" />
                                                            <span className="truncate">
                                                                {t("Losers")}
                                                            </span>
                                                        </TabsTrigger>
                                                        <TabsTrigger
                                                            value="volume"
                                                            className="min-w-0 rounded-xl px-2.5 py-2 text-xs sm:px-4 data-[state=active]:text-primary-600 dark:data-[state=active]:text-primary-400"
                                                        >
                                                            <span className="truncate">
                                                                {t("Volume")}
                                                            </span>
                                                        </TabsTrigger>
                                                    </TabsList>
                                                </Tabs>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="mt-6">
                                        <MarketMoverLive
                                            initialMarket={sortedMarket}
                                            sortMode={marketTab}
                                            limit={7}
                                            wsUrl={marketStream?.ws_url ?? null}
                                            wsDriver={
                                                marketStream?.driver ??
                                                marketStream?.provider ??
                                                null
                                            }
                                            provider={marketStream?.provider}
                                        />
                                    </div>
                                </section>
                                    </div>
                                )}

                                {dashboardWidgets.events && (
                                    <div
                                        className={`min-w-0 ${dashboardWidgets.movers ? "xl:col-span-1" : "xl:col-span-3"}`}
                                        style={{ order: dashboardWidgetPosition("events") }}
                                    >
                                        <div className="min-w-0">
                                            <CryptoEvents />
                                        </div>
                                    </div>
                                )}
                            </div>

                            {/* Footer Info */}
                            <div className="flex flex-col sm:flex-row items-center justify-between border-t border-border/70 pt-6 text-xs text-muted-foreground gap-4 font-medium">
                                <div className="flex items-center gap-2.5">
                                    <span className="size-2.5 rounded-full bg-success-500 animate-pulse" />
                                    <span>
                                        {t(
                                            "dashboard.data_refresh",
                                            "Data synchronized at :time",
                                            {
                                                time: data
                                                    ? new Date(
                                                          data.updated_at,
                                                      ).toLocaleTimeString()
                                                    : "—",
                                            },
                                        )}
                                    </span>
                                </div>
                            </div>
                        </>
                    )}
                </div>
            </div>
        </>
    );
}

function DashboardSkeleton() {
    const { t } = useI18n();
    return (
        <div
            className="space-y-6"
            aria-label={t("Loading dashboard")}
            role="status"
        >
            <div className="rounded-3xl border border-border/70 bg-card/95 p-6 shadow-sm">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex items-start gap-4">
                        <Skeleton className="mt-0.5 size-11 rounded-2xl" />
                        <div className="space-y-2">
                            <Skeleton className="h-3 w-28 rounded-full" />
                            <Skeleton className="h-6 w-64 max-w-[70vw] rounded-lg" />
                            <Skeleton className="h-4 w-80 max-w-[80vw] rounded-lg" />
                        </div>
                    </div>
                    <Skeleton className="h-11 w-40 rounded-2xl" />
                </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                {Array.from({ length: 4 }).map((_, index) => (
                    <div
                        key={index}
                        className="rounded-3xl border border-border/70 bg-card/95 p-6 shadow-sm"
                    >
                        <div className="flex items-center justify-between">
                            <Skeleton className="size-12 rounded-2xl" />
                            <Skeleton className="h-5 w-16 rounded-full" />
                        </div>
                        <Skeleton className="mt-5 h-3 w-24 rounded-full" />
                        <Skeleton className="mt-2 h-9 w-28 rounded-lg" />
                        <Skeleton className="mt-2 h-4 w-36 rounded-lg" />
                    </div>
                ))}
            </div>

            <div className="grid gap-6 xl:grid-cols-3">
                <div className="xl:col-span-2 rounded-3xl border border-border/70 bg-card/95 p-6 shadow-sm">
                    <div className="flex items-center justify-between">
                        <div className="space-y-2">
                            <Skeleton className="h-5 w-40 rounded-lg" />
                            <Skeleton className="h-4 w-64 rounded-lg" />
                        </div>
                        <Skeleton className="h-9 w-24 rounded-xl" />
                    </div>
                    <div className="mt-6 space-y-3">
                        {Array.from({ length: 7 }).map((_, index) => (
                            <div
                                key={index}
                                className="flex items-center gap-3 rounded-2xl border border-border/70 p-3"
                            >
                                <Skeleton className="size-9 rounded-full" />
                                <div className="flex-1 space-y-2">
                                    <Skeleton className="h-3 w-24 rounded-full" />
                                    <Skeleton className="h-3 w-32 rounded-full" />
                                </div>
                                <Skeleton className="h-4 w-20 rounded-lg" />
                                <Skeleton className="h-4 w-16 rounded-lg" />
                            </div>
                        ))}
                    </div>
                </div>

                <div className="rounded-3xl border border-border/70 bg-card/95 p-6 shadow-sm">
                    <Skeleton className="h-5 w-36 rounded-lg" />
                    <Skeleton className="mt-2 h-4 w-48 rounded-lg" />
                    <div className="mt-6 space-y-4">
                        {Array.from({ length: 5 }).map((_, index) => (
                            <div key={index} className="flex gap-3">
                                <Skeleton className="size-9 shrink-0 rounded-xl" />
                                <div className="flex-1 space-y-2">
                                    <Skeleton className="h-3 w-3/4 rounded-full" />
                                    <Skeleton className="h-3 w-1/2 rounded-full" />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            <div className="flex items-center justify-between border-t border-border/70 pt-6">
                <Skeleton className="h-4 w-52 rounded-lg" />
                <Skeleton className="h-4 w-40 rounded-lg" />
            </div>
        </div>
    );
}

function Stat({
    icon: Icon,
    label,
    value,
    sub,
    badgeColor,
    badge,
}: {
    icon: LucideIcon;
    label: string;
    value: string;
    sub: string;
    badgeColor: string;
    badge?: string;
}) {
    const { t } = useI18n();
    return (
        <div className="min-w-0 rounded-3xl border border-border/70 bg-card p-5 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-md sm:p-6">
            <div className="flex items-center justify-between">
                <div
                    className={`flex h-12 w-12 items-center justify-center rounded-2xl border shadow-sm ${badgeColor}`}
                >
                    <Icon className="size-6" />
                </div>
                <span className="rounded-full border border-border/70 bg-muted px-3 py-1 text-[10px] font-black uppercase tracking-wider text-muted-foreground">
                    {badge ?? t("Status")}
                </span>
            </div>
            <div className="mt-5 text-[11px] font-black uppercase tracking-[.14em] text-muted-foreground">
                {label}
            </div>
            <div className="mt-1 text-3xl font-black text-foreground tracking-tight">
                {value}
            </div>
            <div className="mt-2 text-xs font-semibold text-muted-foreground">
                {sub}
            </div>
        </div>
    );
}

function BriefMetric({
    label,
    value,
    icon: Icon,
    tone,
}: {
    label: string;
    value: string;
    icon: LucideIcon;
    tone: "success" | "danger" | "info";
}) {
    const toneClass = {
        success: "border-success/20 bg-success/10 text-success",
        danger: "border-destructive/20 bg-destructive/10 text-destructive",
        info: "border-info/20 bg-info/10 text-info",
    }[tone];
    return (
        <div className="rounded-2xl border border-border/70 bg-background/60 p-4 backdrop-blur-sm">
            <div className={`mb-3 flex size-9 items-center justify-center rounded-xl border ${toneClass}`}>
                <Icon className="size-4" />
            </div>
            <div className="text-[10px] font-black uppercase tracking-[.16em] text-muted-foreground">{label}</div>
            <div className="mt-1 text-sm font-black text-foreground">{value}</div>
        </div>
    );
}

function BriefFinding({ label, value }: { label: string; value: string }) {
    return (
        <div className="min-w-0 rounded-2xl border border-border/60 bg-background/45 px-4 py-3">
            <div className="text-[10px] font-black uppercase tracking-[.16em] text-muted-foreground">{label}</div>
            <div className="mt-1 line-clamp-2 text-sm font-bold leading-5 text-foreground">{value}</div>
        </div>
    );
}

Dashboard.layout = { breadcrumbs: [{ title: "Dashboard", href: dashboard() }] };