import { useEffect, useState } from "react";
import { AccountsSection } from "./AccountsSection";
import { RecordsSection } from "./RecordsSection";
import { ZonesSection } from "./ZonesSection";

const MOBILE_SIDEBAR_MQ = "(max-width: 900px)";

/** 解锁后的主布局 */
export function MainLayout() {
  const [isNarrow, setIsNarrow] = useState(() =>
    typeof window !== "undefined" ? window.matchMedia(MOBILE_SIDEBAR_MQ).matches : false,
  );
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia(MOBILE_SIDEBAR_MQ);
    const onChange = () => {
      const narrow = mq.matches;
      setIsNarrow(narrow);
      if (!narrow) setMobileSidebarOpen(false);
    };
    onChange();
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

  useEffect(() => {
    if (!mobileSidebarOpen || !isNarrow) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setMobileSidebarOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [mobileSidebarOpen, isNarrow]);

  useEffect(() => {
    if (isNarrow && mobileSidebarOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.body.style.overflow = prev;
      };
    }
    return undefined;
  }, [isNarrow, mobileSidebarOpen]);

  return (
    <div id="app" className="layout" aria-hidden="false">
      <header className="topbar">
        <div className="topbar-start">
          <button
            type="button"
            className="btn ghost small sidebar-menu-btn"
            id="btn-sidebar-menu"
            aria-expanded={mobileSidebarOpen}
            aria-controls="sidebar"
            onClick={() => setMobileSidebarOpen((v) => !v)}
          >
            账号与域名
          </button>
          <div className="brand">
            <img className="brand-logo" src="/logo.png" alt="" width={40} height={40} />
            <div>
              <strong>Domainflare</strong>
              <div className="muted tiny">Cloudflare 域名解析管理面板</div>
            </div>
          </div>
        </div>
      </header>

      {isNarrow ? (
        <button
          type="button"
          className={`sidebar-backdrop${mobileSidebarOpen ? " is-visible" : ""}`}
          tabIndex={-1}
          aria-hidden="true"
          onClick={() => setMobileSidebarOpen(false)}
        />
      ) : null}
      <div className="shell">
        <aside
          className={`sidebar${mobileSidebarOpen && isNarrow ? " sidebar--open" : ""}`}
          id="sidebar"
          aria-hidden={isNarrow ? !mobileSidebarOpen : false}
        >
          <div className="sidebar-drawer-head">
            <span className="sidebar-drawer-title">账号与域名</span>
            <button
              type="button"
              className="btn ghost tiny"
              id="btn-sidebar-close"
              onClick={() => setMobileSidebarOpen(false)}
            >
              关闭
            </button>
          </div>
          <div className="sidebar-scroll">
            <AccountsSection />
            <ZonesSection />
          </div>
        </aside>

        <main className="main">
          <RecordsSection />
        </main>
      </div>
    </div>
  );
}
