"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  adminNavItems,
  adminSectionMeta,
  getAdminSection,
  type AdminSection,
} from "./admin-config";
import styles from "./platform-shell.module.css";

type AdminFrameProps = {
  section: AdminSection;
  title?: string;
  description?: string;
  actions?: React.ReactNode;
  children: React.ReactNode;
};

export function AdminFrame(props: AdminFrameProps) {
  const pathname = usePathname();
  const activeSection = getAdminSection(pathname);
  const meta = adminSectionMeta[props.section];

  return (
    <main className={styles.page}>
      <div className={styles.workspace}>
        <aside className={styles.sidebar}>
          <div className={styles.sidebarHeader}>
            <div>
              <p className={styles.pageKicker}>SentAI Console</p>
              <h2>后台工作台</h2>
              <p>围绕资源管理、执行效率和排障路径设计，而不是堆叠零散功能。</p>
            </div>
          </div>
          <div className={styles.navList}>
            {adminNavItems.map((item) => (
              <Link
                key={item.href}
                className={styles.navItem}
                data-active={item.key === activeSection}
                href={item.href}
              >
                <strong>{item.label}</strong>
                <span>{item.desc}</span>
              </Link>
            ))}
          </div>
        </aside>

        <section className={styles.mainContent}>
          <section className={styles.panel}>
            <header className={styles.pageHeader}>
              <div>
                <p className={styles.pageKicker}>
                  {adminNavItems.find((item) => item.key === props.section)?.label}
                </p>
                <h2>{props.title ?? meta.title}</h2>
                <p>{props.description ?? meta.desc}</p>
              </div>
              {props.actions ? <div className={styles.buttonRow}>{props.actions}</div> : null}
            </header>
          </section>
          {props.children}
        </section>
      </div>
    </main>
  );
}
