/* global React, Wordmark, WordmarkCompact, StackMark, BrandMark, ROUTES */
// Navigation — three variants: top bar, side rail, minimal corner

const NAV_ITEMS = [
  { id: "home", label: "Ana Sayfa", route: { page: "home" } },
  { id: "archive", label: "Projeler", route: { page: "archive" } },
  { id: "about", label: "Hakkımızda", route: { page: "about" } },
  { id: "contact", label: "İletişim", route: { page: "contact" } },
];

// While intro is running, the morphing splash logo IS the visible mark.
// The nav-resident wordmark stays hidden so the morph reads as the logo
// arriving at its final home rather than overlapping a duplicate.
function maskedLogo(introDone, child) {
  return (
    <span
      style={{
        display: "inline-flex",
        opacity: introDone ? 1 : 0,
        visibility: introDone ? "visible" : "hidden",
        transition: "opacity 200ms ease 80ms",
      }}
    >
      {child}
    </span>
  );
}

function NavLink({ item, active, onClick, style }) {
  const href = ROUTES.routeToPath(item.route);
  return (
    <a
      href={href}
      onClick={(e) => {
        // Yeni sekmede açma isteklerine karışma
        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
        e.preventDefault();
        onClick();
      }}
      style={{
        cursor: "pointer",
        position: "relative",
        padding: "6px 0",
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.12em",
        textTransform: "uppercase",
        color: active ? "var(--fg)" : "var(--muted)",
        transition: "color 200ms ease",
        ...style,
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = active ? "var(--fg)" : "var(--muted)")}
    >
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        <span
          style={{
            display: "inline-block",
            width: active ? 14 : 0,
            height: 1,
            background: "var(--fg)",
            transition: "width 220ms ease",
          }}
        />
        {item.label}
      </span>
    </a>
  );
}

function TopNav({ route, navigate, accent, introDone }) {
  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 30,
        background: "color-mix(in oklab, var(--bg) 88%, transparent)",
        backdropFilter: "blur(10px)",
        WebkitBackdropFilter: "blur(10px)",
        borderBottom: "1px solid var(--line-soft)",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "18px 32px",
          gap: 32,
        }}
      >
        <button onClick={() => navigate({ page: "home" })} style={{ display: "flex", alignItems: "center" }}>
          {maskedLogo(introDone, <Wordmark height={22} />)}
        </button>
        <nav style={{ display: "flex", alignItems: "center", gap: 32 }}>
          {NAV_ITEMS.map((it) => (
            <NavLink
              key={it.id}
              item={it}
              active={route.page === it.route.page}
              onClick={() => navigate(it.route)}
            />
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <span className="t-mono" style={{ color: "var(--muted)" }}>Bergama · İzmir</span>
          <span className="t-mono" style={{ color: "var(--muted)" }}>{new Date().getFullYear()}</span>
          <span
            style={{
              width: 6, height: 6, borderRadius: "50%", background: "var(--accent)",
              animation: "pulse 2.4s ease-in-out infinite",
            }}
          />
        </div>
      </div>
    </header>
  );
}

function SideNav({ route, navigate, introDone }) {
  return (
    <aside
      style={{
        position: "fixed",
        top: 0, left: 0, bottom: 0,
        width: 200,
        padding: "32px 24px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        borderRight: "1px solid var(--line-soft)",
        background: "var(--bg)",
        zIndex: 30,
      }}
    >
      <button onClick={() => navigate({ page: "home" })} style={{ textAlign: "left" }}>
        {maskedLogo(introDone, <StackMark />)}
      </button>
      <nav style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 40 }}>
        {NAV_ITEMS.map((it) => (
          <NavLink
            key={it.id}
            item={it}
            active={route.page === it.route.page}
            onClick={() => navigate(it.route)}
            style={{ textAlign: "left" }}
          />
        ))}
      </nav>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <span className="t-meta">Bergama · İzmir</span>
        <span className="t-meta">est. 2014</span>
        <span className="t-meta">{new Date().getFullYear()}</span>
      </div>
    </aside>
  );
}

function MinimalNav({ route, navigate, introDone }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <header
        style={{
          position: "fixed",
          top: 22, left: 32, right: 32,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          zIndex: 30,
          pointerEvents: "none",
        }}
      >
        <button
          onClick={() => navigate({ page: "home" })}
          style={{ pointerEvents: "auto" }}
        >
          {maskedLogo(introDone, <WordmarkCompact height={20} />)}
        </button>
        <button
          onClick={() => setOpen((o) => !o)}
          className="t-mono"
          style={{
            pointerEvents: "auto",
            display: "flex",
            alignItems: "center",
            gap: 10,
            padding: "8px 14px",
            background: "var(--fg)",
            color: "var(--bg)",
            borderRadius: 999,
          }}
        >
          <span
            style={{
              display: "inline-block",
              width: 14, height: 1,
              background: "currentColor",
              position: "relative",
            }}
          >
            <span style={{
              position: "absolute", left: 0, right: 0,
              top: open ? 0 : -4,
              height: 1, background: "currentColor",
              transition: "top 200ms ease",
            }} />
            <span style={{
              position: "absolute", left: 0, right: 0,
              top: open ? 0 : 4,
              height: 1, background: "currentColor",
              transition: "top 200ms ease",
            }} />
          </span>
          {open ? "Kapat" : "Menü"}
        </button>
      </header>
      {open && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "var(--bg)",
            zIndex: 25,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "flex-start",
            padding: "0 64px",
            animation: "pageIn 280ms ease",
          }}
        >
          {NAV_ITEMS.map((it, i) => (
            <button
              key={it.id}
              onClick={() => { navigate(it.route); setOpen(false); }}
              className="t-display"
              style={{
                fontSize: "clamp(56px, 9vw, 132px)",
                lineHeight: 1.02,
                padding: "8px 0",
                fontStyle: "italic",
                color: route.page === it.route.page ? "var(--accent)" : "var(--fg)",
                textAlign: "left",
              }}
            >
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontStyle: "normal", verticalAlign: "super", marginRight: 18, opacity: 0.5 }}>
                0{i + 1}
              </span>
              {it.label}
            </button>
          ))}
        </div>
      )}
    </>
  );
}

function Nav({ variant, route, navigate, introDone }) {
  if (variant === "side") return <SideNav route={route} navigate={navigate} introDone={introDone} />;
  if (variant === "minimal") return <MinimalNav route={route} navigate={navigate} introDone={introDone} />;
  return <TopNav route={route} navigate={navigate} introDone={introDone} />;
}

window.Nav = Nav;
window.NAV_ITEMS = NAV_ITEMS;