"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;
  embedded?: boolean;
  hideHeader?: boolean;
  children: React.ReactNode;
};

function NavIcon(props: { name: string }) {
  const common = {
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.8,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
  };

  switch (props.name) {
    case "overview":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="3.5" y="4" width="7" height="7" rx="1.5" {...common} />
          <rect x="13.5" y="4" width="7" height="4.5" rx="1.5" {...common} />
          <rect x="13.5" y="11.5" width="7" height="8.5" rx="1.5" {...common} />
          <rect x="3.5" y="14" width="7" height="6" rx="1.5" {...common} />
        </svg>
      );
    case "tasks":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="5" y="4" width="14" height="16" rx="2" {...common} />
          <path d="M9 8h6M9 12h6M9 16h4" {...common} />
          <path d="M9 4.5h6" {...common} />
        </svg>
      );
    case "reports":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 3.5h7l4 4V20H7z" {...common} />
          <path d="M14 3.5V8h4" {...common} />
          <path d="M9 12h6M9 16h6" {...common} />
        </svg>
      );
    case "runs":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 13h4l2.2-5 3.6 9 2.1-4H20" {...common} />
          <path d="M4 19h16" {...common} />
        </svg>
      );
    case "incidents":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="2.5" {...common} />
          <path d="M12 4.5v3M12 16.5v3M4.5 12h3M16.5 12h3M6.8 6.8l2.1 2.1M15.1 15.1l2.1 2.1M17.2 6.8l-2.1 2.1M8.9 15.1l-2.1 2.1" {...common} />
        </svg>
      );
    case "alerts":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4.5a4.5 4.5 0 0 0-4.5 4.5v2.3c0 .9-.3 1.8-.8 2.5L5.5 16h13l-1.2-2.2a5 5 0 0 1-.8-2.5V9A4.5 4.5 0 0 0 12 4.5Z" {...common} />
          <path d="M9.8 18a2.5 2.5 0 0 0 4.4 0" {...common} />
        </svg>
      );
    case "monitors":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="4" y="5" width="16" height="6" rx="1.5" {...common} />
          <rect x="4" y="13" width="16" height="6" rx="1.5" {...common} />
          <path d="M8 8h.01M8 16h.01M12 8h4M12 16h4" {...common} />
        </svg>
      );
    case "agents":
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="7" y="7" width="10" height="10" rx="2" {...common} />
          <path d="M10 10h4M10 14h4M12 3.5v2M20.5 12h-2M12 18.5v2M5.5 12h-2M17.2 6.8l1.4-1.4M17.2 17.2l1.4 1.4M6.8 17.2l-1.4 1.4M6.8 6.8 5.4 5.4" {...common} />
        </svg>
      );
    default:
      return null;
  }
}

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

  const content = (
    <div className={styles.workspace}>
      <aside className={styles.sidebar}>
        <div className={styles.sidebarHeader}>
          <div>
            <p className={styles.pageKicker}>SentAI Console</p>
            <h2>后台工作台</h2>
          </div>
        </div>
        <div className={styles.navList}>
          {adminNavItems.map((item) => (
            <Link
              key={item.href}
              className={styles.navItem}
              data-active={item.key === activeSection}
              href={item.href}
            >
              <span className={styles.navIcon} aria-hidden="true">
                <NavIcon name={item.icon} />
              </span>
              <strong>{item.label}</strong>
            </Link>
          ))}
        </div>
      </aside>

      <section className={styles.mainContent}>
        {props.hideHeader ? null : (
          <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>
  );

  if (props.embedded) {
    return content;
  }

  return <main className={styles.page}>{content}</main>;
}
