/* Rail.jsx — the redesign's sticky left rail (desktop), plus the mobile
   top bar and full-screen menu. Nav is shared so App's scroll-spy can
   resolve the same ids. */

const NAV = [
  { id: "hello",   label: "Hello" },
  { id: "work",    label: "Work" },
  { id: "archive", label: "Archive" },
  { id: "media",   label: "Media" },
  { id: "notes",   label: "Notes" },
  { id: "about",   label: "About" },
  { id: "resume",  label: "Résumé" },
  { id: "contact", label: "Contact" },
];

const ELSEWHERE = [
  { label: "GitHub",     url: "https://github.com/Mulla759" },
  { label: "LinkedIn",   url: "https://www.linkedin.com/in/abdull-abdi5/" },
  { label: "Letterboxd", url: "https://letterboxd.com/Mulla759/" },
];

function localTime() {
  return new Intl.DateTimeFormat("en-US", { timeZone: "America/Chicago", hour: "numeric", minute: "2-digit", hour12: true })
    .format(new Date());
}

function useClock() {
  const [t, setT] = React.useState(localTime);
  React.useEffect(() => {
    const id = setInterval(() => setT(localTime()), 30000);
    return () => clearInterval(id);
  }, []);
  return t;
}

const navLinkStyle = (isActive) => ({
  fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1,
  letterSpacing: "-0.005em",
  color: isActive ? "var(--ink)" : "var(--ink-3)",
  fontWeight: isActive ? 600 : 400,
  textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
  transition: "color 260ms var(--ease-soft)",
});

function NavList({ active, onNav }) {
  return (
    <nav style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {NAV.map(item => {
        const isActive = active === item.id;
        return (
          <a key={item.id} href={"#" + item.id}
            onClick={(e) => { e.preventDefault(); onNav(item.id); }}
            style={navLinkStyle(isActive)}
            onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = "var(--ink)"; }}
            onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = "var(--ink-3)"; }}>
            {item.label}
            {isActive && (
              <span style={{
                fontFamily: "var(--font-annotation)", fontSize: 20, lineHeight: 1,
                color: "var(--vermilion)", transform: "translateY(-1px)", whiteSpace: "nowrap",
              }}>← you're here</span>
            )}
          </a>
        );
      })}
    </nav>
  );
}

function Wordmark({ size = 26 }) {
  return (
    <a href="#hello" onClick={e => e.preventDefault()}
      style={{ textDecoration: "none", display: "inline-flex", alignItems: "baseline", gap: 8 }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size,
        letterSpacing: "-0.045em", color: "var(--ink)", lineHeight: 1 }}>Mulla</span>
      <span style={{ fontFamily: "'Noto Sans Shavian', serif", fontSize: size * 0.5,
        color: "var(--vermilion)", lineHeight: 1 }}>·𐑥𐑫𐑤𐑩</span>
    </a>
  );
}

function RailMini({ active, onNav, onToggle }) {
  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center",
      padding: "24px 0 20px" }}>
      <button onClick={onToggle} aria-label="Open navigation" title="Open navigation"
        className="rail-toggle" style={{ padding: 8 }}>
        <span style={{ fontSize: 13, lineHeight: 1 }}>»</span>
      </button>
      <a href="#hello" onClick={e => { e.preventDefault(); onNav("hello"); }}
        style={{ marginTop: 26, textDecoration: "none", fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: 26, letterSpacing: "-0.05em", color: "var(--ink)", lineHeight: 1 }}>M</a>
      <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }}>
        {NAV.map((item, i) => {
          const isActive = active === item.id;
          return (
            <a key={item.id} href={"#" + item.id} title={item.label}
              onClick={e => { e.preventDefault(); onNav(item.id); }}
              style={{ fontFamily: "var(--font-micro)", fontSize: 10, letterSpacing: "0.06em",
                textDecoration: "none", color: isActive ? "var(--vermilion)" : "var(--ink-4)",
                transition: "color 220ms var(--ease-soft)" }}>
              {String(i + 1).padStart(2, "0")}
            </a>
          );
        })}
      </div>
      <div style={{ marginTop: "auto", fontFamily: "var(--font-micro)", fontSize: 9,
        letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--ink-4)",
        writingMode: "vertical-rl", transform: "rotate(180deg)" }}>index</div>
    </div>
  );
}

