// Top-bar (above) + slim navigation row

const NavDropdown = ({link, route, setRoute}) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const activeChild = link.dropdown.some(c => c.id === route);

  React.useEffect(() => {
    if (!open) return;
    const onClick = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    window.addEventListener("mousedown", onClick);
    return () => window.removeEventListener("mousedown", onClick);
  }, [open]);

  return (
    <div ref={ref} style={{position:"relative"}}
         onMouseEnter={()=>setOpen(true)}
         onMouseLeave={()=>setOpen(false)}>
      <a className={`${route===link.id || activeChild ? "active" : ""}`}
         onClick={()=>setRoute(link.id)}
         style={{display:"inline-flex",alignItems:"center",gap:6,cursor:"pointer"}}>
        {link.label}
        <Icon name="chevron-down" size={11} stroke={1.8}/>
      </a>
      {open && (
        <div style={{
          position:"absolute",
          top:"calc(100% + 4px)",
          left:"50%",
          transform:"translateX(-50%)",
          background:"var(--bg-2)",
          border:"1px solid var(--line)",
          borderRadius:10,
          padding:6,
          minWidth:240,
          boxShadow:"0 12px 32px rgba(0,0,0,.5)",
          zIndex:30,
        }}>
          {link.dropdown.map(c => (
            <a key={c.id}
               onClick={()=>{ setRoute(c.id); setOpen(false); }}
               className={route===c.id ? "active" : ""}
               style={{
                 display:"flex",
                 alignItems:"center",
                 justifyContent:"space-between",
                 padding:"10px 14px",
                 fontSize:13,
                 color: route===c.id ? "var(--accent-3)" : "var(--fg-2)",
                 borderRadius:6,
                 cursor:"pointer",
                 whiteSpace:"nowrap",
               }}
               onMouseEnter={e=>{ if(route!==c.id) e.currentTarget.style.background="var(--bg-3)"; }}
               onMouseLeave={e=>{ e.currentTarget.style.background="transparent"; }}>
              <span>{c.label}</span>
              {c.badge ? <span style={{marginLeft:12,minWidth:18,height:18,padding:"0 6px",borderRadius:9,background:"var(--accent-2)",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"var(--mono)",display:"grid",placeItems:"center"}}>{c.badge}</span> : null}
            </a>
          ))}
        </div>
      )}
    </div>
  );
};

