"use client";

import clsx from "clsx";
import dynamic from "next/dynamic";
import Link from "next/link";
import {
  Activity,
  BookOpenCheck,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Crown,
  GraduationCap,
  Menu,
  MessageSquare,
  Search,
  UserRound,
  Users,
} from "lucide-react";
import { Fragment, memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
import type { CityListItem, ProAccessState, ScanOpportunityRow } from "@/lib/dashboard-types";
import { getInitialLocaleFromNavigator } from "@/lib/i18n";
import { isBrowserLocalFullAccess } from "@/lib/local-dev-access";
import { getSupabaseBrowserClient, hasSupabasePublicEnv } from "@/lib/supabase/client";
import { sortRowsByUserTime } from "@/components/dashboard/scan-terminal/decision-utils";
import { ProductAccessRequired } from "@/components/dashboard/scan-terminal/ProductAccessRequired";
import {
  type ContinentGroup,
  buildContinentGroups,
  GAP_COLOR_MAP,
  getDefaultExpanded,
  getGapColor,
  getSignalLabel,
  getSignalState,
  getCityRegion,
  REGIONS,
  getDefaultRegion,
} from "@/components/dashboard/scan-terminal/continent-grouping";
import { MobileCityCard } from "@/components/dashboard/scan-terminal/MobileCityCard";
import { MobileRegionTabs } from "@/components/dashboard/scan-terminal/MobileRegionTabs";
import { useScanTerminalQuery } from "@/components/dashboard/scan-terminal/use-scan-terminal-query";
import {
  useScanTerminalTheme,
  useUserLocalClock,
} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
import { ScanTerminalLoadingScreen } from "@/components/dashboard/scan-terminal/ScanTerminalShellParts";
import { scanRootClass } from "@/components/dashboard/scan-root-styles";
import { useRelativeTime } from "@/hooks/useRelativeTime";
import { Panel } from "@/components/dashboard/scan-terminal/Panel";
import { UsageGuideDashboard } from "@/components/dashboard/scan-terminal/UsageGuideDashboard";
import {
  LiveTemperatureThresholdChart,
  clearCityDetailCache,
  preloadTemperatureChartCanvas,
} from "@/components/dashboard/scan-terminal/LiveTemperatureThresholdChart";
import { KoyfinRowsTable } from "@/components/dashboard/scan-terminal/KoyfinRowsTable";
import { rowName, pct, money, temp, edgeClass } from "@/components/dashboard/scan-terminal/utils";
import { CitySelectorDropdown } from "@/components/dashboard/scan-terminal/CitySelectorDropdown";
import { GridLayoutSelector } from "@/components/dashboard/scan-terminal/GridLayoutSelector";
import {
  UserFeedbackModal,
  type FeedbackDraft,
} from "@/components/dashboard/scan-terminal/UserFeedbackModal";
import { UserFeedbackStatusButton } from "@/components/dashboard/scan-terminal/UserFeedbackStatusButton";
import { UpdateAnnouncementButton } from "@/components/dashboard/scan-terminal/UpdateAnnouncementButton";
import {
  mergeAccessStateWithAuthPayload,
  type AuthProfilePayload,
} from "@/components/dashboard/scan-terminal/terminal-access-state";
import {
  createAuthProfileRequestCache,
  loadTerminalAuthProfile,
} from "@/components/dashboard/scan-terminal/terminal-auth-bootstrap";
import { buildAuthMePath } from "@/lib/auth-snapshot";
import {
  cityListItemsToScanRows,
  mergeScanRowsWithCityFallbackRows,
  readCachedCityList,
  writeCachedCityList,
} from "@/components/dashboard/scan-terminal/city-fallback-rows";
import { markAnalyticsOnce, trackAppEvent } from "@/lib/app-analytics";
import { STATIC_CITY_LIST } from "@/lib/static-cities";
import { recordTrialValueReplay } from "@/lib/trial-value-replay";

const TrainingDashboard = dynamic(
  () =>
    import("@/components/dashboard/scan-terminal/TrainingDashboard").then(
      (mod) => mod.TrainingDashboard,
    ),
  {
    loading: () => (
      <div className="flex min-h-0 flex-1 items-center justify-center text-xs font-semibold text-slate-400">
        Loading analytics...
      </div>
    ),
  },
);

const ONLINE_USERS_REFRESH_MS = 5 * 60_000;
const TERMINAL_NAV_ITEMS = [
  { key: "thresholds", Icon: Activity, labelEn: "Decision", labelZh: "天气决策" },
  { key: "training", Icon: GraduationCap, labelEn: "Training", labelZh: "训练数据" },
  { key: "guide", Icon: BookOpenCheck, labelEn: "Guide", labelZh: "使用指南" },
] as const;
const AUTH_PROFILE_REQUEST_TIMEOUT_MS = 4500;
const AUTH_DECISION_RECOVERY_MS = 10_000;
const AUTH_PROFILE_RETRY_INITIAL_DELAY_MS = 5_000;
const AUTH_PROFILE_RETRY_POLL_MS = 30_000;
const ACTIVE_ACCESS_CACHE_KEY = "polyweather_terminal_active_access_v1";
const ACTIVE_ACCESS_CACHE_TTL_MS = 6 * 60 * 60 * 1000;

function createEmptyAccess(loading = true): ProAccessState {
  return {
    loading,
    authenticated: false,
    userId: null,
    subscriptionActive: false,
    subscriptionPlanCode: null,
    subscriptionExpiresAt: null,
    subscriptionTotalExpiresAt: null,
    subscriptionQueuedDays: 0,
    points: 0,
    error: null,
  };
}

function createLocalAccess(): ProAccessState {
  return {
    loading: false,
    authenticated: true,
    userId: "local-dev",
    subscriptionActive: true,
    subscriptionPlanCode: "local-full-access",
    subscriptionExpiresAt: "2099-12-31T23:59:59Z",
    subscriptionTotalExpiresAt: "2099-12-31T23:59:59Z",
    subscriptionQueuedDays: 0,
    points: 999_999,
    error: null,
  };
}

function isFutureAccessExpiry(value: string | null | undefined, now = Date.now()) {
  if (!value) return true;
  const ts = Date.parse(value);
  return Number.isFinite(ts) && ts > now;
}

function readCachedActiveAccess(now = Date.now()): ProAccessState | null {
  if (typeof window === "undefined") return null;
  try {
    const raw = window.localStorage.getItem(ACTIVE_ACCESS_CACHE_KEY);
    if (!raw) return null;
    const cached = JSON.parse(raw);
    const access = cached?.access as Partial<ProAccessState> | undefined;
    const ts = Number(cached?.ts || 0);
    if (!access?.authenticated || !access.subscriptionActive) return null;
    if (!ts || now - ts < 0 || now - ts > ACTIVE_ACCESS_CACHE_TTL_MS) return null;
    if (!isFutureAccessExpiry(access.subscriptionTotalExpiresAt || access.subscriptionExpiresAt, now)) {
      return null;
    }
    return {
      loading: false,
      authenticated: true,
      userId: access.userId ?? null,
      subscriptionActive: true,
      subscriptionPlanCode: access.subscriptionPlanCode ?? null,
      subscriptionExpiresAt: access.subscriptionExpiresAt ?? null,
      subscriptionTotalExpiresAt:
        access.subscriptionTotalExpiresAt ?? access.subscriptionExpiresAt ?? null,
      subscriptionQueuedDays: Number(access.subscriptionQueuedDays ?? 0),
      points: Number(access.points ?? 0),
      error: null,
    };
  } catch {
    return null;
  }
}

function writeCachedActiveAccess(access: ProAccessState) {
  if (typeof window === "undefined") return;
  if (!access.authenticated || !access.subscriptionActive) return;
  if (!isFutureAccessExpiry(access.subscriptionTotalExpiresAt || access.subscriptionExpiresAt)) return;
  try {
    window.localStorage.setItem(
      ACTIVE_ACCESS_CACHE_KEY,
      JSON.stringify({
        ts: Date.now(),
        access: {
          authenticated: access.authenticated,
          userId: access.userId,
          subscriptionActive: access.subscriptionActive,
          subscriptionPlanCode: access.subscriptionPlanCode,
          subscriptionExpiresAt: access.subscriptionExpiresAt,
          subscriptionTotalExpiresAt: access.subscriptionTotalExpiresAt,
          subscriptionQueuedDays: access.subscriptionQueuedDays,
          points: access.points,
        },
      }),
    );
  } catch {}
}

function createTransientAccess(error: unknown): ProAccessState {
  return {
    ...createEmptyAccess(true),
    authenticated: true,
    error: String(error),
  };
}

const TERM = {
  cityThreshold: { en: "City / Threshold", zh: "城市 / 阈值" },
  live: { en: "Live", zh: "实测" },
  deb: { en: "DEB", zh: "DEB" },
  mkt: { en: "Mkt", zh: "信号" },
  edge: { en: "Edge", zh: "优势" },
  liq: { en: "Liq", zh: "流动性" },
  signal: { en: "Signal", zh: "信号" },
  searchPlaceholder: { en: "Search city, threshold, station, or signal", zh: "搜索城市、阈值、站点或信号" },
  weatherThresholds: { en: "Weather Decisions", zh: "天气决策" },
  selectedThresholdMonitor: { en: "Selected Threshold Monitor", zh: "选中阈值监控" },
  probabilityDistribution: { en: "Probability Distribution", zh: "概率分布" },
  signalList: { en: "Signal List", zh: "信号列表" },
  watchlist: { en: "Watchlist", zh: "观察列表" },
  rows: { en: "Rows", zh: "行数" },
  avgEdge: { en: "Avg Edge", zh: "平均优势" },
  liquidity: { en: "Liquidity", zh: "流动性" },
  intradayPerformance: { en: "Intraday Performance", zh: "日内表现" },
  spread: { en: "Spread", zh: "价差" },
  model: { en: "Model", zh: "模型" },
  noData: { en: "No data", zh: "无数据" },
  noDistributionData: { en: "No distribution data", zh: "无分布数据" },
  selectThreshold: {
    en: "Select a weather threshold to inspect model edge, signal price, and live evidence.",
    zh: "选择天气阈值以查看模型优势、信号价格和实况证据。",
  },
  signInToContinue: { en: "Sign in to continue", zh: "请先登录" },
  signInHint: {
    en: "The terminal is only available to registered users. Please sign in or create an account.",
    zh: "决策台仅对注册用户开放。请登录或创建账号。",
  },
  logIn: { en: "Log in", zh: "登录" },
  createAccount: { en: "Create an account", zh: "注册账号" },
  learnAbout: { en: "Learn about PolyWeather", zh: "了解 PolyWeather" },
  proAccessRequired: { en: "Pro subscription required", zh: "需要开通 Pro" },
  proDesc: {
    en: "The PolyWeather terminal is a paid product. Subscribe to unlock real-time weather-signal intelligence.",
    zh: "PolyWeather 决策台为付费产品。订阅以解锁实时天气信号情报。",
  },
  subscriptionTerms: {
    en: "Billed monthly. Cancel anytime. Payment via USDC on Polygon.",
    zh: "按月计费，随时可取消。通过 Polygon 链 USDC 支付。",
  },
  month: { en: "/ month", zh: "/ 月" },
  subscribeNow: { en: "View Pro plans", zh: "查看订阅方案" },
  subscribePrompt: {
    en: "You need an active subscription to access the terminal.",
    zh: "你需要开通有效订阅才能访问决策台。",
  },
  backToProduct: { en: "Back to product overview", zh: "返回产品介绍页" },
  dashboard: { en: "PolyWeather Terminal", zh: "PolyWeather 天气决策台" },
  refresh: { en: "Refresh", zh: "刷新" },
  switchLang: { en: "Switch to Chinese", zh: "切换到英文" },
  globalWeatherFactors: { en: "Global Weather Factors", zh: "全球天气因子" },
  heat: { en: "Heat", zh: "高温风险" },
  active: { en: "Active", zh: "活跃" },
  watch: { en: "Watch", zh: "观察" },
  tradable: { en: "Tradable", zh: "可交易" },
  primary: { en: "Primary", zh: "主信号" },
  ai: { en: "AI", zh: "AI" },
  closed: { en: "Closed", zh: "已关闭" },
} as const;

const MAX_TERMINAL_GRID_COLS = 3;
const MAX_TERMINAL_GRID_ROWS = 2;
const MAX_TERMINAL_CHARTS = 6;
const MOBILE_TERMINAL_CHARTS = 1;
const DEFAULT_TERMINAL_GRID_SIDE = 2;
const TERMINAL_SLOTS_STORAGE_KEY = "polyweather_terminal_slots";

function clampGridDimension(value: number, max: number) {
  if (!Number.isFinite(value)) return DEFAULT_TERMINAL_GRID_SIDE;
  return Math.max(1, Math.min(max, Math.floor(value)));
}

function clampGridCols(value: number) {
  return clampGridDimension(value, MAX_TERMINAL_GRID_COLS);
}

function clampGridRows(value: number) {
  return clampGridDimension(value, MAX_TERMINAL_GRID_ROWS);
}

function getStoredGridSide(key: string, max: number) {
  if (typeof window === "undefined") return DEFAULT_TERMINAL_GRID_SIDE;
  try {
    const raw = localStorage.getItem(key);
    if (!raw) return DEFAULT_TERMINAL_GRID_SIDE;
    return clampGridDimension(parseInt(raw, 10), max);
  } catch {}
  return DEFAULT_TERMINAL_GRID_SIDE;
}

function getSlotCount(cols: number, rows: number) {
  return Math.min(MAX_TERMINAL_CHARTS, clampGridCols(cols) * clampGridRows(rows));
}

function normalizeSlotList(slots: Array<string | null>, totalSlots: number) {
  if (slots.length === totalSlots) return slots;
  if (slots.length > totalSlots) return slots.slice(0, totalSlots);
  return [...slots, ...Array(totalSlots - slots.length).fill(null)];
}

function readStoredTerminalSlots(totalSlots = MAX_TERMINAL_CHARTS) {
  const emptySlots = Array(totalSlots).fill(null) as Array<string | null>;
  if (typeof window === "undefined") {
    return { slots: emptySlots, hasPersistedSlots: false };
  }
  try {
    const stored = localStorage.getItem(TERMINAL_SLOTS_STORAGE_KEY);
    if (stored === null) return { slots: emptySlots, hasPersistedSlots: false };
    const parsed = JSON.parse(stored);
    if (!Array.isArray(parsed)) return { slots: emptySlots, hasPersistedSlots: true };
    const normalized = parsed.map((value) => {
      const text = String(value || "").toLowerCase().trim();
      return text || null;
    });
    return {
      slots: normalizeSlotList(normalized, totalSlots),
      hasPersistedSlots: true,
    };
  } catch {
    return { slots: emptySlots, hasPersistedSlots: false };
  }
}

function shouldAutofillInitialSlots({
  filteredRegionRows,
  hasPersistedSlots,
  slots,
}: {
  filteredRegionRows: ScanOpportunityRow[];
  hasPersistedSlots: boolean;
  slots: Array<string | null>;
}) {
  return (
    !hasPersistedSlots &&
    filteredRegionRows.length > 0 &&
    slots.every((slot) => slot === null)
  );
}

function t(key: keyof typeof TERM, isEn: boolean) {
  return isEn ? TERM[key].en : TERM[key].zh;
}

function decisionLabel(row?: ScanOpportunityRow | null) {
  const raw =
    row?.ai_decision ||
    row?.v4_metar_decision ||
    row?.action ||
    row?.signal_status ||
    "";
  const value = String(raw || "").toLowerCase();
  if (value.includes("approve")) return "Approve";
  if (value.includes("veto")) return "Veto";
  if (value.includes("watch")) return "Watch";
  if (value.includes("downgrade")) return "Downgrade";
  if (row?.tradable) return "Tradable";
  return "Monitor";
}

function CityRegionList({
  isEn,
  rows,
  selectedCity,
  onSelectCity,
  slots = [],
  activeSlotIndex = 0,
}: {
  isEn: boolean;
  rows: ScanOpportunityRow[];
  selectedCity: string | null;
  onSelectCity: (city: string) => void;
  slots?: Array<string | null>;
  activeSlotIndex?: number;
}) {
  const cities = useMemo(() => {
    const seen = new Set<string>();
    const result: { city: string; name: string; localTime: string | null }[] = [];
    rows.forEach((row) => {
      const key = String(row.city || "").toLowerCase();
      if (seen.has(key)) return;
      seen.add(key);
      result.push({
        city: key,
        name: rowName(row),
        localTime: row.local_time || null,
      });
    });
    return result;
  }, [rows]);

  return (
    <Panel title={isEn ? "Cities" : "城市"}>
      <div className="divide-y divide-slate-100 max-h-[calc(100vh-140px)] overflow-y-auto">
        {cities.map(({ city, name, localTime }) => {
          const isActive = selectedCity === city;
          const displaySlotIndices = slots
            .map((s, idx) => (s === city ? idx : -1))
            .filter((idx) => idx !== -1);
          
          return (
            <button
              key={city}
              type="button"
              onClick={() => onSelectCity(city)}
              className={clsx(
                "flex w-full items-center justify-between px-3 py-2 text-left hover:bg-blue-50/70 transition-colors",
                isActive && "bg-blue-50 border-l-2 border-blue-500 pl-2.5",
              )}
            >
              <div className="min-w-0 flex-1">
                <div className="text-[12px] font-bold text-slate-800 truncate">{name}</div>
                <div className="text-[11px] text-slate-400">{localTime}</div>
              </div>
              
              {/* Slot indicators */}
              {displaySlotIndices.length > 0 && (
                <div className="flex gap-0.5 ml-2">
                  {displaySlotIndices.map((idx) => (
                    <span
                      key={idx}
                      className={clsx(
                        "grid h-4 w-4 place-items-center rounded-full text-[9px] font-bold",
                        idx === activeSlotIndex
                          ? "bg-blue-500 text-white"
                          : "bg-slate-200 text-slate-600"
                      )}
                      title={isEn ? `Slot ${idx + 1}` : `槽位 ${idx + 1}`}
                    >
                      {idx + 1}
                    </span>
                  ))}
                </div>
              )}
            </button>
          );
        })}
      </div>
    </Panel>
  );
}

function EmptySlotCard({
  slotIndex,
  isActive,
  isEn,
  onSelectSlot,
  onOpenSearch,
}: {
  slotIndex: number;
  isActive: boolean;
  isEn: boolean;
  onSelectSlot: () => void;
  onOpenSearch: () => void;
}) {
  return (
    <div
      onClick={() => {
        onSelectSlot();
        onOpenSearch();
      }}
      className={clsx(
        "flex flex-col items-center justify-center h-full rounded-[4px] border-2 border-dashed p-6 cursor-pointer bg-slate-50/50 transition-all",
        isActive
          ? "border-blue-500 bg-blue-50/10 ring-2 ring-blue-500/20"
          : "border-slate-300 hover:border-slate-400 hover:bg-slate-50/80"
      )}
    >
      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-400 mb-2">
        <span className="text-xl font-bold">+</span>
      </div>
      <div className="text-[12px] font-bold text-slate-700 mb-1">
        {isEn ? `Slot ${slotIndex + 1}: Empty` : `槽位 ${slotIndex + 1}: 空白`}
      </div>
      <div className="text-[10px] text-slate-400 text-center mb-3 max-w-[180px]">
        {isEn
          ? "Click to choose a city weather chart for this slot."
          : "点击为该槽位选择一个城市天气图表。"}
      </div>
      <button
        type="button"
        className="text-[11px] font-semibold text-white px-3 py-1.5 rounded bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm outline-none"
      >
        {isEn ? "Choose City..." : "选择城市..."}
      </button>
    </div>
  );
}

function LoadingSlotCard({
  city,
  isActive,
  isEn,
  onSelectSlot,
}: {
  city: string;
  isActive: boolean;
  isEn: boolean;
  onSelectSlot: () => void;
}) {
  const cityLabel = city
    .split(/[-_\s]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ") || city;

  return (
    <div
      onClick={onSelectSlot}
      className={clsx(
        "relative flex h-full min-h-0 flex-col overflow-hidden rounded-[4px] border bg-white cursor-default",
        isActive ? "border-blue-500 ring-2 ring-blue-500/20 shadow-md z-10" : "border-[#d2d9e2]",
      )}
    >
      <div className="flex h-9 shrink-0 items-center justify-between border-b border-slate-200 px-3">
        <div className="flex min-w-0 items-center gap-2 text-[11px] font-bold text-slate-600">
          <span className="h-2 w-2 animate-pulse rounded-full bg-blue-500" />
          <span className="truncate">{cityLabel}</span>
          <span className="text-slate-300">·</span>
          <span className="text-slate-400">{isEn ? "Loading chart" : "加载图表"}</span>
        </div>
        <span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-200 border-t-blue-500" />
      </div>
      <div className="relative min-h-0 flex-1 overflow-hidden bg-white">
        <div className="absolute inset-x-3 bottom-7 top-5 rounded-sm border border-slate-100">
          {Array.from({ length: 6 }).map((_, index) => (
            <span
              key={`h-${index}`}
              className="absolute left-0 right-0 border-t border-dashed border-sky-100"
              style={{ top: `${(index / 5) * 100}%` }}
            />
          ))}
          {Array.from({ length: 7 }).map((_, index) => (
            <span
              key={`v-${index}`}
              className="absolute bottom-0 top-0 border-l border-dashed border-sky-100"
              style={{ left: `${(index / 6) * 100}%` }}
            />
          ))}
          <div className="absolute left-8 right-8 top-1/3 h-10 animate-pulse rounded bg-gradient-to-r from-slate-100 via-blue-100 to-slate-100" />
          <div className="absolute inset-y-0 -left-1/3 w-1/3 animate-[pulse_1.2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/80 to-transparent" />
        </div>
      </div>
    </div>
  );
}

const TerminalSidebar = memo(function TerminalSidebar({
  activeNavKey,
  isEn,
  onFeedbackClick,
  onSelectNav,
}: {
  activeNavKey: string;
  isEn: boolean;
  onFeedbackClick: () => void;
  onSelectNav: (key: string) => void;
}) {
  const [navExpanded, setNavExpanded] = useState(false);

  return (
    <aside
      className={clsx(
        "flex shrink-0 flex-col bg-white border-r border-[#d2d9e2] py-3 text-slate-500 transition-colors duration-150",
        navExpanded ? "w-[172px] items-start px-3" : "w-[52px] items-center gap-2",
      )}
    >
      <div className={clsx(
        "flex items-center w-full",
        navExpanded ? "gap-3 mb-3 px-1" : "justify-center mb-2",
      )}>
        <Link
          href="/"
          className="block h-7 w-7 shrink-0 overflow-hidden rounded transition hover:opacity-90"
          title="PolyWeather"
        >
          <img src="/apple-touch-icon.png" alt="PolyWeather" className="h-full w-full object-cover" />
        </Link>
        {navExpanded && (
          <span className="text-sm font-black text-slate-800 tracking-tight truncate">
            PolyWeather
          </span>
        )}
      </div>

      <button
        type="button"
        onClick={() => setNavExpanded((prev) => !prev)}
        className={clsx(
          "flex items-center gap-3 transition-colors hover:text-slate-800",
          navExpanded
            ? "w-full h-8 px-1 mb-2"
            : "grid h-9 w-full place-items-center mb-2",
        )}
      >
        {navExpanded ? (
          <>
            <ChevronLeft size={14} />
            <span className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
              {isEn ? "Collapse" : "收起"}
            </span>
          </>
        ) : (
          <Menu size={18} />
        )}
      </button>

      {TERMINAL_NAV_ITEMS.map(({ key, Icon, labelEn, labelZh }) => {
        const isActive = activeNavKey === key;
        return (
          <button
            key={key}
            type="button"
            onClick={() => onSelectNav(key)}
            className={clsx(
              "flex items-center gap-3 transition-colors rounded",
              navExpanded
                ? "w-full h-9 px-2 text-left"
                : "grid h-9 w-full place-items-center border-l-4",
              isActive
                ? navExpanded
                  ? "bg-blue-50 text-blue-600 font-bold"
                  : "border-blue-500 bg-blue-50/50 text-blue-600"
                : navExpanded
                  ? "hover:bg-slate-50 hover:text-slate-900"
                  : "border-transparent hover:bg-slate-50 hover:text-slate-700",
            )}
            title={isEn ? labelEn : labelZh}
          >
            <Icon size={16} className="shrink-0" />
            {navExpanded && (
              <span className="text-xs font-semibold whitespace-nowrap">
                {isEn ? labelEn : labelZh}
              </span>
            )}
          </button>
        );
      })}

      <div className={clsx("mt-auto w-full border-t border-slate-200 pt-2", navExpanded ? "" : "px-0")}>
        <button
          type="button"
          onClick={onFeedbackClick}
          className={clsx(
            "flex items-center gap-3 rounded text-slate-500 transition-colors hover:bg-slate-50 hover:text-blue-700",
            navExpanded ? "h-9 w-full px-2 text-left" : "grid h-9 w-full place-items-center border-l-4 border-transparent",
          )}
          title={isEn ? "Feedback / Bug" : "反馈 / Bug"}
        >
          <MessageSquare size={16} className="shrink-0" />
          {navExpanded && (
            <span className="text-xs font-semibold whitespace-nowrap">
              {isEn ? "Feedback" : "反馈 / Bug"}
            </span>
          )}
        </button>
      </div>
    </aside>
  );
});

function PolyWeatherTerminal({
  generatedText,
  isEn,
  locale,
  onTerminalActivated,
  onRefresh,
  refreshing,
  rows,
  selectedRow,
  setSelectedRow,
  toggleLocale,
  isTrialTerminalAccess,
  trialSubscriptionExpiresAt,
  trialUserId,
  userLocalTime,
  searchQuery,
  setSearchQuery,
  searchInputRef,
  selectedCity,
  setSelectedCity,
  selectedRegionKey,
  setSelectedRegionKey,
  visibleRegions,
  toggleRegion,
  terminalActivationRefreshKey,
}: {
  generatedText: string;
  isEn: boolean;
  locale: "zh-CN" | "en-US";
  onTerminalActivated: () => void;
  onRefresh: () => void;
  refreshing: boolean;
  rows: ScanOpportunityRow[];
  selectedRow: ScanOpportunityRow | null;
  setSelectedRow: (row: ScanOpportunityRow) => void;
  toggleLocale: () => void;
  isTrialTerminalAccess: boolean;
  trialSubscriptionExpiresAt: string | null;
  trialUserId: string | null;
  userLocalTime: string;
  searchQuery: string;
  setSearchQuery: (val: string) => void;
  searchInputRef: React.RefObject<HTMLInputElement | null>;
  selectedCity: string | null;
  setSelectedCity: (city: string | null) => void;
  selectedRegionKey: string;
  setSelectedRegionKey: (key: string) => void;
  visibleRegions: Set<string>;
  toggleRegion: (key: string) => void;
  terminalActivationRefreshKey: number;
}) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const activeEl = document.activeElement;
      const isInputFocused =
        activeEl &&
        (activeEl.tagName === "INPUT" ||
          activeEl.tagName === "TEXTAREA" ||
          (activeEl instanceof HTMLElement && activeEl.isContentEditable));
      if (e.key === "/" && !isInputFocused) {
        e.preventDefault();
        searchInputRef.current?.focus();
        searchInputRef.current?.select();
      }
      if (e.key === "Escape" && activeEl === searchInputRef.current) {
        setSearchQuery("");
        searchInputRef.current?.blur();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [searchInputRef, setSearchQuery]);
  const [activeNavKey, setActiveNavKey] = useState<string>("thresholds");
  const previousActiveNavKeyRef = useRef(activeNavKey);
  const [onlineCount, setOnlineCount] = useState<number | null>(null);
  const [feedbackDraft, setFeedbackDraft] = useState<FeedbackDraft | null>(null);
  const [feedbackRefreshKey, setFeedbackRefreshKey] = useState(0);
  const trialExpiryMs = Date.parse(String(trialSubscriptionExpiresAt || ""));
  const trialHoursLeft = Number.isFinite(trialExpiryMs)
    ? Math.max(0, Math.ceil((trialExpiryMs - Date.now()) / 3_600_000))
    : null;
  const trialUpgradeLabel = isEn
    ? trialHoursLeft != null
      ? `Trial ${trialHoursLeft}h left`
      : "Trial access"
    : trialHoursLeft != null
      ? `试用剩 ${trialHoursLeft} 小时`
      : "试用中";
  const handleSelectNav = useCallback((key: string) => {
    setActiveNavKey(key);
  }, []);

  useEffect(() => {
    if (activeNavKey !== "thresholds") return;
    void preloadTemperatureChartCanvas();
  }, [activeNavKey]);

  useEffect(() => {
    const previousActiveNavKey = previousActiveNavKeyRef.current;
    previousActiveNavKeyRef.current = activeNavKey;
    if (activeNavKey !== "thresholds" || previousActiveNavKey === "thresholds") return;
    onTerminalActivated();
  }, [activeNavKey, onTerminalActivated]);

  useEffect(() => {
    const fetchOnline = () => {
      if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
      fetch("/api/ops/online-users", { headers: { Accept: "application/json" } })
        .then((r) => (r.ok ? r.json() : null))
        .then((d) => { if (d?.online != null) setOnlineCount(d.online); })
        .catch(() => {});
    };
    fetchOnline();
    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible") fetchOnline();
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    const id = setInterval(fetchOnline, ONLINE_USERS_REFRESH_MS);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      clearInterval(id);
    };
  }, []);

  const [gridCols, setGridCols] = useState<number>(() => {
    return getStoredGridSide("polyweather_terminal_grid_cols", MAX_TERMINAL_GRID_COLS);
  });

  const [gridRows, setGridRows] = useState<number>(() => {
    return getStoredGridSide("polyweather_terminal_grid_rows", MAX_TERMINAL_GRID_ROWS);
  });

  const totalSlots = getSlotCount(gridCols, gridRows);

  const hasPersistedSlots = useRef(false);
  const [slots, setSlots] = useState<Array<string | null>>(() => {
    const stored = readStoredTerminalSlots();
    hasPersistedSlots.current = stored.hasPersistedSlots;
    return stored.slots;
  });
  const [activeSlotIndex, setActiveSlotIndex] = useState<number>(0);
  const [maximizedSlotIndex, setMaximizedSlotIndex] = useState<number | null>(null);
  const [activeSearchSlotIndex, setActiveSearchSlotIndex] = useState<number | null>(null);
  const visibleSlots = useMemo(() => slots.slice(0, totalSlots), [slots, totalSlots]);

  const openTerminalFeedback = useCallback(() => {
    setFeedbackDraft({
      category: "bug",
      source: "terminal",
      context: {
        source: "terminal_sidebar",
        active_nav: activeNavKey,
        locale,
        grid: `${gridCols}x${gridRows}`,
        active_slot_index: activeSlotIndex,
        maximized_slot_index: maximizedSlotIndex,
        visible_slots: visibleSlots.filter(Boolean),
        selected_city: selectedCity || "",
        selected_region: selectedRegionKey,
      },
    });
  }, [
    activeNavKey,
    activeSlotIndex,
    gridCols,
    gridRows,
    locale,
    maximizedSlotIndex,
    selectedCity,
    selectedRegionKey,
    visibleSlots,
  ]);

  const openChartFeedback = useCallback((context: Record<string, unknown>) => {
    setFeedbackDraft({
      category: "bug",
      source: "chart",
      context: {
        ...context,
        active_nav: activeNavKey,
        locale,
        grid: `${gridCols}x${gridRows}`,
      },
    });
  }, [activeNavKey, gridCols, gridRows, locale]);

  const handleFeedbackSubmitted = useCallback(() => {
    setFeedbackRefreshKey((value) => value + 1);
  }, []);

  const handleSetGridSize = (cols: number, rows: number) => {
    const safeCols = clampGridCols(cols);
    const safeRows = clampGridRows(rows);
    const nextTotalSlots = getSlotCount(safeCols, safeRows);
    
    setGridCols(safeCols);
    setGridRows(safeRows);
    
    try {
      localStorage.setItem("polyweather_terminal_grid_cols", String(safeCols));
      localStorage.setItem("polyweather_terminal_grid_rows", String(safeRows));
    } catch {}

    if (activeSlotIndex >= nextTotalSlots) {
      setActiveSlotIndex(0);
    }
    if (maximizedSlotIndex !== null && maximizedSlotIndex >= nextTotalSlots) {
      setMaximizedSlotIndex(null);
    }
    if (activeSearchSlotIndex !== null && activeSearchSlotIndex >= nextTotalSlots) {
      setActiveSearchSlotIndex(null);
    }
  };

  useEffect(() => {
    setSelectedCity(null);
  }, [selectedRegionKey, setSelectedCity]);

  const filteredRegionRows = useMemo(() => {
    if (selectedRegionKey === "all") return rows;
    return rows.filter(
      (row) => getCityRegion(row) === selectedRegionKey,
    );
  }, [rows, selectedRegionKey]);

  useEffect(() => {
    if (
      shouldAutofillInitialSlots({
        filteredRegionRows,
        hasPersistedSlots: hasPersistedSlots.current,
        slots,
      })
    ) {
      const next = Array(MAX_TERMINAL_CHARTS)
        .fill(null)
        .map((_, idx) => filteredRegionRows[idx]?.city || null);
      setSlots(next);
      hasPersistedSlots.current = true;
      try {
        localStorage.setItem(TERMINAL_SLOTS_STORAGE_KEY, JSON.stringify(next));
      } catch {}
    }
  }, [filteredRegionRows, slots]);

  const handleSelectCityForSlot = (index: number, city: string | null) => {
    if (index < 0 || index >= MAX_TERMINAL_CHARTS) return;
    const next = [...slots];
    next[index] = city;
    setSlots(next);
    hasPersistedSlots.current = true;
    try {
      localStorage.setItem(TERMINAL_SLOTS_STORAGE_KEY, JSON.stringify(next));
    } catch {}
  };

  const availableCities = useMemo(() => {
    const seen = new Set<string>();
    const result: { city: string; name: string }[] = [];
    filteredRegionRows.forEach((row) => {
      const key = String(row.city || "").toLowerCase();
      if (seen.has(key)) return;
      seen.add(key);
      result.push({
        city: key,
        name: rowName(row),
      });
    });
    return result;
  }, [filteredRegionRows]);

  const watchRows = useMemo(() => {
    return filteredRegionRows
      .filter((row) => decisionLabel(row) === "Watch" || !row.tradable)
      .slice(0, 8);
  }, [filteredRegionRows]);
  const topRows = filteredRegionRows.slice(0, 18);
  const heatRows = filteredRegionRows
    .filter((row) => row.risk_level === "high" || Number(row.current_temp ?? 0) >= 30)
    .slice(0, 10);
  const liquidRows = [...filteredRegionRows]
    .sort(
      (a, b) =>
        Number(b.book_liquidity || b.market_liquidity || b.volume || 0) -
        Number(a.book_liquidity || a.market_liquidity || a.volume || 0),
    )
    .slice(0, 9);
  const negativeRows = filteredRegionRows
    .filter((row) => Number(row.edge_percent ?? row.signed_gap ?? row.gap ?? 0) < 0)
    .slice(0, 8);

  const selectedSignal = selectedRow ? getSignalState(selectedRow) : "data" as const;
  const selectedLabel = selectedRow ? getSignalLabel(selectedSignal, isEn) : "";

  useEffect(() => {
    if (!isTrialTerminalAccess || !selectedRow) return;
    recordTrialValueReplay({
      userId: trialUserId,
      cityName: rowName(selectedRow),
      signalLabel: selectedLabel,
      rowsAvailable: filteredRegionRows.length || rows.length,
    });
  }, [
    filteredRegionRows.length,
    isTrialTerminalAccess,
    rows.length,
    selectedLabel,
    selectedRow,
    trialUserId,
  ]);

  const continentGroups = useMemo(
    () => buildContinentGroups(filteredRegionRows, isEn),
    [filteredRegionRows, isEn]
  );
  const mobileGroups = useMemo(
    () => buildContinentGroups(rows, isEn),
    [rows, isEn],
  );
  const [mobileTab, setMobileTab] = useState<string>("active_signals");
  const mobileActiveGroup = useMemo(
    () => mobileGroups.find((g) => g.key === mobileTab) || mobileGroups[0],
    [mobileGroups, mobileTab],
  );
  useEffect(() => {
    if (mobileGroups.length > 0 && !mobileGroups.find((g) => g.key === mobileTab)) {
      setMobileTab(mobileGroups[0].key);
    }
  }, [mobileGroups, mobileTab]);
  const mobileSelectedRowInActiveGroup = useMemo(
    () =>
      selectedRow && mobileActiveGroup?.rows.some((row) => row.id === selectedRow.id)
        ? selectedRow
        : null,
    [mobileActiveGroup?.rows, selectedRow],
  );
  const mobileChartRow = useMemo(
    () =>
      mobileSelectedRowInActiveGroup ||
      mobileActiveGroup?.rows[0] ||
      filteredRegionRows[0] ||
      null,
    [filteredRegionRows, mobileActiveGroup?.rows, mobileSelectedRowInActiveGroup],
  );
  const handleMobileSelectTab = useCallback((key: string) => {
    setMobileTab(key);
    if (selectedRegionKey !== "all") {
      setSelectedRegionKey("all");
    }
    const nextGroup = mobileGroups.find((group) => group.key === key);
    const nextRow = nextGroup?.rows[0];
    if (nextRow) {
      setSelectedRow(nextRow);
    }
  }, [mobileGroups, selectedRegionKey, setSelectedRegionKey, setSelectedRow]);
  useEffect(() => {
    if (!filteredRegionRows.length) return;
    if (!selectedRow || !filteredRegionRows.some((row) => row.id === selectedRow.id)) {
      setSelectedRow(filteredRegionRows[0]);
    }
  }, [filteredRegionRows, selectedRow, setSelectedRow]);

  useEffect(() => {
    if (!selectedCity) return;
    const cityRows = filteredRegionRows.filter((r) => String(r.city || "").toLowerCase() === selectedCity);
    if (cityRows.length && (!selectedRow || !cityRows.some((r) => r.id === selectedRow.id))) {
      setSelectedRow(cityRows[0]);
    }
  }, [selectedCity, filteredRegionRows, selectedRow, setSelectedRow]);

  const avgEdge = useMemo(() => {
    const list = filteredRegionRows;
    return list.reduce((sum, row) => sum + Number(row.edge_percent || 0), 0) / Math.max(list.length, 1);
  }, [filteredRegionRows]);

  const totalLiquidity = useMemo(() => {
    const list = filteredRegionRows;
    return list.reduce(
      (sum, row) => sum + Number(row.book_liquidity || row.market_liquidity || row.volume || 0),
      0
    );
  }, [filteredRegionRows]);

  return (
    <div className="flex h-screen w-full overflow-hidden bg-[#e9edf3] text-[#202833]">
      <TerminalSidebar
        activeNavKey={activeNavKey}
        isEn={isEn}
        onFeedbackClick={openTerminalFeedback}
        onSelectNav={handleSelectNav}
      />

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-12 shrink-0 items-center justify-between border-b border-[#d2d9e2] bg-white px-4 text-slate-800">
          <div className="flex min-w-0 items-center gap-4">
            <div className="hidden items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-500 lg:flex">
              <Activity size={13} />
              {t("dashboard", isEn)}
            </div>
            <div className="hidden lg:block">
              <UpdateAnnouncementButton isEn={isEn} />
            </div>
            {isTrialTerminalAccess && (
              <Link
                href="/account?checkout=1"
                className="inline-flex h-7 items-center gap-2 rounded border border-amber-300 bg-amber-50 px-2.5 text-[11px] font-black text-amber-800 transition hover:bg-amber-100"
                title={isEn ? "Upgrade to Pro" : "升级 Pro"}
              >
                <Crown size={12} />
                <span className="hidden sm:inline">{trialUpgradeLabel}</span>
                <span>{isEn ? "Upgrade" : "升级"}</span>
              </Link>
            )}
            {onlineCount != null && (
              <div className="hidden items-center gap-1 text-[10px] font-medium text-slate-400 lg:flex">
                <Users size={12} />
                <span>{onlineCount}</span>
              </div>
            )}
          </div>
          <div className="flex items-center gap-2 text-xs text-slate-500">
            <span className="hidden font-mono md:inline text-slate-500">{userLocalTime}</span>
            <div className="hidden lg:block">
              <GridLayoutSelector
                isEn={isEn}
                cols={gridCols}
                rows={gridRows}
                onSelectGrid={handleSetGridSize}
              />
            </div>
            <button
              type="button"
              onClick={toggleLocale}
              className="h-7 rounded border border-slate-300 bg-white px-2 text-[11px] font-bold text-slate-600 hover:bg-slate-50 hover:text-slate-900"
              title={t("switchLang", isEn)}
            >
              {isEn ? "中文" : "EN"}
            </button>
            <UserFeedbackStatusButton isEn={isEn} refreshKey={feedbackRefreshKey} />
            <Link
              href="/account"
              className="grid h-7 w-7 place-items-center rounded-full border border-slate-300 bg-white text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900"
              title="User Account"
            >
              <UserRound size={13} />
            </Link>
          </div>
        </header>

        <main className="min-h-0 flex-1 overflow-hidden flex flex-col p-2 bg-[#eef2f6]">
          {activeNavKey === "training" ? (
            <TrainingDashboard isEn={isEn} />
          ) : activeNavKey === "guide" ? (
            <UsageGuideDashboard isEn={isEn} />
          ) : (
            <>
              {/* Mobile layout */}
              <div className="flex flex-col gap-2 lg:hidden overflow-auto flex-1 pb-6">
                <div className="mobile-region-tabs-shell sticky top-0 z-30 -mx-2 bg-[#eef2f6] pb-2 shadow-sm">
                  <MobileRegionTabs
                    activeTab={mobileTab}
                    groups={mobileGroups}
                    isEn={isEn}
                    onSelectTab={handleMobileSelectTab}
                  />
                  <div className="mx-2 mt-1 rounded border border-blue-200 bg-blue-50 px-2 py-1 text-[10px] font-semibold leading-3 text-blue-700">
                    {isEn
                      ? "Mobile renders one chart. Rotate to landscape for the full grid."
                      : "手机端仅渲染 1 个图表。建议横屏查看完整终端网格。"}
                  </div>
                </div>
                {mobileChartRow && (
                  <div className="h-[420px] min-h-[420px] overflow-hidden rounded border border-[#d2d9e2] bg-white">
                    <LiveTemperatureThresholdChart
                      isEn={isEn}
                      row={mobileChartRow}
                      allRows={filteredRegionRows}
                      compact={false}
                      activationRefreshKey={terminalActivationRefreshKey}
                      disableClose={true}
                      onReportIssue={openChartFeedback}
                    />
                  </div>
                )}
                <div className="space-y-2 px-1">
                  {mobileActiveGroup?.rows.map((row) => (
                    <MobileCityCard
                      key={row.id}
                      row={row}
                      isEn={isEn}
                      onClick={setSelectedRow}
                    />
                  ))}
                </div>
                {/* Mobile Selected Row Detail */}
                {mobileChartRow && (
                  <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
                    <h3 className="text-sm font-black text-slate-900 mb-2">{rowName(mobileChartRow)}</h3>
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      {[
                        ["Obs", temp(mobileChartRow.current_temp, mobileChartRow.temp_symbol)],
                        ["High", temp(mobileChartRow.current_max_so_far, mobileChartRow.temp_symbol)],
                        ["DEB", temp(mobileChartRow.deb_prediction, mobileChartRow.temp_symbol)],
                        ["Gap", temp(mobileChartRow.signed_gap ?? mobileChartRow.gap_to_target, mobileChartRow.temp_symbol)],
                        ["Edge", pct(mobileChartRow.edge_percent)],
                        ["Market", "--"],
                      ].map(([label, value]) => (
                        <div key={label} className="rounded border border-slate-200 bg-slate-50 p-2">
                          <div className="text-[10px] font-black uppercase text-slate-500">{label}</div>
                          <div className="font-mono font-bold text-slate-900">{value}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* Desktop layout */}
              <div className="hidden h-full min-h-0 lg:block">
                <div className="h-full w-full min-h-0">
                  {maximizedSlotIndex !== null ? (
                    // Maximized view
                    <div
                      onClick={() => setActiveSlotIndex(maximizedSlotIndex)}
                      className={clsx(
                        "relative h-full rounded-[4px] border border-blue-500 ring-2 ring-blue-500/20 shadow-md z-10",
                        activeSearchSlotIndex === maximizedSlotIndex ? "" : "overflow-hidden"
                      )}
                    >
                      <LiveTemperatureThresholdChart
                        isEn={isEn}
                        row={filteredRegionRows.find((r) => String(r.city || "").toLowerCase() === visibleSlots[maximizedSlotIndex]) || null}
                        allRows={filteredRegionRows}
                        compact={false}
                        activationRefreshKey={terminalActivationRefreshKey}
                        onSearchClick={() => setActiveSearchSlotIndex(maximizedSlotIndex)}
                        onMaximize={() => setMaximizedSlotIndex(null)}
                        onClose={() => {
                          handleSelectCityForSlot(maximizedSlotIndex, null);
                          setMaximizedSlotIndex(null);
                        }}
                        onReportIssue={openChartFeedback}
                        isMaximized={true}
                      />

                      {activeSearchSlotIndex === maximizedSlotIndex && (
                        <CitySelectorDropdown
                          isEn={isEn}
                          rows={filteredRegionRows}
                          onSelectCity={(city) => {
                            handleSelectCityForSlot(maximizedSlotIndex, city);
                            setActiveSearchSlotIndex(null);
                          }}
                          onClose={() => setActiveSearchSlotIndex(null)}
                          className="absolute left-3 top-9 z-50 w-[380px] bg-white border border-slate-200 rounded shadow-lg p-2"
                        />
                      )}
                    </div>
                  ) : (
                    // Custom grid layout
                    <div
                      className="grid gap-2 h-full"
                      style={{
                        gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
                        gridTemplateRows: `repeat(${gridRows}, minmax(0, 1fr))`,
                      }}
                    >
                      {visibleSlots.map((cityInSlot, slotIndex) => {
                        const isSlotActive = activeSlotIndex === slotIndex;
                        const rowForSlot = cityInSlot
                          ? filteredRegionRows.find(
                              (r) => String(r.city || "").toLowerCase() === cityInSlot
                            ) || null
                          : null;
                        const isSavedSlotLoading = Boolean(cityInSlot && !rowForSlot && refreshing);

                        if (isSavedSlotLoading && cityInSlot) {
                          return (
                            <LoadingSlotCard
                              key={slotIndex}
                              city={cityInSlot}
                              isActive={isSlotActive}
                              isEn={isEn}
                              onSelectSlot={() => setActiveSlotIndex(slotIndex)}
                            />
                          );
                        }

                        if (!cityInSlot || !rowForSlot) {
                          return (
                            <div key={slotIndex} className="relative h-full">
                              <EmptySlotCard
                                slotIndex={slotIndex}
                                isActive={isSlotActive}
                                isEn={isEn}
                                onSelectSlot={() => setActiveSlotIndex(slotIndex)}
                                onOpenSearch={() => setActiveSearchSlotIndex(slotIndex)}
                              />
                              
                              {activeSearchSlotIndex === slotIndex && (
                                <CitySelectorDropdown
                                  isEn={isEn}
                                  rows={filteredRegionRows}
                                  onSelectCity={(city) => {
                                    handleSelectCityForSlot(slotIndex, city);
                                    setActiveSearchSlotIndex(null);
                                  }}
                                  onClose={() => setActiveSearchSlotIndex(null)}
                                  className="absolute left-1/2 top-12 z-50 w-[380px] -translate-x-1/2 bg-white border border-slate-200 rounded shadow-lg p-2"
                                />
                              )}
                            </div>
                          );
                        }

                        return (
                          <div
                            key={slotIndex}
                            onClick={() => setActiveSlotIndex(slotIndex)}
                            className={clsx(
                              "relative h-full rounded-[4px] border transition-all",
                              isSlotActive
                                ? "border-blue-500 ring-2 ring-blue-500/20 shadow-md z-10"
                                : "border-[#d2d9e2] hover:border-slate-400",
                              activeSearchSlotIndex === slotIndex ? "" : "overflow-hidden"
                            )}
                          >
                            <LiveTemperatureThresholdChart
                              isEn={isEn}
                              row={rowForSlot}
                              allRows={filteredRegionRows}
                              compact={true}
                              activationRefreshKey={terminalActivationRefreshKey}
                              isActive={isSlotActive}
                              slotIndex={slotIndex}
                              onSearchClick={() => setActiveSearchSlotIndex(slotIndex)}
                              onMaximize={() => {
                                setMaximizedSlotIndex(slotIndex);
                                setActiveSlotIndex(slotIndex);
                              }}
                              onClose={() => {
                                handleSelectCityForSlot(slotIndex, null);
                              }}
                              onReportIssue={openChartFeedback}
                              isMaximized={false}
                            />

                            {activeSearchSlotIndex === slotIndex && (
                              <CitySelectorDropdown
                                isEn={isEn}
                                rows={filteredRegionRows}
                                onSelectCity={(city) => {
                                  handleSelectCityForSlot(slotIndex, city);
                                  setActiveSearchSlotIndex(null);
                                }}
                                onClose={() => setActiveSearchSlotIndex(null)}
                                className="absolute left-3 top-9 z-50 w-[380px] bg-white border border-slate-200 rounded shadow-lg p-2"
                              />
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
            </>
          )}
        </main>
      </div>
      <UserFeedbackModal
        draft={feedbackDraft}
        isEn={isEn}
        onClose={() => setFeedbackDraft(null)}
        onSubmitted={handleFeedbackSubmitted}
      />
    </div>
  );
}

function AuthSyncRecoveryScreen({
  isEn,
  onRetry,
  rootClassName,
  retrying,
  themeMode,
  userLocalTime,
}: {
  isEn: boolean;
  onRetry: () => void;
  rootClassName: string;
  retrying: boolean;
  themeMode: "dark" | "light";
  userLocalTime: string;
}) {
  return (
    <div className={rootClassName}>
      <div className={clsx("flex h-screen w-full bg-[#e9edf3] text-slate-950", themeMode === "light" && "light")}>
        <aside className="w-[52px] bg-[#171d24]" />
        <main className="flex flex-1 flex-col">
          <header className="flex h-[52px] items-center justify-between border-b border-slate-200 bg-white px-4">
            <Link href="/" className="flex items-center gap-2 hover:opacity-90">
              <img src="/logo.png" alt="PolyWeather" className="h-7 w-auto object-contain" />
              <span className="text-sm font-semibold tracking-tight text-slate-900">Terminal</span>
            </Link>
            <div className="font-mono text-sm text-slate-500">{userLocalTime}</div>
          </header>
          <section className="grid flex-1 place-items-center p-6">
            <div className="w-full max-w-md rounded-[6px] border border-amber-200 bg-white p-6 shadow-sm">
              <div className="mb-3 inline-flex rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-black text-amber-700">
                {isEn ? "Access sync timeout" : "权限同步超时"}
              </div>
              <h1 className="text-xl font-black text-slate-950">
                {isEn ? "We could not confirm your subscription yet" : "暂时未能确认你的订阅状态"}
              </h1>
              <p className="mt-3 text-sm leading-6 text-slate-600">
                {isEn
                  ? "The session or entitlement service is taking too long. Retry access sync; if you just paid, wait a few seconds and try again."
                  : "当前会话或会员服务响应过慢。请先重新同步权限；如果刚完成支付，等待几秒后再试。"}
              </p>
              <div className="mt-5 flex flex-col gap-3 sm:flex-row">
                <button
                  type="button"
                  onClick={onRetry}
                  disabled={retrying}
                  className="inline-flex flex-1 items-center justify-center gap-2 rounded-[4px] bg-blue-600 px-4 py-2.5 text-sm font-black text-white transition hover:bg-blue-700 disabled:cursor-wait disabled:opacity-70"
                >
                  {retrying && (
                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/70 border-t-transparent" />
                  )}
                  {isEn ? "Retry access sync" : "重新同步权限"}
                </button>
                <Link
                  href="/account"
                  className="inline-flex flex-1 items-center justify-center rounded-[4px] border border-slate-200 bg-white px-4 py-2.5 text-sm font-black text-slate-700 transition hover:bg-slate-50"
                >
                  {isEn ? "Open account" : "打开账户页"}
                </Link>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}

function ScanTerminalScreen() {
  const [proAccess, setProAccess] = useState<ProAccessState>(() =>
    createEmptyAccess(true),
  );

  const rawLoadAuthProfile = useCallback(
    async (
      accessToken?: string | null,
      options?: { preferSnapshot?: boolean },
    ): Promise<AuthProfilePayload> => {
      const headers: Record<string, string> = { Accept: "application/json" };
      const token = String(accessToken || "").trim();
      if (token) headers.Authorization = `Bearer ${token}`;
      const controller = typeof AbortController !== "undefined" ? new AbortController() : null;
      const timeoutId = controller
        ? globalThis.setTimeout(() => controller.abort(), AUTH_PROFILE_REQUEST_TIMEOUT_MS)
        : null;
      try {
        const response = await fetch(
          buildAuthMePath({
            preferSnapshot: options?.preferSnapshot,
            scope: "entitlement",
          }),
          {
            cache: "no-store",
            headers,
            signal: controller?.signal,
          },
        );
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json() as Promise<AuthProfilePayload>;
      } finally {
        if (timeoutId !== null) globalThis.clearTimeout(timeoutId);
      }
    },
    [],
  );
  const authProfileRequestCacheRef = useRef<{
    load: typeof rawLoadAuthProfile;
    cached: ReturnType<typeof createAuthProfileRequestCache>;
  } | null>(null);
  const loadAuthProfile = useCallback(
    (
      accessToken?: string | null,
      options?: { preferSnapshot?: boolean },
    ): Promise<AuthProfilePayload> => {
      const current = authProfileRequestCacheRef.current;
      if (current?.load === rawLoadAuthProfile) {
        return current.cached(accessToken, options);
      }
      const next = {
        load: rawLoadAuthProfile,
        cached: createAuthProfileRequestCache(rawLoadAuthProfile),
      };
      authProfileRequestCacheRef.current = next;
      return next.cached(accessToken, options);
    },
    [rawLoadAuthProfile],
  );

  const refreshLiveAuthProfile = useCallback(async () => {
    const supabaseEnabled = hasSupabasePublicEnv();
    const payload = await loadTerminalAuthProfile({
      getSession: () =>
        supabaseEnabled
          ? getSupabaseBrowserClient().auth.getSession()
          : Promise.resolve({ data: { session: null } }),
      hasSupabasePublicEnv: supabaseEnabled,
      loadAuthProfile: (accessToken) =>
        loadAuthProfile(accessToken, { preferSnapshot: false }),
      timeoutMs: AUTH_PROFILE_REQUEST_TIMEOUT_MS + 2000,
    });
    setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload));
  }, [loadAuthProfile]);

  // Listen to Supabase auth events (e.g. token refreshed, signed out)
  useEffect(() => {
    if (!hasSupabasePublicEnv()) return;
    try {
      const supabase = getSupabaseBrowserClient();
      const {
        data: { subscription },
      } = supabase.auth.onAuthStateChange(async (event, session) => {
        if (event === "SIGNED_OUT") {
          try {
            const {
              data: { session: currentSession },
            } = await supabase.auth.getSession();
            const accessToken =
              currentSession?.access_token || session?.access_token || null;
            if (accessToken) {
              const payload = await loadAuthProfile(accessToken);
              setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload));
              return;
            }
          } catch {}
          setProAccess(createEmptyAccess(false));
        } else if (
          event === "INITIAL_SESSION" ||
          event === "TOKEN_REFRESHED" ||
          event === "SIGNED_IN"
        ) {
          try {
            if (!session?.access_token) return;
            const payload = await loadAuthProfile(session?.access_token);
            setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload));
          } catch {}
        }
      });
      return () => {
        subscription.unsubscribe();
      };
    } catch {}
  }, []);

  // Periodically touch the session to trigger background refresh if near expiry
  useEffect(() => {
    if (!hasSupabasePublicEnv()) return;
    const supabase = getSupabaseBrowserClient();
    const interval = setInterval(async () => {
      try {
        await supabase.auth.getSession();
      } catch {}
    }, 15 * 60 * 1000); // every 15 minutes
    
    return () => clearInterval(interval);
  }, []);
  const [locale, setLocale] = useState<"zh-CN" | "en-US">("zh-CN");
  const isEn = locale === "en-US";
  const toggleLocale = () =>
    setLocale((prev) => (prev === "zh-CN" ? "en-US" : "zh-CN"));
  const [hydrated, setHydrated] = useState(false);
  const [localFullAccess, setLocalFullAccess] = useState(false);
  const [authWaitExpired, setAuthWaitExpired] = useState(false);
  const [authRetrying, setAuthRetrying] = useState(false);
  const canUseLocalFullAccess = hydrated && localFullAccess;
  const isAuthenticated =
    hydrated && (proAccess.authenticated || canUseLocalFullAccess);
  const isPro =
    hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
  const accessDecisionPending =
    !hydrated || (proAccess.loading && !canUseLocalFullAccess && !authWaitExpired);
  const authSyncRecoveryNeeded =
    hydrated && proAccess.loading && !canUseLocalFullAccess && authWaitExpired;
  const shouldShowPaywall = !accessDecisionPending && (!isAuthenticated || !isPro);
  const userLocalTime = useUserLocalClock();
  const { themeMode } = useScanTerminalTheme();
  const [selectedRegionKey, setSelectedRegionKey] = useState<string>("all");
  const [localTimezoneOffsetSeconds, setLocalTimezoneOffsetSeconds] = useState<number | null>(null);
  const [useLocalTimezoneDefault, setUseLocalTimezoneDefault] = useState(false);
  const [visibleRegions, setVisibleRegions] = useState<Set<string>>(() => {
    try {
      const stored = localStorage.getItem("polyweather_visible_regions");
      if (stored) return new Set(JSON.parse(stored));
    } catch {}
    return new Set(REGIONS.map((r) => r.key));
  });
  const toggleRegion = useCallback((key: string) => {
    setVisibleRegions((prev) => {
      const next = new Set(prev);
      if (next.has(key)) {
        if (next.size <= 1) return prev; // keep at least one
        next.delete(key);
      } else {
        next.add(key);
      }
      try { localStorage.setItem("polyweather_visible_regions", JSON.stringify([...next])); } catch {}
      return next;
    });
  }, []);

  useEffect(() => {
    let cancelled = false;
    setHydrated(true);
    setLocale(getInitialLocaleFromNavigator());
    const localAccess = isBrowserLocalFullAccess();
    setLocalFullAccess(localAccess);
    if (localAccess) {
      setProAccess(createLocalAccess());
      return () => {
        cancelled = true;
      };
    }
    const cachedActiveAccess = readCachedActiveAccess();
    if (cachedActiveAccess) {
      setProAccess(cachedActiveAccess);
    }
    if (typeof fetch !== "function") {
      setProAccess(createEmptyAccess(false));
      return () => {
        cancelled = true;
      };
    }
    const supabaseEnabled = hasSupabasePublicEnv();
    loadTerminalAuthProfile({
      getSession: () =>
        supabaseEnabled
          ? getSupabaseBrowserClient().auth.getSession()
          : Promise.resolve({ data: { session: null } }),
      hasSupabasePublicEnv: supabaseEnabled,
      loadAuthProfile,
      timeoutMs: AUTH_PROFILE_REQUEST_TIMEOUT_MS + 2000,
    })
      .then((payload) => {
        if (cancelled) return;
        setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload));
        if (payload.entitlement_snapshot === true) {
          window.setTimeout(() => {
            if (!cancelled) void refreshLiveAuthProfile();
          }, 0);
        }
      })
      .catch((error) => {
        if (cancelled) return;
        setProAccess((prev) => (
          prev.subscriptionActive
            ? { ...prev, loading: false, error: String(error) }
            : createTransientAccess(error)
        ));
      });
    return () => {
      cancelled = true;
    };
  }, [loadAuthProfile, refreshLiveAuthProfile]);

  useEffect(() => {
    if (!hydrated || !proAccess.loading || canUseLocalFullAccess) {
      setAuthWaitExpired(false);
      return;
    }
    const timer = window.setTimeout(() => {
      setAuthWaitExpired(true);
    }, AUTH_DECISION_RECOVERY_MS);
    return () => window.clearTimeout(timer);
  }, [canUseLocalFullAccess, hydrated, proAccess.loading]);

  useEffect(() => {
    if (hydrated && proAccess.authenticated && proAccess.subscriptionActive) {
      writeCachedActiveAccess(proAccess);
    }
  }, [hydrated, proAccess]);

  useEffect(() => {
    if (
      !hydrated ||
      canUseLocalFullAccess ||
      !proAccess.authenticated ||
      !proAccess.loading ||
      proAccess.subscriptionActive ||
      typeof fetch !== "function"
    ) {
      return;
    }

    let cancelled = false;
    const supabaseEnabled = hasSupabasePublicEnv();
    const retryAuthProfile = async () => {
      try {
        const payload = await loadTerminalAuthProfile({
          getSession: () =>
            supabaseEnabled
              ? getSupabaseBrowserClient().auth.getSession()
              : Promise.resolve({ data: { session: null } }),
          hasSupabasePublicEnv: supabaseEnabled,
          loadAuthProfile,
          timeoutMs: AUTH_PROFILE_REQUEST_TIMEOUT_MS + 2000,
        });
        if (cancelled) return;
        setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload));
      } catch (error) {
        if (cancelled) return;
        setProAccess((prev) =>
          prev.loading && prev.authenticated && !prev.subscriptionActive
            ? { ...prev, error: String(error) }
            : prev,
        );
      }
    };

    const firstRetry = window.setTimeout(() => {
      void retryAuthProfile();
    }, AUTH_PROFILE_RETRY_INITIAL_DELAY_MS);
    const interval = window.setInterval(() => {
      void retryAuthProfile();
    }, AUTH_PROFILE_RETRY_POLL_MS);
    return () => {
      cancelled = true;
      window.clearTimeout(firstRetry);
      window.clearInterval(interval);
    };
  }, [
    canUseLocalFullAccess,
    hydrated,
    loadAuthProfile,
    proAccess.authenticated,
    proAccess.loading,
    proAccess.subscriptionActive,
  ]);

  useEffect(() => {
    setSelectedRegionKey("all");
    setLocalTimezoneOffsetSeconds(-new Date().getTimezoneOffset() * 60);
  }, []);

  const selectRegionManually = useCallback((key: string) => {
    setUseLocalTimezoneDefault(false);
    setSelectedRegionKey(key);
  }, []);
  const [terminalActivationRefreshKey, setTerminalActivationRefreshKey] = useState(0);
  const handleTerminalActivated = useCallback(() => {
    setTerminalActivationRefreshKey((value) => value + 1);
  }, []);

  const { refreshScanTerminalManually, scanLoading, terminalData } =
    useScanTerminalQuery({
      isPro,
      proAccessLoading: !hydrated || (proAccess.loading && !canUseLocalFullAccess),
      terminalActivationRefreshKey,
      timezoneOffsetSeconds: useLocalTimezoneDefault ? localTimezoneOffsetSeconds : null,
      tradingRegion: selectedRegionKey,
    });

  useEffect(() => {
    if (!hydrated || !isAuthenticated || !isPro) return;
    const actorKey = String(proAccess.userId || "local").toLowerCase();
    if (markAnalyticsOnce(`enter_terminal:${actorKey}`, "session")) {
      trackAppEvent("enter_terminal", {
        entry: "terminal",
        user_id: proAccess.userId || null,
      });
    }
  }, [hydrated, isAuthenticated, isPro, proAccess.userId]);
  const handleRefresh = useCallback(() => {
    clearCityDetailCache();
    refreshScanTerminalManually();
  }, [refreshScanTerminalManually]);
  const handleRetryAuthSync = useCallback(() => {
    setAuthRetrying(true);
    setAuthWaitExpired(false);
    void refreshLiveAuthProfile()
      .catch((error) => {
        setProAccess((prev) => ({ ...prev, error: String(error) }));
      })
      .finally(() => {
        setAuthRetrying(false);
      });
  }, [refreshLiveAuthProfile]);

  const [cityFallbackRows, setCityFallbackRows] = useState<ScanOpportunityRow[]>(() =>
    cityListItemsToScanRows(readCachedCityList() || STATIC_CITY_LIST),
  );
  const rows = useMemo(
    () => {
      const scanRows = terminalData?.rows || [];
      return sortRowsByUserTime(
        mergeScanRowsWithCityFallbackRows(scanRows, cityFallbackRows),
      );
    },
    [cityFallbackRows, terminalData?.rows],
  );
  const isTrialTerminalAccess = Boolean(
    isPro &&
      String(proAccess.subscriptionPlanCode || "").toLowerCase().includes("signup_trial"),
  );

  const fallbackFetchedRef = useRef(false);
  useEffect(() => {
    if (!isPro || typeof fetch !== "function") return;
    if (fallbackFetchedRef.current) return;
    const cachedCities = readCachedCityList();
    if (cachedCities) {
      fallbackFetchedRef.current = true;
      setCityFallbackRows(cityListItemsToScanRows(cachedCities));
      return;
    }
    const controller = new AbortController();
    fetch("/api/cities", {
      cache: "default",
      headers: { Accept: "application/json" },
      signal: controller.signal,
    })
      .then(async (response) => {
        if (!response.ok) return null;
        return response.json() as Promise<{ cities?: CityListItem[] }>;
      })
      .then((payload) => {
        if (!payload || !Array.isArray(payload.cities)) return;
        fallbackFetchedRef.current = true;
        writeCachedCityList(payload.cities);
        setCityFallbackRows(cityListItemsToScanRows(payload.cities));
      })
      .catch(() => {});
    return () => controller.abort();
  }, [isPro]);
  const [searchQuery, setSearchQuery] = useState("");
  const deferredSearchQuery = useDeferredValue(searchQuery);
  const searchInputRef = useRef<HTMLInputElement>(null);

  const filteredRows = useMemo(() => {
    if (!deferredSearchQuery.trim()) return rows;
    const q = deferredSearchQuery.toLowerCase().trim();
    return rows.filter((row) => {
      const haystack = [
        row.city,
        row.city_display_name,
        row.display_name,
        row.airport,
        row.trading_region_label,
        row.trading_region_label_zh,
        row.market_question,
        row.target_label,
        row.ai_decision,
        row.v4_metar_decision,
        row.signal_status,
      ]
        .filter(Boolean)
        .map((v) => String(v).toLowerCase());
      return haystack.some((s) => s.includes(q));
    });
  }, [rows, deferredSearchQuery]);

  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [selectedCity, setSelectedCity] = useState<string | null>(null);
  const selectedRow = useMemo(
    () => filteredRows.find((row) => row.id === selectedId) || filteredRows[0] || null,
    [filteredRows, selectedId],
  );
  const handleSelectRow = useCallback((row: ScanOpportunityRow) => {
    setSelectedId(row.id);
  }, []);
  const generatedText = useRelativeTime(terminalData?.generated_at ?? null);

  if (accessDecisionPending) {
    return (
      <ScanTerminalLoadingScreen
        isEn={isEn}
        rootClassName={scanRootClass}
        themeMode={themeMode}
        userLocalTime={userLocalTime}
      />
    );
  }

  if (authSyncRecoveryNeeded) {
    return (
      <AuthSyncRecoveryScreen
        isEn={isEn}
        onRetry={handleRetryAuthSync}
        rootClassName={scanRootClass}
        retrying={authRetrying}
        themeMode={themeMode}
        userLocalTime={userLocalTime}
      />
    );
  }

  if (shouldShowPaywall) {
    return (
      <ProductAccessRequired
        isAuthenticated={isAuthenticated}
        isEn={isEn}
        subscriptionExpiresAt={
          proAccess.subscriptionTotalExpiresAt || proAccess.subscriptionExpiresAt
        }
        userLocalTime={userLocalTime}
      />
    );
  }

  return (
    <PolyWeatherTerminal
      generatedText={generatedText || ""}
      isEn={isEn}
      locale={locale}
      onTerminalActivated={handleTerminalActivated}
      onRefresh={handleRefresh}
      refreshing={scanLoading}
      rows={filteredRows}
      selectedRow={selectedRow}
      setSelectedRow={handleSelectRow}
      toggleLocale={toggleLocale}
      isTrialTerminalAccess={isTrialTerminalAccess}
      trialSubscriptionExpiresAt={
        proAccess.subscriptionTotalExpiresAt || proAccess.subscriptionExpiresAt
      }
      trialUserId={proAccess.userId}
      userLocalTime={userLocalTime}
      searchQuery={searchQuery}
      setSearchQuery={setSearchQuery}
      searchInputRef={searchInputRef}
      selectedCity={selectedCity}
      setSelectedCity={setSelectedCity}
      selectedRegionKey={selectedRegionKey}
      setSelectedRegionKey={selectRegionManually}
      visibleRegions={visibleRegions}
      toggleRegion={toggleRegion}
      terminalActivationRefreshKey={terminalActivationRefreshKey}
    />
  );
}

export function ScanTerminalDashboard() {
  return <ScanTerminalScreen />;
}