import { useState } from "react";
import { CloseOutlined, FolderOutlined, SettingOutlined } from "@ant-design/icons";
import { MEGA_NAV, MEGA_COLUMNS } from "@/utils/data";

interface Props {
  onClose: () => void;
  onOpen: (screen: string, label: string) => void;
}

export default function MegaNav({ onClose, onOpen }: Props) {
  const [activeId, setActiveId] = useState<string>(
    MEGA_NAV.find((s) => s.active)?.id ?? "sys"
  );
  const columns = MEGA_COLUMNS[activeId] ?? [];

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.4)",
        zIndex: 100,
        display: "flex",
      }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          display: "flex",
          flex: 1,
          background: "#fff",
          margin: "60px auto",
          maxWidth: 1100,
          height: "calc(100% - 120px)",
          border: "1px solid var(--border)",
          boxShadow: "0 6px 32px rgba(0,0,0,0.3)",
        }}
      >
        <div
          style={{
            width: 200,
            borderRight: "1px solid var(--border)",
            background: "var(--bg-app)",
            overflow: "auto",
          }}
        >
          {MEGA_NAV.map((s) => {
            const active = s.id === activeId;
            return (
              <div
                key={s.id}
                onClick={() => setActiveId(s.id)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  padding: "8px 12px",
                  fontSize: 12,
                  cursor: "pointer",
                  color: active ? "var(--accent-strong)" : "var(--text)",
                  background: active ? "var(--accent-soft)" : "transparent",
                  borderLeft: active ? "3px solid var(--accent)" : "3px solid transparent",
                  fontWeight: active ? 500 : 400,
                }}
              >
                {s.id === "sys" ? <SettingOutlined /> : <FolderOutlined />}
                {s.label}
              </div>
            );
          })}
        </div>
        <div
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "10px 16px",
              borderBottom: "1px solid var(--border)",
            }}
          >
            <div style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>
              {MEGA_NAV.find((s) => s.id === activeId)?.label}
            </div>
            <button
              onClick={onClose}
              style={{
                background: "transparent",
                border: "none",
                cursor: "pointer",
                fontSize: 14,
                color: "var(--text-muted)",
              }}
            >
              <CloseOutlined />
            </button>
          </div>
          <div
            style={{
              flex: 1,
              overflow: "auto",
              padding: 16,
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
              gap: 16,
              alignContent: "start",
            }}
          >
            {columns.length === 0 && (
              <div style={{ color: "var(--text-faint)", fontSize: 12 }}>
                此分类暂无配置内容
              </div>
            )}
            {columns.map((col) => (
              <div key={col.title}>
                <div
                  style={{
                    fontSize: 12,
                    fontWeight: 500,
                    color: "var(--text-muted)",
                    paddingBottom: 6,
                    borderBottom: "1px solid var(--border)",
                    marginBottom: 6,
                  }}
                >
                  {col.title}
                </div>
                {col.items.map((it) => (
                  <div
                    key={it.label}
                    onClick={() => {
                      if (it.screen) {
                        onOpen(it.screen, it.label);
                        onClose();
                      }
                    }}
                    style={{
                      padding: "5px 6px",
                      fontSize: 12,
                      cursor: it.screen ? "pointer" : "default",
                      color: it.screen
                        ? it.featured
                          ? "var(--accent-strong)"
                          : "var(--text)"
                        : "var(--text-faint)",
                      fontWeight: it.featured ? 500 : 400,
                      borderRadius: 2,
                    }}
                    onMouseEnter={(e) => {
                      if (it.screen) e.currentTarget.style.background = "var(--bg-row-hover)";
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.background = "transparent";
                    }}
                  >
                    {it.label}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}