import { Check } from "lucide-react";
import { IconKitSvg } from "./IconKitSvg";
import type { Product, Project, Team, User } from "../types";
import type { Notice, Page } from "../routes/route-config";

type Navigate = (page: Page) => void;

type NavDef = { id: string; page: Page; label: string; icon: string; badge?: number };

const NAV: NavDef[] = [
  { id: "dashboard", page: "dashboard", label: "工作台", icon: "dashboard" },
  { id: "products", page: "products", label: "商品库", icon: "package" },
  { id: "projects", page: "projects", label: "视频项目", icon: "clapperboard" },
  { id: "asset-factory", page: "assetFactory", label: "图片生成", icon: "sparkles" },
  { id: "library", page: "library", label: "资产库", icon: "library" },
  { id: "team", page: "team", label: "团队", icon: "users" },
  { id: "account", page: "account", label: "消费", icon: "creditCard" },
  { id: "settings", page: "settings", label: "设置", icon: "settings" }
];

const PAGE_TO_NAV: Partial<Record<Page, Page>> = {
  dashboard: "dashboard",
  products: "products",
  productDetail: "products",
  productCreateUpload: "products",
  projects: "projects",
  projectWizard: "projects",
  pipeline: "projects",
  assetFactory: "assetFactory",
  imageOptimize: "assetFactory",
  modelPhoto: "assetFactory",
  modelPhotoDemoA: "assetFactory",
  modelPhotoDemoB: "assetFactory",
  platformCover: "assetFactory",
  library: "library",
  team: "team",
  account: "account",
  settings: "settings",
  settingsNotify: "settings"
};

export function Sidebar({ page, navigate, user, team, products, projects }: {
  page: Page;
  navigate: Navigate;
  user: User;
  team: Team | null;
  products: Product[];
  projects: Project[];
}) {
  const activeNav = PAGE_TO_NAV[page];
  const badges: Partial<Record<string, number>> = { products: products.length, projects: projects.length };
  const avatar = (team?.name || user.username || "A").slice(0, 1).toUpperCase();
  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <a className="brand" href="/dashboard" aria-label="Airshelf 工作台" onClick={(event) => { event.preventDefault(); navigate("dashboard"); }}>
          <span className="brand-clip"><img className="brand-logo" src="/assets/logo.png" alt="Airshelf" /></span>
        </a>
      </div>
      <button className="sidebar-toggle" type="button" aria-label="收窄导航" title="收窄导航">
        <span className="sidebar-toggle-icon sidebar-toggle-icon--collapse"><IconKitSvg name="chevronLeft" size={18} strokeWidth={1.8} /></span>
        <span className="sidebar-toggle-icon sidebar-toggle-icon--expand"><IconKitSvg name="chevronRight" size={18} strokeWidth={1.8} /></span>
      </button>
      <div className="search-box" title="搜索">
        <IconKitSvg name="search" />
        <input id="global-search" placeholder="搜索" readOnly aria-label="打开全局搜索" />
        <span className="kbd">Ctrl K</span>
      </div>
      <div className="nav-section">主要</div>
      <nav>
        {NAV.map((item) => (
          <a
            key={item.id}
            href={`/${item.id}`}
            className={activeNav === item.page ? "active" : ""}
            title={item.label}
            aria-label={item.label}
            onClick={(event) => { event.preventDefault(); navigate(item.page); }}
          >
            <IconKitSvg name={item.icon} />
            <span>{item.label}</span>
            {badges[item.id] !== undefined && <span className="pill-mini">{badges[item.id]}</span>}
          </a>
        ))}
      </nav>
      <div className="aside-foot">
        <div className="user">
          <div className="av">{avatar}</div>
          <div className="em">{team?.name || user.username}</div>
        </div>
      </div>
    </aside>
  );
}

export function Decorations() {
  // 与设计稿 shell.js 一致:grid-bg 底纹 + 4 个 sq-mark(写死坐标,不压内容)
  return (
    <>
      <div className="grid-bg" />
      <span className="sq-mark" style={{ top: 238, left: 478 }} />
      <span className="sq-mark" style={{ top: 478, left: 1198 }} />
      <span className="sq-mark" style={{ bottom: 300, left: 238 }} />
      <span className="sq-mark" style={{ top: 718, right: 240 }} />
    </>
  );
}

export function CornerMarks() {
  return (
    <>
      <CornerMark pos="tl" />
      <CornerMark pos="tr" />
      <CornerMark pos="bl" />
      <CornerMark pos="br" />
    </>
  );
}

export function ToastLike({ notice }: { notice: NonNullable<Notice> }) {
  return (
    <div className={`inline-toast ${notice.type}`}>
      <div className="ic-t"><Check size={12} /></div>
      <div className="txt">{notice.text}<span className="mono">[ {notice.type.toUpperCase()} ]</span></div>
    </div>
  );
}

export function CornerMark({ pos }: { pos: "tl" | "tr" | "bl" | "br" }) {
  return (
    <span className={`corner-mark ${pos}`}>
      <svg viewBox="0 0 22 21" fill="none">
        <path d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z" fill="currentColor" />
      </svg>
    </span>
  );
}