const TopNav = ({route, setRoute, role, setRole}) => {
  const [notifOpen, setNotifOpen] = React.useState(false);
  const notifRef = React.useRef(null);

  // Close on outside click
  React.useEffect(() => {
    if (!notifOpen) return;
    const onClick = (e) => { if (!notifRef.current?.contains(e.target)) setNotifOpen(false); };
    window.addEventListener("mousedown", onClick);
    return () => window.removeEventListener("mousedown", onClick);
  }, [notifOpen]);

  // Fake notifications (user role only)
  const notifications = [
    {
      id: "n1",
      kind: "assigned",
      unread: true,
      fromName: "Marta Wierzbicka",
      fromRole: "HR · Firma 4.0",
      title: "Nowe przypisanie — Feedback korygujący",
      body: "Do 28 kwietnia, próg 70%. Obowiązkowe.",
      time: "2h temu",
      action: () => setRoute("my-tasks"),
    },
    {
      id: "n2",
      kind: "deadline",
      unread: true,
      fromName: "System",
      fromRole: "Przypomnienie",
      title: "Zbliża się termin — Trudne rozmowy z klientem",
      body: "Zostało 3 dni. Jedna sesja zakończona z wynikiem 58%.",
      time: "wczoraj",
      action: () => setRoute("my-tasks"),
    },
    {
      id: "n3",
      kind: "reviewed",
      unread: false,
      fromName: "Marta Wierzbicka",
      fromRole: "HR · Firma 4.0",
      title: "HR odpowiedział na Twój komentarz",
      body: "„Dzięki za feedback — przejrzałam rubrykę, kryterium 3 poprawione.”",
      time: "3 dni",
      action: () => setRoute("my-skills"),
    },
    {
      id: "n4",
      kind: "unlocked",
      unread: false,
      fromName: "System",
      fromRole: "Seriale",
      title: "Nowy odcinek dostępny",
      body: "„Negocjacje handlowe” · odcinek 3 — z 5 scenariuszami.",
      time: "tydzień",
      action: () => setRoute("series"),
    },
  ];
  const unreadCount = notifications.filter(n => n.unread).length;

  const userLinks = [
    {id:"series", label:"Kursy i seriale rozwojowe", dropdown: [
      {id:"rpg-library", label:"Ćwicz umiejętności", badge:2},
      {id:"my-skills", label:"Moje umiejętności"},
    ]},
    {id:"_certs", label:"Certyfikowane Ścieżki Rozwojowe", disabled:true},
    {id:"_materials", label:"Strefa materiałów", disabled:true},
    {id:"_school", label:"Szkoła AI", disabled:true},
  ];
  const hrLinks = [
    {id:"hr-programs", label:"Programy"},
    {id:"hr-catalog", label:"Katalog"},
    {id:"hr-context", label:"Kontekst firmy"},
  ];
  const links = role==="user" ? userLinks : hrLinks;
  return (
    <>
      {/* TOP BAR — thin utility strip above everything */}
      <div className="topbar">
        <div className="topbar-inner">
          <span className="topbar-meta">{role==="user" ? "Youniversity · Szkoła praktyków AI" : "Panel HR · Youniversity"}</span>
          <div className="topbar-right">
            <div className="role-switch" title="Przełącz personę (demo)">
              <button className={role==="user"?"on":""} onClick={()=>{ setRole("user"); setRoute("rpg-library"); }}>User</button>
              <button className={role==="hr"?"on":""} onClick={()=>{ setRole("hr"); setRoute("hr-programs"); }}>HR</button>
            </div>
            <span className="topbar-divider"/>
            <span className="topbar-meta">PL</span>
          </div>
        </div>
      </div>

      {/* MAIN NAV */}
      <nav className="topnav">
        <a className="brand" onClick={()=>setRoute(role==="user"?"series":"hr-programs")} style={{cursor:"pointer"}}>
          <img src="assets/logo.png" alt="Youniversity" style={{height:44,width:"auto",display:"block"}}/>
        </a>
        <div className="nav-links">
          {links.map(l => {
            if (l.dropdown) {
              return <NavDropdown key={l.id} link={l} route={route} setRoute={setRoute}/>;
            }
            return (
              <a key={l.id} className={`${route===l.id?"active":""}${l.disabled?" disabled":""}`} onClick={()=>!l.disabled && setRoute(l.id)} title={l.disabled?"Wkrótce":undefined}>
                {l.label}
                {l.badge ? <span className="b">{l.badge}</span> : null}
              </a>
            );
          })}
        </div>
        <div className="nav-right">
          <button className="icon-btn" title="Szukaj"><Icon name="search"/></button>
          <div style={{position:"relative"}} ref={notifRef}>
            <button className="icon-btn" title="Powiadomienia" onClick={()=>setNotifOpen(v=>!v)} style={{position:"relative"}}>
              <Icon name="bell"/>
              {unreadCount > 0 && (
                <span style={{position:"absolute",top:6,right:6,minWidth:16,height:16,borderRadius:8,padding:"0 4px",background:"var(--accent-2)",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"var(--mono)",display:"grid",placeItems:"center",boxShadow:"0 0 0 2px rgba(10,10,16,.75)"}}>{unreadCount}</span>
              )}
            </button>
            {notifOpen && (
              <div className="notif-panel">
                <div className="notif-head">
                  <div style={{fontSize:14,fontWeight:600}}>Powiadomienia</div>
                  <button className="btn link" style={{fontSize:11}}>Oznacz wszystkie</button>
                </div>
                <div className="notif-list">
                  {notifications.map(n => (
                    <div key={n.id} className={`notif-item ${n.unread?"unread":""}`} onClick={()=>{n.action && n.action(); setNotifOpen(false);}}>
                      <div className={`notif-dot k-${n.kind}`}>
                        {n.kind==="assigned" && <Icon name="plus" size={12}/>}
                        {n.kind==="deadline" && <Icon name="clock" size={12}/>}
                        {n.kind==="reviewed" && <Icon name="quote" size={12}/>}
                        {n.kind==="unlocked" && <Icon name="sparkle" size={12}/>}
                      </div>
                      <div style={{flex:1,minWidth:0}}>
                        <div className="notif-from">{n.fromName} <span>· {n.fromRole}</span></div>
                        <div className="notif-title">{n.title}</div>
                        <div className="notif-body">{n.body}</div>
                      </div>
                      <div className="notif-time">{n.time}</div>
                    </div>
                  ))}
                </div>
                <div className="notif-foot">
                  <a onClick={()=>setNotifOpen(false)}>Ustawienia powiadomień</a>
                </div>
              </div>
            )}
          </div>
          <ProfileMenu role={role} setRoute={setRoute}/>
        </div>
      </nav>
    </>
  );
};

