"use client"; import clsx from "clsx"; import Link from "next/link"; import { Activity, BookOpenCheck, ChevronDown, ChevronLeft, ChevronRight, GraduationCap, Menu, Search, UserRound, Users, } from "lucide-react"; import { Fragment, useCallback, 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 { TrainingDashboard } from "@/components/dashboard/scan-terminal/TrainingDashboard"; import { UsageGuideDashboard } from "@/components/dashboard/scan-terminal/UsageGuideDashboard"; import { LiveTemperatureThresholdChart, clearCityDetailCache } 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 { mergeAccessStateWithAuthPayload, type AuthProfilePayload, } from "@/components/dashboard/scan-terminal/terminal-access-state"; import { loadTerminalAuthProfile } from "@/components/dashboard/scan-terminal/terminal-auth-bootstrap"; import { cityListItemsToScanRows, mergeScanRowsWithCityFallbackRows, } from "@/components/dashboard/scan-terminal/city-fallback-rows"; 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, }; } 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 Access Required", zh: "需要付费订阅" }, 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: "Subscribe Now — $10/mo", zh: "立即订阅 — $10/月" }, 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_SIDE = 3; const MAX_TERMINAL_CHARTS = 9; const MOBILE_TERMINAL_CHARTS = 1; const DEFAULT_TERMINAL_GRID_SIDE = 2; function clampGridSide(value: number) { if (!Number.isFinite(value)) return DEFAULT_TERMINAL_GRID_SIDE; return Math.max(1, Math.min(MAX_TERMINAL_GRID_SIDE, Math.floor(value))); } function getStoredGridSide(key: string) { if (typeof window === "undefined") return DEFAULT_TERMINAL_GRID_SIDE; try { const raw = localStorage.getItem(key); if (!raw) return DEFAULT_TERMINAL_GRID_SIDE; return clampGridSide(parseInt(raw, 10)); } catch {} return DEFAULT_TERMINAL_GRID_SIDE; } function getSlotCount(cols: number, rows: number) { return Math.min(MAX_TERMINAL_CHARTS, clampGridSide(cols) * clampGridSide(rows)); } function normalizeSlotList(slots: Array, 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 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; activeSlotIndex?: number; }) { const cities = useMemo(() => { const seen = new Set(); 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 (
{cities.map(({ city, name, localTime }) => { const isActive = selectedCity === city; const displaySlotIndices = slots .map((s, idx) => (s === city ? idx : -1)) .filter((idx) => idx !== -1); return ( ); })}
); } function EmptySlotCard({ slotIndex, isActive, isEn, onSelectSlot, onOpenSearch, }: { slotIndex: number; isActive: boolean; isEn: boolean; onSelectSlot: () => void; onOpenSearch: () => void; }) { return (
{ 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" )} >
+
{isEn ? `Slot ${slotIndex + 1}: Empty` : `槽位 ${slotIndex + 1}: 空白`}
{isEn ? "Click to choose a city weather chart for this slot." : "点击为该槽位选择一个城市天气图表。"}
); } function PolyWeatherTerminal({ generatedText, isEn, locale, onRefresh, refreshing, rows, selectedRow, setSelectedRow, toggleLocale, userLocalTime, searchQuery, setSearchQuery, searchInputRef, selectedCity, setSelectedCity, selectedRegionKey, setSelectedRegionKey, visibleRegions, toggleRegion, }: { generatedText: string; isEn: boolean; locale: "zh-CN" | "en-US"; onRefresh: () => void; refreshing: boolean; rows: ScanOpportunityRow[]; selectedRow: ScanOpportunityRow | null; setSelectedRow: (row: ScanOpportunityRow) => void; toggleLocale: () => void; userLocalTime: string; searchQuery: string; setSearchQuery: (val: string) => void; searchInputRef: React.RefObject; selectedCity: string | null; setSelectedCity: (city: string | null) => void; selectedRegionKey: string; setSelectedRegionKey: (key: string) => void; visibleRegions: Set; toggleRegion: (key: string) => void; }) { 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 [navExpanded, setNavExpanded] = useState(false); const [activeNavKey, setActiveNavKey] = useState("thresholds"); const [onlineCount, setOnlineCount] = useState(null); useEffect(() => { const fetchOnline = () => { 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 id = setInterval(fetchOnline, 60_000); return () => clearInterval(id); }, []); const [gridCols, setGridCols] = useState(() => { return getStoredGridSide("polyweather_terminal_grid_cols"); }); const [gridRows, setGridRows] = useState(() => { return getStoredGridSide("polyweather_terminal_grid_rows"); }); const totalSlots = getSlotCount(gridCols, gridRows); const [slots, setSlots] = useState>(() => { if (typeof window !== "undefined") { try { const stored = localStorage.getItem("polyweather_terminal_slots"); if (stored) { const parsed = JSON.parse(stored); if (Array.isArray(parsed)) { return normalizeSlotList(parsed, MAX_TERMINAL_CHARTS); } } } catch {} } return Array(MAX_TERMINAL_CHARTS).fill(null); }); const [activeSlotIndex, setActiveSlotIndex] = useState(0); const [maximizedSlotIndex, setMaximizedSlotIndex] = useState(null); const [activeSearchSlotIndex, setActiveSearchSlotIndex] = useState(null); const visibleSlots = useMemo(() => slots.slice(0, totalSlots), [slots, totalSlots]); const handleSetGridSize = (cols: number, rows: number) => { const safeCols = clampGridSide(cols); const safeRows = clampGridSide(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); } }; const NAV_ITEMS = [ { key: "thresholds", Icon: Activity, labelEn: "Decision", labelZh: "天气决策" }, { key: "training", Icon: GraduationCap, labelEn: "Training", labelZh: "训练数据" }, { key: "guide", Icon: BookOpenCheck, labelEn: "Guide", labelZh: "使用指南" }, ]; useEffect(() => { setSelectedCity(null); }, [selectedRegionKey, setSelectedCity]); const filteredRegionRows = useMemo(() => { if (selectedRegionKey === "all") return rows; return rows.filter( (row) => getCityRegion(row) === selectedRegionKey, ); }, [rows, selectedRegionKey]); useEffect(() => { if (filteredRegionRows.length && slots.every((s) => s === null)) { const next = Array(MAX_TERMINAL_CHARTS) .fill(null) .map((_, idx) => filteredRegionRows[idx]?.city || null); setSlots(next); try { localStorage.setItem("polyweather_terminal_slots", 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); try { localStorage.setItem("polyweather_terminal_slots", JSON.stringify(next)); } catch {} }; const availableCities = useMemo(() => { const seen = new Set(); 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) : ""; const continentGroups = useMemo( () => buildContinentGroups(filteredRegionRows, isEn), [filteredRegionRows, isEn] ); const [mobileTab, setMobileTab] = useState("active_signals"); const mobileActiveGroup = useMemo( () => continentGroups.find((g) => g.key === mobileTab) || continentGroups[0], [continentGroups, mobileTab] ); useEffect(() => { if (continentGroups.length > 0 && !continentGroups.find((g) => g.key === mobileTab)) { setMobileTab(continentGroups[0].key); } }, [continentGroups, mobileTab]); const mobileChartRow = useMemo( () => selectedRow || mobileActiveGroup?.rows.slice(0, MOBILE_TERMINAL_CHARTS)[0] || filteredRegionRows[0] || null, [filteredRegionRows, mobileActiveGroup?.rows, selectedRow], ); 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 (
{t("dashboard", isEn)}
{onlineCount != null && (
{onlineCount}
)}
{userLocalTime}
{activeNavKey === "training" ? ( ) : activeNavKey === "guide" ? ( ) : ( <> {/* Mobile layout */}
{isEn ? "Mobile renders one chart. Rotate to landscape to inspect the full terminal grid." : "手机端仅渲染 1 个图表。建议横屏查看完整终端网格。"}
{mobileChartRow && (
)}
{mobileActiveGroup?.rows.map((row) => ( ))}
{/* Mobile Selected Row Detail */} {selectedRow && (

{rowName(selectedRow)}

{[ ["Obs", temp(selectedRow.current_temp, selectedRow.temp_symbol)], ["High", temp(selectedRow.current_max_so_far, selectedRow.temp_symbol)], ["DEB", temp(selectedRow.deb_prediction, selectedRow.temp_symbol)], ["Gap", temp(selectedRow.signed_gap ?? selectedRow.gap_to_target, selectedRow.temp_symbol)], ["Edge", pct(selectedRow.edge_percent)], ["Market", "--"], ].map(([label, value]) => (
{label}
{value}
))}
)}
{/* Desktop layout */}
{maximizedSlotIndex !== null ? ( // Maximized view
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" )} > String(r.city || "").toLowerCase() === visibleSlots[maximizedSlotIndex]) || null} allRows={filteredRegionRows} compact={false} onSearchClick={() => setActiveSearchSlotIndex(maximizedSlotIndex)} onMaximize={() => setMaximizedSlotIndex(null)} onClose={() => { handleSelectCityForSlot(maximizedSlotIndex, null); setMaximizedSlotIndex(null); }} isMaximized={true} disableClose={visibleSlots.filter(Boolean).length <= 1} /> {activeSearchSlotIndex === maximizedSlotIndex && ( { 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" /> )}
) : ( // Custom grid layout
{visibleSlots.map((cityInSlot, slotIndex) => { const isSlotActive = activeSlotIndex === slotIndex; const rowForSlot = cityInSlot ? filteredRegionRows.find( (r) => String(r.city || "").toLowerCase() === cityInSlot ) || null : null; if (!cityInSlot || !rowForSlot) { return (
setActiveSlotIndex(slotIndex)} onOpenSearch={() => setActiveSearchSlotIndex(slotIndex)} /> {activeSearchSlotIndex === slotIndex && ( { 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" /> )}
); } return (
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" )} > setActiveSearchSlotIndex(slotIndex)} onMaximize={() => { setMaximizedSlotIndex(slotIndex); setActiveSlotIndex(slotIndex); }} onClose={() => { handleSelectCityForSlot(slotIndex, null); }} isMaximized={false} disableClose={visibleSlots.filter(Boolean).length <= 1} /> {activeSearchSlotIndex === slotIndex && ( { 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" /> )}
); })}
)}
)}
); } function ScanTerminalScreen() { const [proAccess, setProAccess] = useState(() => createEmptyAccess(true), ); const loadAuthProfile = useCallback( async (accessToken?: string | null): Promise => { const headers: Record = { Accept: "application/json" }; const token = String(accessToken || "").trim(); if (token) headers.Authorization = `Bearer ${token}`; const response = await fetch("/api/auth/me", { cache: "no-store", headers, }); if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json() as Promise; }, [], ); // 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 canUseLocalFullAccess = hydrated && localFullAccess; const isAuthenticated = hydrated && (proAccess.authenticated || canUseLocalFullAccess); const isPro = hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess); const userLocalTime = useUserLocalClock(); const { themeMode } = useScanTerminalTheme(); const [selectedRegionKey, setSelectedRegionKey] = useState("all"); const [localTimezoneOffsetSeconds, setLocalTimezoneOffsetSeconds] = useState(null); const [useLocalTimezoneDefault, setUseLocalTimezoneDefault] = useState(false); const [visibleRegions, setVisibleRegions] = useState>(() => { 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; }; } 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, }) .then((payload) => { if (cancelled) return; setProAccess((prev) => mergeAccessStateWithAuthPayload(prev, payload)); }) .catch((error) => { if (cancelled) return; setProAccess((prev) => ( prev.subscriptionActive ? { ...prev, loading: false, error: String(error) } : { ...createEmptyAccess(false), error: String(error) } )); }); return () => { cancelled = true; }; }, [loadAuthProfile]); useEffect(() => { setSelectedRegionKey("all"); setLocalTimezoneOffsetSeconds(-new Date().getTimezoneOffset() * 60); }, []); const selectRegionManually = useCallback((key: string) => { setUseLocalTimezoneDefault(false); setSelectedRegionKey(key); }, []); const { refreshScanTerminalManually, scanLoading, terminalData } = useScanTerminalQuery({ isPro, proAccessLoading: !hydrated || (proAccess.loading && !canUseLocalFullAccess), timezoneOffsetSeconds: useLocalTimezoneDefault ? localTimezoneOffsetSeconds : null, tradingRegion: selectedRegionKey, }); const handleRefresh = useCallback(() => { clearCityDetailCache(); refreshScanTerminalManually(); }, [refreshScanTerminalManually]); const [cityFallbackRows, setCityFallbackRows] = useState([]); const rows = useMemo( () => { const scanRows = terminalData?.rows || []; return sortRowsByUserTime( mergeScanRowsWithCityFallbackRows(scanRows, cityFallbackRows), ); }, [cityFallbackRows, terminalData?.rows], ); const fallbackFetchedRef = useRef(false); useEffect(() => { if (!isPro || typeof fetch !== "function") return; if (fallbackFetchedRef.current) return; const controller = new AbortController(); fetch("/api/cities", { cache: "no-store", 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; setCityFallbackRows(cityListItemsToScanRows(payload.cities)); }) .catch(() => {}); return () => controller.abort(); }, [isPro]); const [searchQuery, setSearchQuery] = useState(""); const searchInputRef = useRef(null); const filteredRows = useMemo(() => { if (!searchQuery.trim()) return rows; const q = searchQuery.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, searchQuery]); const [selectedId, setSelectedId] = useState(null); const [selectedCity, setSelectedCity] = useState(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 (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) { return ( ); } if (!isAuthenticated || !isPro) { return ( ); } return ( ); } export function ScanTerminalDashboard() { return ; }