function Rail({ active, onNav, collapsed, onToggle }) {
  const time = useClock();
  if (collapsed) {
    return (
      <aside className="rail" style={{ borderRight: "1px solid var(--rule)", background: "var(--paper)" }}>
        <RailMini active={active} onNav={onNav} onToggle={onToggle} />
      </aside>
    );
  }
  return (
    <aside className="rail" style={{ borderRight: "1px solid var(--rule)", background: "var(--paper)" }}>
      <div style={{ height: "100%", display: "flex", flexDirection: "column",
        padding: "30px 22px 22px", minWidth: "var(--rail-w)" }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
          <Wordmark />
          <button onClick={onToggle} aria-label="Collapse navigation" title="Collapse navigation"
            className="rail-toggle" style={{ padding: "6px 8px", marginTop: 2 }}>
            <span style={{ fontSize: 12, lineHeight: 1 }}>«</span>
          </button>
        </div>
        <div style={{ marginTop: 18 }}>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600,
            letterSpacing: "-0.005em", color: "var(--ink)" }}>Abdullahi Abdi</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.4,
            color: "var(--ink-3)", marginTop: 3 }}>Computer science &amp; economics, Minneapolis</div>
        </div>

        <div style={{ marginTop: 34 }}>
          <NavList active={active} onNav={onNav} />
        </div>

        <div style={{ marginTop: 30, borderTop: "1px solid var(--rule)", paddingTop: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {ELSEWHERE.map(s => (
              <a key={s.label} href={s.url} target="_blank" rel="noopener noreferrer"
                style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-3)",
                  textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7,
                  transition: "color 260ms var(--ease-soft)" }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--vermilion)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--ink-3)"}>
                {s.label}<Icon kind="arrow-up-right" size={12} color="currentColor" />
              </a>
            ))}
          </div>
        </div>

        <div style={{ marginTop: "auto", paddingTop: 26, borderTop: "1px solid var(--rule)" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9,
            fontFamily: "var(--font-micro)", fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-3)" }}>
            <Icon kind="moon" size={12} color="var(--ink-3)" />{time} in Minneapolis
          </div>
          <a href="mailto:Abdullahi.aabdii@gmail.com"
            style={{ marginTop: 10, display: "inline-flex", alignItems: "center", gap: 7,
              fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 600,
              color: "var(--vermilion)", textDecoration: "none" }}>
            Say hi<Icon kind="arrow-up-right" size={15} color="var(--vermilion)" />
          </a>
        </div>
      </div>
    </aside>
  );
}

const mobileBtnStyle = {
  background: "none", border: "1px solid var(--rule-strong)", padding: "8px 12px",
  fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600, color: "var(--ink)",
  display: "inline-flex", alignItems: "center", gap: 8,
};

function MobileBar({ onOpen, active }) {
  const current = (NAV.find(n => n.id === active) || NAV[0]).label;
  return (
    <div className="mobilebar">
      <Wordmark size={22} />
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 22, lineHeight: 1, color: "var(--vermilion)" }}>
          {current.toLowerCase()}
        </span>
        <button onClick={onOpen} aria-label="Open menu" style={mobileBtnStyle}>
          Menu<Icon kind="menu" size={14} color="var(--ink)" />
        </button>
      </div>
    </div>
  );
}

function MobileMenu({ open, active, onNav, onClose }) {
  const time = useClock();
  if (!open) return null;
  return (
    <div className="mobilemenu" onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Wordmark size={22} />
          <button onClick={onClose} aria-label="Close menu" style={mobileBtnStyle}>
            Close<Icon kind="close" size={14} color="var(--ink)" />
          </button>
        </div>

        <div style={{ marginTop: 26 }}>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>Abdullahi Abdi</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>
            Computer science &amp; economics, Minneapolis</div>
        </div>

        <div style={{ marginTop: "auto", marginBottom: "auto", paddingTop: 34 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {NAV.map(item => {
              const isActive = active === item.id;
              return (
                <a key={item.id} href={"#" + item.id}
                  onClick={e => { e.preventDefault(); onNav(item.id); }}
                  style={{ fontFamily: "var(--font-display)", fontWeight: isActive ? 400 : 300,
                    fontSize: 34, letterSpacing: "-0.03em", lineHeight: 1.1,
                    color: isActive ? "var(--ink)" : "var(--ink-2)", textDecoration: "none",
                    display: "inline-flex", alignItems: "center", gap: 12 }}>
                  {item.label}
                  {isActive && <span style={{ fontFamily: "var(--font-annotation)", fontSize: 24, color: "var(--vermilion)" }}>← you're here</span>}
                </a>
              );
            })}
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--rule)", paddingTop: 18, display: "flex",
          flexWrap: "wrap", gap: 18, justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", gap: 18 }}>
            {ELSEWHERE.map(s => (
              <a key={s.label} href={s.url} target="_blank" rel="noopener noreferrer"
                style={{ display: "inline-flex", alignItems: "center", gap: 6,
                  fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-3)", textDecoration: "none" }}>
                {s.label}<Icon kind="arrow-up-right" size={12} color="var(--ink-3)" /></a>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8,
              fontFamily: "var(--font-micro)", fontSize: 11, color: "var(--ink-3)" }}>
              <Icon kind="moon" size={12} color="var(--ink-3)" />{time} in Minneapolis</span>
            <a href="mailto:Abdullahi.aabdii@gmail.com"
              style={{ display: "inline-flex", alignItems: "center", gap: 7,
                fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 600, color: "var(--vermilion)", textDecoration: "none" }}>
              Say hi<Icon kind="arrow-up-right" size={15} color="var(--vermilion)" /></a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Rail, MobileBar, MobileMenu, NAV, ELSEWHERE, Wordmark, localTime });