// SONARA — Manager Nav (sidebar + topbar + bottom nav)
// Persona: Andrea Conti / @andreaconti — Milano, manager indipendente
// Roster: 5 artisti (indie, alt-pop, cantautorato, trap)
const MIcons = window.SonaraIcons;

function Sidebar({ active = "home" }) {
  const marketplace = { key: "esplora", label: "Esplora talenti", icon: <MIcons.search size={18}/>, href: "Esplora.html", sub: "Artisti, producer, manager" };
  const work = [
    { key: "home", label: "Home", icon: <MIcons.equalizer size={18}/>, href: "Dashboard.html" },
    { key: "roster", label: "Roster", icon: <MIcons.users size={18}/>, badge: 5, href: "Roster.html" },
    { key: "messaggi", label: "Messaggi", icon: <MIcons.connect size={18}/>, badge: 3, href: "Messaggi.html" },
    { key: "preferiti", label: "Preferiti", icon: <MIcons.star size={18}/>, href: "Preferiti.html" },
  ];
  const biz = [
    { key: "profilo", label: "Profilo pubblico", icon: <MIcons.user size={18}/>, href: "Profilo.html" },
  ];
  return (
    <aside className="sidebar">
      <a href="Dashboard.html" className="sidebar-logo">
        <span className="mark"><MIcons.soundwaveLogo size={16}/></span>
        <span className="sidebar-logo-text">Sonara</span>
        <window.SidebarToggle/>
      </a>

      <div className="sidebar-section accent">
        <span className="sidebar-section-dot"/>
        Marketplace
      </div>
      <a href={marketplace.href} className={`nav-item market ${active === marketplace.key ? "active" : ""}`}>
        <span className="ic">{marketplace.icon}</span>
        <span className="market-meta">
          <span className="label">{marketplace.label}</span>
          <span className="sub">{marketplace.sub}</span>
        </span>
        <span className="market-arr">→</span>
      </a>

      <div className="sidebar-section">Il tuo lavoro</div>
      {work.map(i => (
        <a key={i.key} href={i.href} className={`nav-item ${active === i.key ? "active" : ""}`}>
          <span className="ic">{i.icon}</span>
          {i.label}
          {i.badge && <span className="badge-pill">{i.badge}</span>}
        </a>
      ))}

      <div className="sidebar-section">Tu su Sonara</div>
      {biz.map(i => (
        <a key={i.key} href={i.href} className={`nav-item ${active === i.key ? "active" : ""}`}>
          <span className="ic">{i.icon}</span>
          {i.label}
        </a>
      ))}

      <div className="sidebar-foot">
        <span className="av">AC</span>
        <div className="meta">
          <div className="n">Andrea Conti</div>
          <div className="h">@andreaconti · Manager</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ theme = "dark", onToggleTheme }) {
  const [notifOpen, setNotifOpen] = React.useState(false);
  const notifRef = React.useRef(null);
  React.useEffect(() => {
    const onDown = (e) => {
      if (notifOpen && notifRef.current && !notifRef.current.contains(e.target)) setNotifOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [notifOpen]);

  const SunIcon = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M4.93 19.07l1.41-1.41"/><path d="M17.66 6.34l1.41-1.41"/>
    </svg>
  );
  const MoonIcon = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  );

  return (
    <header className="topbar">
      <div className="search-box">
        <MIcons.search size={16}/>
        <input placeholder="Cerca artisti, producer, generi…"/>
        <span className="kbd">⌘ K</span>
      </div>
      <div className="spacer"/>
      <a href="Esplora.html" className="opp-cta-pill" title="Scopri nuovi talenti">
        <span className="opp-cta-ic"><MIcons.search size={13}/></span>
        <span className="opp-cta-label">Talenti</span>
        <span className="opp-cta-badge">12 nuovi</span>
      </a>
      <a href="Feed.html" className="feed-pill has-new" title="3 nuovi nel Feed">
        <span className="ic"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></span>
        <span>Feed</span>
        <span className="new-dot">3</span>
      </a>
      <button className="icon-btn" title={theme === "dark" ? "Passa a light" : "Passa a dark"} onClick={onToggleTheme}>
        {theme === "dark" ? <SunIcon size={16}/> : <MoonIcon size={16}/>}
      </button>
      <div className="notif-wrap" ref={notifRef}>
        <button className={`icon-btn ${notifOpen ? "active" : ""}`} title="Notifiche" onClick={() => setNotifOpen(o => !o)}>
          <MIcons.bell size={16}/>
          <span className="dot-notif"/>
        </button>
        {notifOpen && <ManagerNotificationsPanel onClose={() => setNotifOpen(false)}/>}
      </div>
      <button className="avatar-btn">AC</button>
    </header>
  );
}

function Greet({
  name = "Andrea",
  sub = "Hai 2 nuove offerte sui tuoi artisti, 1 invito al roster accettato e 3 messaggi non letti.",
}) {
  return (
    <div className="greet">
      <div>
        <h1 className="hello">Bentornato, <span className="name">{name}</span> 👋</h1>
        <div className="sub">{sub}</div>
      </div>
      <div className="right">
        <a href="Esplora.html" className="wallet-pill">
          <MIcons.search size={14}/>
          <span className="num" style={{ fontSize: 13 }}>Esplora artisti</span>
        </a>
        <a href="Profilo.html" className="cta-pill">
          <MIcons.edit size={14}/>
          Aggiorna profilo
        </a>
      </div>
    </div>
  );
}

