/* global React */
const { useState } = React;

function NavIcon({ name, size = 17 }) {
  const s = {
    width: size,
    height: size,
    stroke: "currentColor",
    fill: "none",
    strokeWidth: 1.67,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  if (name === "search")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <circle cx="11" cy="11" r="7" />
        <path d="m20 20-3.5-3.5" />
      </svg>
    );
  if (name === "chevron")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <polyline points="9 6 15 12 9 18" />
      </svg>
    );
  if (name === "caret")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <polyline points="6 9 12 15 18 9" />
      </svg>
    );
  if (name === "globe")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <circle cx="12" cy="12" r="9" />
        <path d="M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18" />
      </svg>
    );
  if (name === "user")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <circle cx="12" cy="8" r="4" />
        <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" />
      </svg>
    );
  if (name === "close")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <path d="M6 6l12 12M18 6l-6 12" />
      </svg>
    );
  if (name === "menu")
    return (
      <svg viewBox="0 0 24 24" {...s}>
        <path d="M4 7h16M4 12h16M4 17h16" />
      </svg>
    );
  return null;
}

const NAV_ITEMS = [
  { id: "home", label: "홈", href: "#/" },
  {
    id: "food",
    label: "맛집-핫플",
    href: "#/맛집/우정",
    items: [
      {
        label: "맛집",
        href: "#/맛집/우정",
        icon: (
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" />
            <path d="M7 2v20" />
            <path d="M21 15V2a5 5 0 0 0-5 5v6h3.5" />
            <path d="M19.5 13H21v9" />
          </svg>
        ),
      },
      {
        label: "카페",
        href: "#/맛집/카페",
        icon: (
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
            <line x1="6" y1="1" x2="6" y2="4" />
            <line x1="10" y1="1" x2="10" y2="4" />
            <line x1="14" y1="1" x2="14" y2="4" />
          </svg>
        ),
      },
      {
        label: "구역근처 명소",
        href: "#/맛집/구역내명소",
        icon: (
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
          </svg>
        ),
      },
      {
        label: "구역외 명소",
        href: "#/맛집/추천관광",
        icon: (
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <circle cx="12" cy="12" r="10" />
            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
          </svg>
        ),
      },
    ],
  },
  {
    id: "news",
    label: "안내",
    href: "#/안내/정보2",
    items: [
      {
        label: "의료 정보",
        href: "#/안내/정보2",
        icon: (
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.7"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
          </svg>
        ),
      },
    ],
  },
];

