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

import { LeftNav } from "./LeftNav";

interface AppShellProps {
  children: ReactNode;
  // 顶栏右侧的上下文信息（如作品名 / 进度）。
  title?: string;
  subtitle?: string;
}

// 全局外壳：顶栏(64px) + 左导航 + 主区（UX §5.1）。
export function AppShell({ children, title, subtitle }: AppShellProps) {
  return (
    <div className="min-h-screen">
      <header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-6">
        <Link
          href="/"
          className="font-serif text-xl text-cinnabar"
          aria-label="返回作品库"
        >
          墨痕
        </Link>
        {title ? (
          <span className="font-serif text-lg text-ink">{title}</span>
        ) : null}
        {subtitle ? (
          <span className="font-mono text-xs text-ink-soft">{subtitle}</span>
        ) : null}
        <nav className="ml-auto flex items-center gap-4 text-sm">
          <Link
            href="/settings/providers"
            className="text-ink-soft hover:text-cinnabar"
          >
            设置
          </Link>
        </nav>
      </header>
      <div className="flex">
        <LeftNav />
        <main className="min-h-[calc(100vh-4rem)] flex-1 bg-bg">{children}</main>
      </div>
    </div>
  );
}