import { useState } from "react";
import { Icon } from "../../../components/Icon";
import { AdaptersDrawer, AdaptersRail } from "./AdaptersNav";
import { PLATFORM_LABEL } from "../channelFields";
import { platformOf } from "./channelUtils";
import { useAdapterNav, type AdapterNav } from "./useAdapterNav";
import { OverviewPage } from "./OverviewPage";
import { CreatePage } from "./CreatePage";
import { ListPage } from "./ListPage";
import { GlobalLogPage } from "./GlobalLogPage";
import { AdapterDetailPage } from "./AdapterDetailPage";

/** Title for the mobile sub-nav bar; also echoed by the rail when in a detail page. */
function pageTitle(nav: AdapterNav): string {
  if (nav.kind === "detail") {
    const platform = platformOf(nav.adapter);
    return `${PLATFORM_LABEL[platform] ?? platform} · ${nav.adapter}`;
  }
  switch (nav.page) {
    case "create": return "新建适配器";
    case "list": return "活动适配器";
    case "log": return "模块总日志";
    default: return "活动总览";
  }
}

function renderPage(nav: AdapterNav, navigate: (n: AdapterNav) => void): React.ReactNode {
  if (nav.kind === "detail") {
    return <AdapterDetailPage key={nav.adapter} adapter={nav.adapter} onBack={() => navigate({ kind: "page", page: "list" })} />;
  }
  switch (nav.page) {
    case "create": return <CreatePage />;
    case "list": return <ListPage navigate={navigate} />;
    case "log": return <GlobalLogPage />;
    default: return <OverviewPage navigate={navigate} />;
  }
}

/** Adapter module shell: sub-sidebar + 4 pages, sub-routed by the location hash
 *  (design/17 §1). Desktop keeps the rail sticky at the top; mobile (<768px)
 *  collapses it into a drawer opened from a hamburger in the page title bar. */
export function ChannelsModule(): React.ReactNode {
  const { nav, navigate } = useAdapterNav();
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="flex flex-col gap-4 md:flex-row md:items-start">
      <AdaptersRail
        nav={nav}
        onNavigate={navigate}
        className="hidden w-[var(--mu-sidebar-w)] shrink-0 md:sticky md:top-0 md:self-start md:flex"
      />
      <div className="min-w-0 flex-1 space-y-4">
        <div className="flex items-center gap-2 md:hidden">
          <button
            onClick={() => setDrawerOpen(true)}
            aria-label="打开适配器导航"
            title="适配器菜单"
            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--mu-radius)] text-[var(--mu-text-mid)] transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-4)] active:scale-95"
          >
            <Icon name="menu" size={20} />
          </button>
          <h1 className="min-w-0 flex-1 truncate whitespace-nowrap text-base font-semibold">{pageTitle(nav)}</h1>
        </div>
        {renderPage(nav, navigate)}
      </div>
      <AdaptersDrawer
        open={drawerOpen}
        nav={nav}
        onNavigate={(n) => {
          navigate(n);
          setDrawerOpen(false);
        }}
        onClose={() => setDrawerOpen(false)}
      />
    </div>
  );
}