function Nav() {
  const [openKey, setOpenKey] = useState(null);
  const [mobile, setMobile] = useState(false);
  const [expandedId, setExpandedId] = useState(null);

  const openMobileMenu = () => {
    setExpandedId(null);
    setMobile(true);
  };
  const closeMobileMenu = () => {
    setMobile(false);
    setExpandedId(null);
  };
  const toggleExpand = (id) =>
    setExpandedId((prev) => (prev === id ? null : id));

  return (
    <>
      <header className="jw-nav">
        <div className="jw-nav-inner">
          <a className="jw-brand" href="#" aria-label="JW.ORG 홈페이지로 가기">
            <JWLogomark />
            <span className="jw-brand-word">양정</span>
          </a>

          <nav className="jw-nav-items" aria-label="기본 메뉴">
            {NAV_ITEMS.map((item) => (
              <div
                key={item.id}
                className={
                  "jw-nav-item" + (openKey === item.id ? " is-open" : "")
                }
                onMouseEnter={() => item.items && setOpenKey(item.id)}
                onMouseLeave={() => item.items && setOpenKey(null)}
              >
                <a href={item.href || "#/"} className="jw-nav-link">
                  {item.label}
                  {item.items && <NavIcon name="caret" size={14} />}
                </a>
                {item.items && openKey === item.id && (
                  <div className="jw-megamenu">
                    <div className="jw-megamenu-title">{item.label}</div>
                    <ul>
                      {item.items.map((sub) => (
                        <li key={sub.label}>
                          <a href={sub.href}>{sub.label}</a>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            ))}
          </nav>

          <div className="jw-nav-right">
            <button
              className="jw-nav-menu-btn"
              aria-label="메뉴 보기"
              onClick={openMobileMenu}
              style={{
                background: "#e53e3e",
                color: "#fff",
                border: "none",
                borderRadius: 6,
                padding: "6px 14px",
                fontSize: "0.85rem",
                fontWeight: 700,
                fontFamily: "inherit",
                cursor: "pointer",
                letterSpacing: "0.02em",
              }}
            >
              메뉴
            </button>
          </div>
        </div>
      </header>

      {mobile && (
        <div className="jw-mobile-drawer" onClick={closeMobileMenu}>
          <div className="jw-mobile-panel" onClick={(e) => e.stopPropagation()}>
            {/* 헤더 */}
            <div className="jw-mobile-head">
              <span className="jw-mobile-title">메뉴</span>
              <button
                onClick={closeMobileMenu}
                aria-label="닫기"
                style={{
                  background: "#e0e0e0",
                  border: "none",
                  borderRadius: 6,
                  width: 36,
                  height: 36,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  cursor: "pointer",
                  flexShrink: 0,
                }}
              >
                <svg
                  viewBox="0 0 24 24"
                  width="18"
                  height="18"
                  stroke="#222"
                  strokeWidth="2.5"
                  strokeLinecap="round"
                >
                  <line x1="6" y1="6" x2="18" y2="18" />
                  <line x1="18" y1="6" x2="6" y2="18" />
                </svg>
              </button>
            </div>

            {/* 아코디언 리스트 */}
            <ul
              className="jw-mobile-list"
              style={{ flex: 1, overflowY: "auto" }}
            >
              {NAV_ITEMS.map((i) => {
                const isOpen = expandedId === i.id;
                return (
                  <li key={i.id}>
                    {/* 메인 항목 */}
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        borderBottom: "1px solid #e8e8e8",
                      }}
                    >
                      <a
                        href={i.href || "#/"}
                        onClick={
                          i.items
                            ? (e) => {
                                e.preventDefault();
                                toggleExpand(i.id);
                              }
                            : closeMobileMenu
                        }
                        style={{
                          flex: 1,
                          display: "block",
                          padding: "17px 20px",
                          fontSize: "18px",
                          fontWeight: 500,
                          color: isOpen ? "#2d5493" : "#222",
                          textDecoration: "none",
                          background: isOpen ? "#e8eef8" : "transparent",
                        }}
                      >
                        {i.label}
                      </a>
                      {i.items && (
                        <button
                          onClick={() => toggleExpand(i.id)}
                          style={{
                            background: isOpen ? "#e8eef8" : "transparent",
                            border: "none",
                            borderLeft: "1px solid #e8e8e8",
                            padding: "17px 18px",
                            cursor: "pointer",
                            color: isOpen ? "#2d5493" : "#4a6da7",
                            display: "flex",
                            alignItems: "center",
                            transition: "transform 0.2s",
                          }}
                          aria-label={isOpen ? "접기" : "펼치기"}
                        >
                          <svg
                            viewBox="0 0 24 24"
                            width="16"
                            height="16"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            style={{
                              transform: isOpen
                                ? "rotate(180deg)"
                                : "rotate(0deg)",
                              transition: "transform 0.2s",
                            }}
                          >
                            <polyline points="6 9 12 15 18 9" />
                          </svg>
                        </button>
                      )}
                    </div>

                    {/* 서브 항목 (아코디언) */}
                    {i.items && isOpen && (
                      <ul
                        style={{
                          listStyle: "none",
                          padding: 0,
                          margin: 0,
                          background: "#f7f9fc",
                        }}
                      >
                        {i.items.map((sub) => (
                          <li
                            key={sub.label}
                            style={{ borderBottom: "1px solid #e8e8e8" }}
                          >
                            <a
                              href={sub.href}
                              onClick={closeMobileMenu}
                              style={{
                                display: "flex",
                                alignItems: "center",
                                gap: 12,
                                padding: "14px 20px 14px 28px",
                                fontSize: "17px",
                                color: "#4a6da7",
                                textDecoration: "none",
                              }}
                            >
                              {sub.icon && (
                                <span
                                  style={{
                                    flexShrink: 0,
                                    color: "#4a6da7",
                                    display: "flex",
                                  }}
                                >
                                  {sub.icon}
                                </span>
                              )}
                              {sub.label}
                            </a>
                          </li>
                        ))}
                      </ul>
                    )}
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      )}
    </>
  );
}

function JWLogomark() {
  // Custom non-infringing monogram: "J W" in a rounded square, matching system aesthetic.
  return (
    <svg className="jw-logomark" viewBox="0 0 32 32" aria-hidden="true">
      <rect
        x="0"
        y="0"
        width="32"
        height="32"
        rx="0"
        style={{ fill: "rgb(9, 91, 172)" }}
      />
      <text
        x="16"
        y="24"
        textAnchor="middle"
        fontFamily="Noto Sans KR, sans-serif"
        fontWeight="600"
        fontSize="22"
        fill="#fff"
        letterSpacing="-0.8"
      >
        YJ
      </text>
    </svg>
  );
}

window.Nav = Nav;
window.NavIcon = NavIcon;
window.JWLogomark = JWLogomark;