function BottomNav({ active = "home" }) {
  const items = [
    { key: "home", label: "Home", icon: <MIcons.equalizer size={20}/>, href: "Dashboard.html" },
    { key: "esplora", label: "Esplora", icon: <MIcons.search size={20}/>, href: "Esplora.html", primary: true },
    { key: "roster", label: "Roster", icon: <MIcons.users size={20}/>, badge: 5, href: "Roster.html" },
    { key: "chat", label: "Chat", icon: <MIcons.connect size={20}/>, badge: 3, href: "Messaggi.html" },
    { key: "profilo", label: "Profilo", icon: <MIcons.user size={20}/>, href: "Profilo.html" },
  ];
  return (
    <nav className="bottom-nav">
      {items.map(i => (
        <a key={i.key} href={i.href} className={`bottom-nav-item ${active === i.key ? "active" : ""} ${i.primary ? "primary" : ""}`}>
          <span className="ic">{i.icon}</span>
          {i.label}
          {i.badge && <span className="badge-pill">{i.badge}</span>}
        </a>
      ))}
    </nav>
  );
}

/* ─────────────────────────────────────────────────── */
/* Notifications panel (manager-specific)              */
/* ─────────────────────────────────────────────────── */

const MGR_NOTIFICATIONS = [
  {
    id: "mn1", unread: true, time: "12m fa",
    title: "Invito al roster accettato",
    body: "@martinarey ha accettato il tuo invito. Ora fa parte ufficialmente del roster.",
    href: "Roster.html",
    icon: "users", accent: "success",
  },
  {
    id: "mn2", unread: true, time: "47m fa",
    title: "Offerta su @lucabianchi",
    body: "Studio Riva ha mandato un'offerta da €420 sulla richiesta Mix EP \"Restami\".",
    href: "Roster.html",
    icon: "target", accent: "violet",
  },
  {
    id: "mn3", unread: true, time: "2h fa",
    title: "Nuovo messaggio da @giuliawave",
    body: "\"Ciao Andrea, ti scrivo perché ho visto il tuo profilo e sono interessata…\"",
    href: "Messaggi.html",
    icon: "connect", accent: "violet",
  },
  {
    id: "mn4", unread: false, time: "Ieri",
    title: "@martinarey ha pubblicato una richiesta",
    body: "Cerca producer R&B/soul a Bologna. Budget €300-500.",
    href: "Roster.html",
    icon: "target", accent: "neutral",
  },
  {
    id: "mn5", unread: false, time: "Ieri",
    title: "Invito al roster scaduto",
    body: "@kayalow non ha risposto entro 30 giorni. L'invito è stato auto-decline.",
    href: "Roster.html",
    icon: "clock", accent: "warning",
  },
  {
    id: "mn6", unread: false, time: "12 mag",
    title: "@lucabianchi ha completato un progetto",
    body: "Mix \"Senza Te\" approvato. 5★ rilasciate a Marco Vitale.",
    href: "Roster.html",
    icon: "audioFile", accent: "success",
  },
  {
    id: "mn7", unread: false, time: "10 mag",
    title: "Artista suggerito per te",
    body: "@simonecaruso (alt-pop · Torino) corrisponde al 92% ai tuoi generi gestiti.",
    href: "Esplora.html",
    icon: "user", accent: "violet",
  },
];

function ManagerNotificationsPanel({ onClose }) {
  const [filter, setFilter] = React.useState("all");
  const unreadCount = MGR_NOTIFICATIONS.filter(n => n.unread).length;
  const items = filter === "unread" ? MGR_NOTIFICATIONS.filter(n => n.unread) : MGR_NOTIFICATIONS;
  return (
    <div className="notif-panel">
      <header className="notif-head">
        <div className="notif-title">
          Notifiche
          {unreadCount > 0 && <span className="notif-title-badge">{unreadCount} nuove</span>}
        </div>
        <button className="notif-mark-all">Segna tutte come lette</button>
      </header>
      <div className="notif-tabs">
        <button className={`notif-tab ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>
          Tutte <span className="c">{MGR_NOTIFICATIONS.length}</span>
        </button>
        <button className={`notif-tab ${filter === "unread" ? "active" : ""}`} onClick={() => setFilter("unread")}>
          Non lette <span className="c">{unreadCount}</span>
        </button>
      </div>
      <div className="notif-list">
        {items.map(n => {
          const Ic = MIcons[n.icon] || MIcons.bell;
          return (
            <a key={n.id} href={n.href} className={`notif-item ${n.unread ? "unread" : ""}`} onClick={onClose}>
              <span className={`notif-ic ${n.accent}`}>
                <Ic size={14}/>
              </span>
              <div className="notif-body">
                <div className="notif-row1">
                  <span className="notif-item-title">{n.title}</span>
                  <span className="notif-time">{n.time}</span>
                </div>
                <div className="notif-text">{n.body}</div>
              </div>
              {n.unread && <span className="notif-unread-dot"/>}
            </a>
          );
        })}
        {items.length === 0 && (
          <div className="notif-empty">
            <MIcons.bell size={22}/>
            <div className="t">Nessuna notifica non letta</div>
            <div className="s">Sei in pari 🎉</div>
          </div>
        )}
      </div>
      <footer className="notif-foot">
        <a href="Profilo.html" className="notif-foot-link">Impostazioni notifiche</a>
        <a href="Feed.html" className="notif-foot-link">Vedi tutte</a>
      </footer>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, Greet, BottomNav, ManagerNotificationsPanel });