const ProfileMenu = ({role, setRoute}) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onClick = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    window.addEventListener("mousedown", onClick);
    return () => window.removeEventListener("mousedown", onClick);
  }, [open]);

  const items = role === "user" ? [
    {id:"_greet", label:"Witaj, Julia", meta:"julia.k@firma40.com", kind:"header"},
    {id:"my-tasks", label:"Moje zadania", icon:"clock", badge:2},
    {id:"_profile", label:"Mój profil", icon:"user", disabled:true},
    {id:"_settings", label:"Ustawienia", icon:"filter", disabled:true},
    {id:"_sep", kind:"sep"},
    {id:"_logout", label:"Wyloguj", icon:"arrow-right", disabled:true},
  ] : [
    {id:"_greet", label:"Witaj, Marta", meta:"marta@firma40.com · HR", kind:"header"},
    {id:"_profile", label:"Mój profil", icon:"user", disabled:true},
    {id:"_settings", label:"Ustawienia", icon:"filter", disabled:true},
    {id:"_sep", kind:"sep"},
    {id:"_logout", label:"Wyloguj", icon:"arrow-right", disabled:true},
  ];

  return (
    <div ref={ref} style={{position:"relative"}}>
      <button
        onClick={()=>setOpen(v=>!v)}
        className="avatar-chip"
        style={{background:"transparent",border:"none",cursor:"pointer",display:"flex",alignItems:"center",gap:8,padding:"4px 8px",borderRadius:999}}>
        <div className="avatar">{role==="user"?"JK":"HR"}</div>
        <span style={{fontSize:13,color:"var(--fg-2)"}}>{role==="user"?"Witaj, Julia":"Marta HR"}</span>
        <Icon name="chevron-down" size={11} stroke={1.8}/>
      </button>
      {open && (
        <div style={{
          position:"absolute",right:0,top:"calc(100% + 6px)",
          background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:12,
          padding:6,minWidth:240,boxShadow:"0 14px 36px rgba(0,0,0,.5)",zIndex:30,
        }}>
          {items.map(it => {
            if (it.kind === "sep") return <div key={it.id} style={{height:1,background:"var(--line)",margin:"6px 4px"}}/>;
            if (it.kind === "header") return (
              <div key={it.id} style={{padding:"10px 12px 12px"}}>
                <div style={{fontSize:13,fontWeight:600,color:"var(--fg)"}}>{it.label}</div>
                <div style={{fontSize:11,color:"var(--fg-4)",fontFamily:"var(--mono)",marginTop:2}}>{it.meta}</div>
              </div>
            );
            return (
              <button key={it.id}
                onClick={()=>{ if(!it.disabled){ setRoute(it.id); setOpen(false); } }}
                disabled={it.disabled}
                style={{
                  display:"flex",alignItems:"center",gap:10,width:"100%",
                  padding:"10px 12px",background:"transparent",border:"none",
                  borderRadius:8,cursor:it.disabled?"default":"pointer",
                  color:it.disabled?"var(--fg-4)":"var(--fg-2)",fontSize:13,textAlign:"left",
                  opacity:it.disabled?.55:1,
                }}
                onMouseEnter={e=>{ if(!it.disabled) e.currentTarget.style.background="var(--bg-3)"; }}
                onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
                <Icon name={it.icon} size={14}/>
                <span style={{flex:1}}>{it.label}</span>
                {it.badge ? <span style={{minWidth:18,height:18,padding:"0 6px",borderRadius:9,background:"var(--accent-2)",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"var(--mono)",display:"grid",placeItems:"center"}}>{it.badge}</span> : null}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TopNav });