// Sidebar navigation + topbar for the artist dashboard
const Icons = window.SonaraIcons;

function Sidebar({ active = "home" }) {
  const marketplace = { key: "esplora", label: "Esplora", icon: <Icons.search size={18}/>, href: "Esplora.html", sub: "Beat, producer, servizi" };
  const work = [
    { key: "home", label: "Home", icon: <Icons.equalizer size={18}/>, href: "Dashboard.html" },
    { key: "progetti", label: "Progetti", icon: <Icons.audioFile size={18}/>, badge: 3, href: "Progetti.html" },
    { key: "messaggi", label: "Messaggi", icon: <Icons.connect size={18}/>, badge: 5, href: "Messaggi.html" },
    { key: "preferiti", label: "Preferiti", icon: <Icons.star size={18}/>, href: "Preferiti.html" },
  ];
  const biz = [
    { key: "acquisti", label: "I miei acquisti", icon: <Icons.disc size={18}/>, href: "Acquisti.html" },
    { key: "richieste", label: "Richieste open", icon: <Icons.target size={18}/>, badge: 2, href: "Richieste.html" },
    { key: "servizi", label: "I miei servizi", icon: <Icons.mic size={18}/>, href: "PubblicaServizio.html" },
    { key: "wallet", label: "Wallet", icon: <Icons.coins size={18}/>, href: "Wallet.html" },
    { key: "profilo", label: "Profilo pubblico", icon: <Icons.user size={18}/>, href: "Profilo.html" },
  ];
  return (
    <aside className="sidebar">
      <a href="Dashboard.html" className="sidebar-logo">
        <span className="mark"><Icons.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">I tuoi affari</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}
          {i.badge && <span className="badge-pill">{i.badge}</span>}
        </a>
      ))}

      <div className="sidebar-foot">
        <span className="av">LM</span>
        <div className="meta">
          <div className="n">Luca Marini</div>
          <div className="h">@lucamarini · Artista</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ wallet = "25,00", 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">
        <Icons.search size={16}/>
        <input placeholder="Cerca beat, producer, generi…"/>
        <span className="kbd">⌘ K</span>
      </div>
      <div className="spacer"/>
      <a href="Esplora.html" className="explore-cta-pill" title="Esplora il marketplace">
        <span className="explore-cta-ic"><Icons.search size={13}/></span>
        <span className="explore-cta-label">Esplora</span>
        <span className="explore-cta-badge">Marketplace</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)}>
          <Icons.bell size={16}/>
          <span className="dot-notif"/>
        </button>
        {notifOpen && <ArtistNotificationsPanel onClose={() => setNotifOpen(false)}/>}
      </div>
      <button className="avatar-btn">LM</button>
    </header>
  );
}

function Greet() {
  return (
    <div className="greet">
      <div>
        <h1 className="hello">Bentornato, <span className="name">Luca</span> 👋</h1>
        <div className="sub">Hai 2 deliverable da revisionare e 1 nuova offerta sulla tua richiesta.</div>
      </div>
      <div className="right">
        <a href="PubblicaRichiesta.html" className="wallet-pill">
          <Icons.zap size={14}/>
          <span className="num" style={{ fontSize: 13 }}>Pubblica richiesta</span>
        </a>
      </div>
    </div>
  );
}

function BottomNav({ active = "home" }) {
  const items = [
    { key: "home", label: "Home", icon: <Icons.equalizer size={20}/>, href: "Dashboard.html" },
    { key: "esplora", label: "Esplora", icon: <Icons.search size={20}/>, href: "Esplora.html", primary: true },
    { key: "progetti", label: "Progetti", icon: <Icons.audioFile size={20}/>, badge: 3, href: "Progetti.html" },
    { key: "chat", label: "Chat", icon: <Icons.connect size={20}/>, badge: 5, href: "Messaggi.html" },
    { key: "profilo", label: "Profilo", icon: <Icons.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 (popover)                       */
/* ─────────────────────────────────────────────────── */

const ARTIST_NOTIFICATIONS = [
  {
    id: "an1", unread: true, time: "12m fa", urgent: true,
    title: "Deliverable da revisionare",
    body: "Nico Vega ha caricato la v1 del mix \"Notte Lunga\". Hai 7 giorni per approvare.",
    href: "Progetti.html",
    icon: "audioFile", accent: "warning",
  },
  {
    id: "an2", unread: true, time: "45m fa",
    title: "Nuova offerta su richiesta",
    body: "Sara D'Onofrio ti ha mandato un'offerta per Mix EP \"Restami\" · €420",
    href: "Richieste.html",
    icon: "target", accent: "violet",
  },
  {
    id: "an3", unread: true, time: "2h fa",
    title: "Messaggio da Nico Vega",
    body: "\"Ho ricevuto gli stems, mi metto al lavoro. Ti aggiorno entro 24h ✌️\"",
    href: "Messaggi.html",
    icon: "connect", accent: "violet",
  },
  {
    id: "an4", unread: false, time: "Ieri",
    title: "Beat acquistato consegnato",
    body: "Il file WAV + stems di \"Caduta libera\" è disponibile nella tua libreria.",
    href: "Acquisti.html",
    icon: "disc", accent: "success",
  },
  {
    id: "an5", unread: false, time: "12 mag",
    title: "Pagamento confermato",
    body: "€180 in escrow per il progetto Mix \"Notte Lunga\" · si libera alla tua approvazione.",
    href: "Wallet.html",
    icon: "coins", accent: "success",
  },
  {
    id: "an6", unread: false, time: "10 mag",
    title: "Producer suggerito per te",
    body: "Marco Lenti (R&B/soul · Bologna) ha pubblicato 3 nuovi beat che matchano i tuoi gusti.",
    href: "Esplora.html",
    icon: "user", accent: "violet",
  },
  {
    id: "an7", unread: false, time: "8 mag",
    title: "Recensione doppia-cieca pubblicata",
    body: "La tua recensione a Nico Vega è ora pubblica. Vedi cosa ha scritto su di te.",
    href: "Profilo.html",
    icon: "star", accent: "gold",
  },
];

function ArtistNotificationsPanel({ onClose }) {
  const [filter, setFilter] = React.useState("all");
  const unreadCount = ARTIST_NOTIFICATIONS.filter(n => n.unread).length;
  const items = filter === "unread" ? ARTIST_NOTIFICATIONS.filter(n => n.unread) : ARTIST_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">{ARTIST_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 = Icons[n.icon] || Icons.bell;
          return (
            <a key={n.id} href={n.href} className={`notif-item ${n.unread ? "unread" : ""}`} onClick={onClose}>
              <span className={`notif-ic ${n.accent} ${n.urgent ? "urgent" : ""}`}>
                <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">
            <Icons.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, ArtistNotificationsPanel });