import Link from "next/link";

import { CandlesChart } from "@/src/components/charts/CandlesChart";
import { mockGetDailyOhlcv, mockGetQuote } from "@/src/market/providers/mockProvider";

export default async function StockPage({
  params,
}: {
  params: Promise<{ code: string }>;
}) {
  const { code } = await params;

  const bars = mockGetDailyOhlcv(code, 200);
  const quote = mockGetQuote(code);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-4">
        <div>
          <div className="text-xs text-black/60 dark:text-white/60">个股</div>
          <h1 className="text-xl font-semibold">
            <span className="font-mono">{code}</span>
          </h1>
        </div>
        <Link
          href="/watchlist"
          className="rounded-lg border border-black/10 px-3 py-2 text-xs transition-colors hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
        >
          返回自选股
        </Link>
      </div>

      <div className="grid gap-3 md:grid-cols-3">
        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
          <div className="text-xs text-black/60 dark:text-white/60">最新价</div>
          <div className="mt-1 text-lg font-semibold">{quote.price.toFixed(2)}</div>
        </div>
        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
          <div className="text-xs text-black/60 dark:text-white/60">涨跌幅</div>
          <div className="mt-1 text-lg font-semibold">
            {quote.changePct != null ? `${quote.changePct.toFixed(2)}%` : "-"}
          </div>
        </div>
        <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
          <div className="text-xs text-black/60 dark:text-white/60">更新时间</div>
          <div className="mt-1 text-sm">{new Date(quote.asOf).toLocaleString()}</div>
        </div>
      </div>

      <div className="rounded-xl border border-black/10 p-4 dark:border-white/10">
        <div className="text-sm font-medium">日线K线（Mock 数据）</div>
        <div className="mt-3">
          <CandlesChart bars={bars} />
        </div>
      </div>

      <div className="text-xs text-black/60 dark:text-white/60">
        注：当前为 Mock 行情。后续 M2 会替换为真实数据源（Next Route Handler 代理）。
      </div>
    </div>
  );
}