"use client";

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

const money=(value:number)=>`$${value.toLocaleString("zh-CN",{minimumFractionDigits:2,maximumFractionDigits:2})}`;
const clock=(value:string)=>new Date(value).toLocaleTimeString("zh-CN",{hour12:false,timeZone:"Asia/Shanghai"});
const marketStatus=(status:string)=>({live:"IEX 实时行情 · 可模拟交易","market-closed-or-stale":"休市或行情已过期 · 禁止交易","credentials-required":"等待配置 Alpaca 密钥 · 禁止交易",bootstrapping:"正在装载实盘历史分钟线",error:"行情接口异常 · 禁止交易",unavailable:"行情引擎不可用 · 禁止交易",connecting:"正在连接 Alpaca 行情"}[status]??status);

export function LiveTerminal() {
  const { data, connected, error } = useLiveSimulation();
  const updated = new Date(data.generatedAt).toLocaleString("zh-CN", { hour12:false, timeZone:"Asia/Shanghai" });
  const returnRate = (data.account.equity / data.account.starting_cash - 1) * 100;
  const activePositions = data.positions.filter((position) => position.qty > 0).length;

  return <section className="quant-workbench">
    <div className="quant-console">
      <header className="console-head" id="overview">
        <div><span className="kicker">历史模拟账本 / 8765 模型</span><h1>历史 8765 模拟账户</h1></div>
        <div className="console-head-status"><time>{updated}</time><div className={`running ${connected ? "" : "offline"}`}><i/>{connected ? "每秒同步" : "连接中"}</div></div>
      </header>

      <div className="simulation-notice"><b>实盘行情模拟</b><span>{marketStatus(data.marketData.status)}。采用 Alpaca 免费 IEX 行情（仅 IEX、非全美 SIP 综合行情）；无新鲜实盘价时绝不使用合成价格，也不会成交。</span></div>

      <div className="metric-row">
        <div><span>账户权益</span><b>{money(data.account.equity)}</b><em className={returnRate < 0 ? "negative" : ""}>总收益 {returnRate >= 0 ? "+" : ""}{returnRate.toFixed(2)}%</em></div>
        <div><span>可用现金</span><b>{money(data.account.cash)}</b><small>权益占比 {(data.account.cash/data.account.equity*100).toFixed(1)}%</small></div>
        <div><span>持仓市值</span><b>{money(data.account.market_value)}</b><small>{activePositions} 个活跃持仓</small></div>
        <div><span>当前回撤</span><b className={data.account.drawdown < 0 ? "negative" : ""}>{(data.account.drawdown*100).toFixed(2)}%</b><small>熔断线 −5.00%</small></div>
      </div>

      <div className="console-primary">
        <section className="console-card equity-card">
          <div className="console-card-head"><div><span>ACCOUNT EQUITY</span><h2>权益曲线</h2></div><div className={`running ${connected ? "" : "offline"}`}><i/>{connected ? "运行中" : "自动重连"}</div></div>
          <EquityCanvas points={data.equityPoints} curve={data.equityCurve} />
          <div className="chart-meta"><span>最近 {data.equityCurve.length || data.equityPoints.length} 个时间点</span><span>更新于 {clock(data.generatedAt)}</span></div>
        </section>

        <aside className="console-card strategy-card" id="strategy">
          <div className="console-card-head"><div><span>STRATEGY</span><h2>策略与风控</h2></div></div>
          <div className="strategy-name"><i>MA</i><div><b>MA-TREND-12/36</b><span>趋势跟随 · 多头限定</span></div></div>
          <dl>
            <div><dt>快 / 慢窗口</dt><dd>12 / 36 分钟</dd></div>
            <div><dt>单标的目标</dt><dd>18%</dd></div>
            <div><dt>信号阈值</dt><dd>±0.05%</dd></div>
            <div><dt>模拟滑点</dt><dd>1.5 bps</dd></div>
            <div><dt>模拟费用</dt><dd>0.5 bps</dd></div>
            <div><dt>最大回撤</dt><dd>5.00%</dd></div>
          </dl>
          <div className="strategy-foot"><span>{data.modelVersion ?? "market-price-8765-v1"}</span><b>{data.tradeCount.toLocaleString("zh-CN")} 笔累计成交</b></div>
        </aside>
      </div>

      <section className="v2-terminal-strip">
        <div><span>RISK MANAGED PAPER</span><h2>模拟策略</h2><p>独立影子账户 · 60/180 趋势 · 波动率缩仓 · 日亏 1% · 回撤 3% · 15:45 清仓</p></div>
        <div><span>影子权益</span><b>{money(data.shadowV2?.account.equity ?? 100_000)}</b><small>{data.shadowV2?.tradeCount ?? 0} 笔成交 · 不覆盖 v1</small></div>
        <div><span>实盘执行</span><b className="locked-text">LOCKED</b><small>代码已就绪，真实下单未授权</small></div>
        <Link href="/optimize">打开模拟策略 →</Link>
      </section>

      <section className="console-card table-section" id="positions">
        <div className="console-card-head"><div><span>POSITIONS</span><h2>当前持仓</h2></div><div className="price-strip">{data.positions.map((position)=><span key={position.symbol}>{position.symbol} <b>{position.price.toFixed(2)}</b></span>)}</div></div>
        <div className="responsive-table"><table><thead><tr><th>标的</th><th>数量</th><th>最新价</th><th>平均成本</th><th>市值</th><th>未实现盈亏</th></tr></thead><tbody>{data.positions.map(position=><tr key={position.symbol}><td><b>{position.symbol}</b></td><td>{position.qty}</td><td>{position.price.toFixed(2)}</td><td>{position.avg_cost ? position.avg_cost.toFixed(2) : "—"}</td><td>{money(position.market_value)}</td><td className={position.unrealized_pnl>0?"positive":position.unrealized_pnl<0?"negative":""}>{position.qty ? money(position.unrealized_pnl) : "—"}</td></tr>)}</tbody></table></div>
      </section>

      <section className="console-card table-section" id="executions">
        <div className="console-card-head"><div><span>EXECUTIONS</span><h2>最近模拟成交</h2></div><Link href="/terminal/executions">查看完整账本 →</Link></div>
        <div className="responsive-table"><table><thead><tr><th>时间（北京时间）</th><th>标的</th><th>方向</th><th>数量</th><th>成交价</th><th>成交额</th></tr></thead><tbody>{data.trades.slice(0,6).map(trade=><tr key={trade.id}><td>{new Date(trade.ts).toLocaleString("zh-CN",{hour12:false,timeZone:"Asia/Shanghai"})}</td><td><b>{trade.symbol}</b></td><td className={trade.side==="BUY"?"buy":"sell"}>{trade.side}</td><td>{trade.qty}</td><td>{trade.price.toFixed(2)}</td><td>{money(trade.qty*trade.price)}</td></tr>)}</tbody></table></div>
      </section>

      <div className="terminal-disclosure">页面每秒读取云端状态，但策略只在新的 1 分钟 IEX 实盘行情柱到达时评估；所有订单均为内部模拟撮合，不会发送到券商。账户与行情说明、旧版 8765 完整策略及实盘摩擦风险保留在<Link href="/vault">成果档案</Link>。{!connected && <span> 当前错误：{error ?? "正在自动重试"}</span>}</div>
    </div>
  </section>;
}