import type { ReactNode } from "react";
import Link from "next/link";
import LogoutButton from "@/components/logout-button";
import type { PublicUser } from "@/lib/types";

interface NavigationShellProps {
  currentUser: PublicUser;
  activePath: string;
  title: string;
  description: string;
  children: ReactNode;
}

export default function NavigationShell({
  currentUser,
  activePath,
  title,
  description,
  children,
}: NavigationShellProps) {
  const navigationItems = [
    {
      href: "/studio",
      label: "生成中心",
      description: "输入 Prompt，生成并下载图片",
    },
    {
      href: "/history",
      label: "历史记录",
      description:
        currentUser.role === "admin"
          ? "查看所有用户生成过的图片"
          : "回看自己曾经生成的图片",
    },
    ...(currentUser.role === "admin"
      ? [
          {
            href: "/admin",
            label: "管理后台",
            description: "用户、角色和额度配置",
          },
        ]
      : []),
  ];

  return (
    <div className="dashboard-shell">
      <aside className="dashboard-sidebar">
        <div className="brand-lockup">
          <div className="brand-mark" />
          <div>
            <p className="eyebrow">Image Prompt Studio</p>
            <h1>Apple-like Workspace</h1>
          </div>
        </div>

        <div className="sidebar-card">
          <span className="sidebar-label">当前用户</span>
          <strong>{currentUser.username}</strong>
          <p className="sidebar-copy">
            {currentUser.role === "admin"
              ? "管理员，无限额"
              : "普通用户，受额度限制"}
          </p>
        </div>

        <nav className="sidebar-nav">
          {navigationItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={
                item.href === activePath
                  ? "sidebar-link sidebar-link-active"
                  : "sidebar-link"
              }
            >
              <strong>{item.label}</strong>
              <span>{item.description}</span>
            </Link>
          ))}
        </nav>

        <div className="sidebar-actions">
          <LogoutButton />
        </div>
      </aside>

      <main className="dashboard-main">
        <header className="page-hero">
          <div>
            <p className="eyebrow">Workspace</p>
            <h2>{title}</h2>
            <p className="hero-copy">{description}</p>
          </div>
          <div className="hero-orbs" aria-hidden="true">
            <div className="hero-orb hero-orb-blue" />
            <div className="hero-orb hero-orb-pink" />
            <div className="hero-orb hero-orb-silver" />
          </div>
        </header>

        <div className="page-content">{children}</div>
      </main>
    </div>
  );
}