// Dashboard shell: sidebar + topbar + page router

const Sidebar = ({ active, setActive, brand, openSwitcher }) => {
  const items = [
    { k: "overview",    l: "Overview",    i: "overview" },
    { k: "keywords",    l: "Keywords",    i: "keywords" },
    { k: "pages",       l: "Pages",       i: "pages" },
    { k: "competitors", l: "Competitors", i: "competitors" },
    { k: "backlinks",   l: "Backlinks",   i: "backlinks" },
    { k: "technical",   l: "Technical",   i: "technical", b: "demo",  bt: "warn" },
    { k: "ai",          l: "AI mentions", i: "ai",        b: "demo",  bt: "warn" },
  ];
  return (
    <aside className="side">
      <div className="side__brand"><BrandLogo brand={brand}/></div>

      <button className="brand-switch" onClick={openSwitcher} aria-label="Switch brand">
        <span className="brand-switch__logo" style={{ background: brand.color }}>{brand.initials}</span>
        <span>
          <div className="brand-switch__name">{brand.name}</div>
          <div className="brand-switch__url">{brand.url}</div>
        </span>
        <Ico name="chev" size={14}/>
      </button>

      <div className="side__group">
        <div className="side__h">Reports</div>
        <div className="side__nav">
          {items.map(it => (
            <button key={it.k} className={active === it.k ? "is-active" : ""} onClick={() => setActive(it.k)}>
              <Ico name={it.i}/>
              <span>{it.l}</span>
              {it.b && <span className={`badge ${it.bt ? "badge--" + it.bt : ""}`}>{it.b}</span>}
            </button>
          ))}
        </div>
      </div>

      <div className="side__group">
        <div className="side__h">Workspace</div>
        <div className="side__nav">
          <button><Ico name="settings"/><span>Settings</span></button>
          <button><Ico name="plus"/><span>Add brand</span></button>
        </div>
      </div>

      <div className="side__foot">
        <div className="side__foot__a">OB</div>
        <div>
          <div className="side__foot__n">Onur Beşen</div>
          <div className="side__foot__r">Agency · Owner</div>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ active, range, setRange, compare, setCompare, brand }) => {
  const ranges = [
    { k: "7d", l: "7d" }, { k: "30d", l: "30d" }, { k: "90d", l: "90d" },
    { k: "ytd", l: "YTD" }, { k: "12m", l: "12m" }, { k: "cust", l: "Custom" },
  ];
  const labels = {
    overview: "Overview", keywords: "Keywords", pages: "Pages",
    backlinks: "Backlinks", technical: "Technical", ai: "AI mentions", competitors: "Competitors",
  };
  return (
    <div className="top">
      <div className="top__crumbs">
        <span>{brand.name}</span><span>›</span><strong>{labels[active]}</strong>
      </div>
      <div className="top__spacer"/>
      <div className="search">
        <Ico name="search"/>
        <input placeholder="Search keywords, pages, URLs…"/>
        <span className="kbd">⌘K</span>
      </div>
      <div className="range">
        {ranges.map(r => (
          <button key={r.k} className={range === r.k ? "is-active" : ""} onClick={() => setRange(r.k)}>{r.l}</button>
        ))}
      </div>
      <button className={`icon-btn ${compare ? "" : ""}`} onClick={() => setCompare(!compare)}
              style={{ borderColor: compare ? "var(--ink)" : "var(--rule)", background: compare ? "var(--ink)" : "var(--surface)", color: compare ? "var(--paper)" : "var(--ink-2)" }}
              title="Compare to previous period">
        <Ico name="up"/>
      </button>
      <button className="icon-btn" title="Filters"><Ico name="filter"/></button>
      <button className="btn btn--ghost"><Ico name="download"/>Export</button>
    </div>
  );
};

// Brand switcher dropdown overlay
const BrandSwitcher = ({ open, onClose, current, onPick }) => {
  if (!open) return null;
  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 50 }}/>
      <div style={{
        position: "fixed", left: 12, top: 60, width: 240,
        background: "var(--surface)", border: "1px solid var(--rule)",
        borderRadius: 10, padding: 6, zIndex: 51,
        boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
      }}>
        <div style={{ font: "500 10px/1 var(--mono)", color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase", padding: "8px 10px" }}>
          Brands
        </div>
        {BRANDS.map(b => (
          <button key={b.id} onClick={() => { onPick(b); onClose(); }} style={{
            display: "grid", gridTemplateColumns: "28px 1fr auto", gap: 10, alignItems: "center",
            width: "100%", padding: "8px 10px", borderRadius: 6, textAlign: "left",
            background: current.id === b.id ? "var(--paper-2)" : "transparent",
            cursor: "pointer",
          }}>
            <span style={{
              width: 28, height: 28, borderRadius: 4, background: b.color, color: "white",
              display: "grid", placeItems: "center", font: "700 11px/1 var(--sans)", letterSpacing: "-0.02em",
            }}>{b.initials}</span>
            <span>
              <div style={{ font: "600 13px/1.2 var(--sans)", color: "var(--ink)" }}>{b.name}</div>
              <div style={{ font: "400 11px/1.2 var(--mono)", color: "var(--muted)" }}>{b.url}</div>
            </span>
            {current.id === b.id && <Ico name="up" size={12}/>}
          </button>
        ))}
        <div style={{ borderTop: "1px solid var(--rule)", marginTop: 4, paddingTop: 4 }}>
          <button style={{
            display: "flex", gap: 8, alignItems: "center", width: "100%",
            padding: "8px 10px", borderRadius: 6, font: "500 13px/1 var(--sans)",
            color: "var(--muted)",
          }}><Ico name="plus" size={12}/>Add brand</button>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Sidebar, Topbar, BrandSwitcher });