/* 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: "bible",
    label: "구역알기",
    href: "#/구역알기",
    items: [
      { label: "전포동 빌라", href: "#/구역알기/전포동-빌라" },
      { label: "양정 스윗첸", href: "#/구역알기/양정-스윗첸" },
      { label: "부전동 2번출구", href: "#/구역알기/부전동-2번출구" },
      { label: "기타등등", href: "#/구역알기/기타" },
    ],
  },
  {
    id: "library",
    label: "맛집",
    href: "#/맛집",
    items: [
      { label: "태진갈비", href: "#/맛집/태진갈비" },
      { label: "사모님돈가스", href: "#/맛집/사모님돈가스" },
      { label: "덮밥 본점", href: "#/맛집/덮밥-본점" },
      { label: "우정", href: "#/맛집/우정" },
      { label: "팔딱팔딱 횟집", href: "#/맛집/팔딱팔딱-횟집" },
    ],
  },
  { id: "news", label: "안내", href: "#/안내" },
  {
    id: "about",
    label: "관광",
    href: "#/관광",
    items: [
      { label: "양정 꽃시장", href: "#/관광/양정-꽃시장" },
      { label: "광안대교", href: "#/관광/광안대교" },
      { label: "기타등등", href: "#/관광/기타" },
    ],
  },
];

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

  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">yj.캠페인</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-icon-btn"
              aria-label="언어 선택"
              title="언어 선택: 한국어"
            >
              <NavIcon name="globe" />
              <span className="jw-nav-lang">한국어</span>
            </button>
            <button
              className="jw-nav-icon-btn"
              aria-label="JW.ORG 검색"
              onClick={() => setSearchOpen((o) => !o)}
            >
              <NavIcon name="search" />
            </button>
            <button
              className="jw-nav-icon-btn"
              aria-label="로그인"
              title="로그인"
            >
              <NavIcon name="user" />
            </button>
            <button
              className="jw-nav-icon-btn jw-nav-menu-btn"
              aria-label="메뉴 보기"
              onClick={() => setMobile(true)}
            >
              <NavIcon name="menu" />
            </button>
          </div>
        </div>

        {searchOpen && (
          <div className="jw-search-bar">
            <div className="jw-search-inner">
              <NavIcon name="search" size={18} />
              <input type="text" placeholder="JW.ORG 검색" autoFocus />
              <button
                className="jw-search-close"
                onClick={() => setSearchOpen(false)}
                aria-label="검색 닫기"
              >
                <NavIcon name="close" size={18} />
              </button>
            </div>
          </div>
        )}
      </header>

      {mobile && (
        <div className="jw-mobile-drawer" onClick={() => setMobile(false)}>
          <div className="jw-mobile-panel" onClick={(e) => e.stopPropagation()}>
            <div className="jw-mobile-head">
              <span className="jw-mobile-title">메뉴</span>
              <button
                className="jw-nav-icon-btn"
                onClick={() => setMobile(false)}
                aria-label="닫기"
              >
                <NavIcon name="close" />
              </button>
            </div>
            <ul className="jw-mobile-list">
              {NAV_ITEMS.map((i) => (
                <li key={i.id}>
                  <a href={i.href || "#/"} onClick={() => setMobile(false)}>{i.label}</a>
                </li>
              ))}
              <li>
                <a href="#">로그인</a>
              </li>
              <li>
                <a href="#">기부</a>
              </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;