import Link from "next/link";
import type { ReactNode } from "react";

const navItems = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/watchlist", label: "自选股" },
  { href: "/recommendations", label: "每日推荐" },
  { href: "/trading", label: "模拟盘" },
  { href: "/settings", label: "设置" },
];

const quickLinks = [
  { href: "/stocks/600519", label: "600519" },
];

export default function ShellLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-dvh bg-background text-foreground">
      <div className="mx-auto flex w-full max-w-6xl gap-6 px-4 py-6">
        <aside className="hidden w-56 shrink-0 md:block">
          <div className="rounded-xl border border-black/10 bg-white/70 p-4 dark:border-white/10 dark:bg-black/30">
            <div className="text-sm font-semibold">Stock Web</div>
            <div className="mt-1 text-xs text-black/60 dark:text-white/60">
              选股系统（MVP）
            </div>
            <nav className="mt-4 flex flex-col gap-1">
              {navItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="rounded-lg px-3 py-2 text-sm transition-colors hover:bg-black/[.04] dark:hover:bg-white/[.06]"
                >
                  {item.label}
                </Link>
              ))}
            </nav>

            <div className="mt-6 text-xs font-medium text-black/60 dark:text-white/60">
              快速打开
            </div>
            <div className="mt-2 flex flex-wrap gap-2">
              {quickLinks.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="rounded-md border border-black/10 px-2 py-1 text-xs hover:bg-black/[.04] dark:border-white/10 dark:hover:bg-white/[.06]"
                >
                  {item.label}
                </Link>
              ))}
            </div>
          </div>
        </aside>

        <main className="min-w-0 flex-1 rounded-xl border border-black/10 bg-white/70 p-5 dark:border-white/10 dark:bg-black/30">
          {children}
        </main>
      </div>
    </div>
  );
}