"use client";

import Link from "next/link";
import { EquityCanvas } from "./EquityCanvas";
import { useLiveSimulation } from "./useLiveSimulation";

const money = (value:number) => `$${value.toLocaleString("zh-CN",{minimumFractionDigits:2,maximumFractionDigits:2})}`;

export function TerminalPreview() {
  const { data, connected, error } = useLiveSimulation();
  const simulation = data.shadowV2;
  const account = simulation?.account ?? data.account;
  const positions = simulation?.positions ?? data.positions;
  const curve = simulation?.equityCurve ?? data.equityCurve;
  const points = simulation?.equityPoints ?? data.equityPoints;
  const stamp = new Date(data.generatedAt).toLocaleTimeString("zh-CN", { hour12: false, timeZone: "Asia/Shanghai" });
  return <section className="terminal-preview">
    <div className="terminal-top"><div><span className="kicker">RISK MANAGED / PAPER</span><h2>模拟策略</h2></div><span className={`running ${connected ? "" : "offline"}`}><i />{connected ? "每秒同步" : "正在连接"}</span></div>
    <div className="terminal-metrics"><div><span>账户权益</span><b>{money(account.equity)}</b><em>{((account.equity/account.starting_cash-1)*100).toFixed(2)}%</em></div><div><span>持仓市值</span><b>{money(account.market_value)}</b><em>{positions.filter(p=>p.qty>0).length} 个活跃持仓</em></div><div><span>当前回撤</span><b>{(account.drawdown*100).toFixed(2)}%</b><em>熔断线 −3.00%</em></div></div>
    <Link className="chart-entry" href="/optimize" aria-label="进入模拟策略详情"><EquityCanvas compact points={points} curve={curve} /><span>点击进入模拟策略 <b>↗</b></span></Link>
    <div className="terminal-foot"><span>Alpaca IEX · {data.marketData.status}</span><span>{simulation?.tradeCount ?? 0} 笔模拟成交</span><span>{connected ? `更新 ${stamp}` : `离线 ${error ?? "重试中"}`}</span><Link href="/optimize">策略详情 →</Link></div>
  </section>;
}