// SONARA — Manager Esplora (Artisti / Producer / Manager tabs)
const EIcons = window.SonaraIcons;

/* ─────────── ARTISTS DATA ─────────── */
const ESPLORA_ARTISTS = [
  { id: "a1", name: "Simone Caruso", handle: "@simonecaruso", init: "SC", city: "Torino", cover: "c1",
    genres: ["alt-pop","indie"], collabs: 3, rating: 4.7, badge: "Active", looking: true,
    bio: "Cantautore alt-pop con un fortissimo lavoro su synth analogici e voci pulite. Singolo 'Margine' su Spotify Italia.",
    verified: true, hasManager: false },
  { id: "a2", name: "Aïda L.", handle: "@aidalow", init: "AL", city: "Milano", cover: "c2",
    genres: ["R&B","neo-soul"], collabs: 8, rating: 4.9, badge: "Verified", looking: true,
    bio: "R&B / neo-soul, voce graffiata. Già su 3 sync per pubblicità nazionali.",
    verified: true, hasManager: false },
  { id: "a3", name: "Theo Marini", handle: "@theomarini", init: "TM", city: "Napoli", cover: "c3",
    genres: ["cantautorato"], collabs: 5, rating: 4.6, badge: "Active", looking: false,
    bio: "Cantautorato in dialetto, anime tese e arrangiamenti scarni. Live frequenti tra Napoli e Milano.",
    verified: false, hasManager: true, currentMgr: "@valentinadinizio" },
  { id: "a4", name: "Noah Miles", handle: "@noahmiles", init: "NM", city: "Milano", cover: "c4",
    genres: ["indie","alt-pop"], collabs: 12, rating: 4.8, badge: "Verified", looking: false,
    bio: "Indie con derive elettroniche. Headliner emergente per club tra 200 e 500 capienza.",
    verified: true, hasManager: false },
  { id: "a5", name: "Vale Frey", handle: "@valefrey", init: "VF", city: "Bologna", cover: "c5",
    genres: ["pop","cantautorato"], collabs: 4, rating: 4.5, badge: null, looking: true,
    bio: "Pop emotivo, lyrics autoriali. Cerca un manager per la prima vera campagna.",
    verified: false, hasManager: false },
  { id: "a6", name: "Kai Russo", handle: "@kairusso", init: "KR", city: "Roma", cover: "c6",
    genres: ["trap","drill"], collabs: 7, rating: 4.4, badge: "Active", looking: false,
    bio: "Trap-drill di Roma sud, già due singoli con 200k+ stream cumulati.",
    verified: false, hasManager: true, currentMgr: "@blackroseagency" },
  { id: "a7", name: "Mia Bertolino", handle: "@miabertolino", init: "MB", city: "Padova", cover: "c1",
    genres: ["indie","folk"], collabs: 2, rating: 4.8, badge: "Active", looking: true,
    bio: "Folk indie acustico, voce cristallina. Performance live regolari nel circuito veneto.",
    verified: false, hasManager: false },
  { id: "a8", name: "Yari Khan", handle: "@yarikhan", init: "YK", city: "Milano", cover: "c3",
    genres: ["pop","R&B"], collabs: 10, rating: 4.7, badge: "Verified", looking: false,
    bio: "Pop-R&B contemporaneo, scrittura tagliente. Già 1 placement sync moda.",
    verified: true, hasManager: false },
  { id: "a9", name: "Luca Bianchi", handle: "@lucabianchi", init: "LB", city: "Milano", cover: "c2",
    genres: ["cantautorato","indie"], collabs: 6, rating: 4.9, badge: "Verified", looking: false,
    bio: "Già nel mio roster da 8 mesi. EP in lavorazione, primo singolo a giugno.",
    verified: true, hasManager: true, currentMgr: "@andreaconti", inMyRoster: true },
];

/* ─────────── PRODUCERS DATA ─────────── */
const ESPLORA_PRODUCERS = [
  { id: "p1", name: "Nico Vega", handle: "@nicovega", init: "NV", city: "Milano",
    genres: ["trap","hip-hop"], rating: 4.9, projects: 47, response: "4h", badge: "Top Rated", verified: true,
    bio: "Mix & master trap/hip-hop. Beat custom su richiesta. Studio analog-digital a Lambrate.",
    from: "€80" },
  { id: "p2", name: "Studio Riva", handle: "@studioriva", init: "SR", city: "Bologna",
    genres: ["indie","alt-pop","cantautorato"], rating: 4.8, projects: 124, response: "6h", badge: "Verified", verified: true,
    bio: "Studio storico indie/cantautorato emiliano. Mix, master, produzione full-arrangement.",
    from: "€150" },
  { id: "p3", name: "Marco Vitale", handle: "@marcovit", init: "MV", city: "Roma",
    genres: ["R&B","neo-soul","pop"], rating: 4.7, projects: 38, response: "2h", badge: "Top Rated", verified: true,
    bio: "R&B specialist, ex-engineer per due major label italiane.",
    from: "€100" },
  { id: "p4", name: "Yoshi K.", handle: "@yoshik", init: "YK", city: "Milano",
    genres: ["trap","drill","electronic"], rating: 4.6, projects: 29, response: "12h", badge: "Active", verified: false,
    bio: "Beatmaker drill / dark trap. Sample design e 808 lavorate.",
    from: "€60" },
  { id: "p5", name: "Sara D'Onofrio", handle: "@saradonofrio", init: "SD", city: "Milano",
    genres: ["alt-pop","indie","electronic"], rating: 4.9, projects: 52, response: "3h", badge: "Top Rated", verified: true,
    bio: "Vocal production e topline. Lavora con voci femminili emergenti.",
    from: "€120" },
  { id: "p6", name: "Diego K.", handle: "@diegok", init: "DK", city: "Napoli",
    genres: ["hip-hop","trap","afrobeats"], rating: 4.5, projects: 18, response: "8h", badge: "Active", verified: true,
    bio: "Producer afro / trap, raised in Brooklyn-Napoli. Custom production focus.",
    from: "€90" },
];

/* ─────────── MANAGERS DATA ─────────── */
const ESPLORA_MANAGERS = [
  { id: "m1", name: "Valentina Di Nizio", handle: "@valentinadinizio", init: "VD", city: "Milano",
    type: "Privato", years: 12, roster: "6-10", areas: ["A&R","management 360°","sync/licensing"],
    genres: ["indie","cantautorato","alt-pop"],
    bio: "12 anni nell'industria, focus su artisti femminili emergenti. Esperienza con 2 major.",
    badge: "Verified", verified: true },
  { id: "m2", name: "Black Rose Agency", handle: "@blackroseagency", init: "BR", city: "Roma",
    type: "Agenzia", years: 8, roster: "11-20", areas: ["booking live","management 360°","marketing"],
    genres: ["trap","drill","hip-hop"],
    bio: "Agenzia romana specializzata in urban music. 14 artisti nel roster attuale.",
    badge: "Verified", verified: true },
  { id: "m3", name: "Sergio Mendez", handle: "@sergiomendezmgr", init: "SM", city: "Milano",
    type: "Privato", years: 18, roster: "2-5", areas: ["contratti label","sync/licensing","A&R"],
    genres: ["pop","R&B","cantautorato"],
    bio: "Ex-A&R Sugar Music, ora gestisce 3 artisti senior. Specializzato in deal con major.",
    badge: "Verified", verified: true },
  { id: "m4", name: "Costanza Riv.", handle: "@costanzariv", init: "CR", city: "Bologna",
    type: "Privato", years: 5, roster: "2-5", areas: ["distribuzione digitale","marketing"],
    genres: ["indie","folk","alt-pop"],
    bio: "Indipendente, focus su artisti DIY in cerca di crescita strutturata.",
    badge: "Active", verified: false },
  { id: "m5", name: "Nord Studio Mgmt", handle: "@nordstudio", init: "NS", city: "Torino",
    type: "Agenzia", years: 6, roster: "6-10", areas: ["booking live","marketing","A&R"],
    genres: ["alt-pop","indie","electronic"],
    bio: "Boutique agency torinese, 8 artisti in roster, focus club & festival circuit.",
    badge: "Active", verified: false },
];

/* ─────────── TAB UI ─────────── */
function Tabs({ active, onChange }) {
  const tabs = [
    { k: "artisti", l: "Artisti", c: ESPLORA_ARTISTS.length },
    { k: "producer", l: "Producer", c: ESPLORA_PRODUCERS.length },
    { k: "manager", l: "Manager", c: ESPLORA_MANAGERS.length },
  ];
  return (
    <div className="tabs-bar">
      {tabs.map(t => (
        <button key={t.k} className={`tab ${active === t.k ? "active" : ""}`} onClick={() => onChange(t.k)}>
          {t.l}
          <span className="count">{t.c}</span>
        </button>
      ))}
    </div>
  );
}

function Filters({ tab }) {
  // tab-specific quick filters
  const filtersByTab = {
    artisti: ["Tutti i generi", "Città · Ovunque", "Cerca manager", "Età · Tutte", "Senza manager"],
    producer: ["Tutti i generi", "Città · Ovunque", "Rating 4.5+", "Risposta · 24h"],
    manager: ["Tipologia · Tutti", "Generi · Tutti", "Città · Ovunque", "Esperienza 5+"],
  };
  const placeholders = {
    artisti: "Cerca artisti per nome, città, genere…",
    producer: "Cerca producer per nome, città, genere…",
    manager: "Cerca manager per nome, agenzia, città…",
  };
  return (
    <div className="filters-row">
      <div className="filter-search">
        <EIcons.search size={14}/>
        <input placeholder={placeholders[tab]}/>
      </div>
      {filtersByTab[tab].map((f, i) => (
        <button key={i} className={`filter-chip ${i === 2 && tab === "artisti" ? "active" : ""}`}>
          {f}
          <EIcons.chevronRight size={11} style={{ transform: "rotate(90deg)" }}/>
        </button>
      ))}
    </div>
  );
}

/* ─────────── ARTIST CARD ─────────── */
function ArtistCard({ a }) {
  const profileHref = `Artista.html#id=${a.id}`;
  const onInvite = (e) => { e.preventDefault(); e.stopPropagation(); window.openInviteModal(a); };
  const go = (e) => { e.preventDefault(); e.stopPropagation(); location.href = profileHref; };
  return (
    <div className="artist-card clickable" onClick={() => location.href = profileHref}>
      <div className={`artist-cover ${a.cover}`}>
        {a.looking && <span className="look-tag">Cerca manager</span>}
        <span className="artist-av">{a.init}</span>
      </div>
      <div className="artist-info">
        <div>
          <div className="nm-row">
            <span className="nm">{a.name}</span>
            {a.verified && <span className="verified" style={{ color: "var(--violet-bright, #7b55d0)", display: "inline-flex" }}><EIcons.verified size={13}/></span>}
            {a.inMyRoster && <span className="rost-rel excl" style={{ fontSize: 10, padding: "1px 7px" }}>Nel tuo roster</span>}
          </div>
          <div className="hd">{a.handle} · <span className="ct">{a.city}</span></div>
        </div>
        <div className="artist-genres">
          {a.genres.map(g => <span key={g} className="tal-chip">{g}</span>)}
        </div>
        <div className="artist-stats">
          <span><EIcons.audioFile size={11}/> {a.collabs} collab</span>
          <span className="sep">·</span>
          <span><EIcons.star size={11} filled/> {a.rating}</span>
          {a.badge && <>
            <span className="sep">·</span>
            <span className={`tal-badge ${a.badge.toLowerCase().replace(' ','-')}`}>{a.badge}</span>
          </>}
        </div>
      </div>
      <div className="artist-actions" onClick={(e) => e.stopPropagation()}>
        {a.inMyRoster ? (
          <button onClick={go} className="ip-btn primary" style={{ flex: 1, justifyContent: "center" }}>
            <EIcons.user size={11}/> Apri profilo
          </button>
        ) : a.hasManager ? (
          <>
            <button onClick={go} className="ip-btn ghost" style={{ flex: 1, justifyContent: "center" }}>
              <EIcons.user size={11}/> Vedi profilo
            </button>
            <button onClick={onInvite} className="ip-btn" title={`Già rappresentato da ${a.currentMgr}`} style={{ flex: 1, justifyContent: "center" }}>
              <EIcons.users size={11}/> Invita comunque
            </button>
          </>
        ) : (
          <>
            <button onClick={go} className="ip-btn ghost" style={{ flex: 1, justifyContent: "center" }}>
              <EIcons.user size={11}/> Vedi profilo
            </button>
            <button onClick={onInvite} className="ip-btn primary" style={{ flex: 1, justifyContent: "center" }}>
              <EIcons.users size={11}/> Invita nel roster
            </button>
          </>
        )}
      </div>
    </div>
  );
}

function ArtistsGrid() {
  return (
    <div className="artists-grid">
      {ESPLORA_ARTISTS.map(a => <ArtistCard key={a.id} a={a}/>)}
    </div>
  );
}

/* ─────────── PRODUCER CARD ─────────── */
function ProducerCard({ p }) {
  const href = `Producer.html#id=${p.id}`;
  const cover = p.id === "p1" ? "c1" : p.id === "p2" ? "c2" : p.id === "p3" ? "c3" : p.id === "p4" ? "c4" : p.id === "p5" ? "c5" : "c6";
  return (
    <div className="artist-card clickable" onClick={() => location.href = href}>
      <div className={`artist-cover ${cover}`}>
        <span className="look-tag" style={{ background: "rgba(0,0,0,0.42)", color: "white", border: "1px solid rgba(255,255,255,0.18)", backdropFilter: "blur(6px)" }}>
          Da {p.from}
        </span>
        <span className="artist-av">{p.init}</span>
      </div>
      <div className="artist-info">
        <div>
          <div className="nm-row">
            <span className="nm">{p.name}</span>
            {p.verified && <span className="verified" style={{ color: "var(--violet-bright, #7b55d0)", display: "inline-flex" }}><EIcons.verified size={13}/></span>}
          </div>
          <div className="hd">{p.handle} · <span className="ct">{p.city}</span></div>
        </div>
        <div className="artist-genres">
          {p.genres.map(g => <span key={g} className="tal-chip">{g}</span>)}
        </div>
        <div className="artist-stats">
          <span><EIcons.star size={11} filled/> {p.rating} <span className="muted" style={{ marginLeft: 2 }}>({p.projects})</span></span>
          <span className="sep">·</span>
          <span><EIcons.clock size={11}/> {p.response}</span>
          <span className="sep">·</span>
          <span className={`tal-badge ${p.badge === "Top Rated" ? "top" : p.badge.toLowerCase()}`} style={p.badge === "Top Rated" ? { background: "rgba(245,158,11,0.16)", color: "#f59e0b" } : {}}>
            {p.badge}
          </span>
        </div>
      </div>
      <div className="artist-actions" onClick={(e) => e.stopPropagation()}>
        <button onClick={() => location.href = "Messaggi.html"} className="ip-btn ghost" style={{ flex: 1, justifyContent: "center" }}>
          <EIcons.connect size={11}/> Chatta
        </button>
        <button onClick={() => location.href = href} className="ip-btn primary" style={{ flex: 1, justifyContent: "center" }}>
          <EIcons.user size={11}/> Profilo
        </button>
      </div>
    </div>
  );
}

function ProducersGrid() {
  return (
    <div className="artists-grid">
      {ESPLORA_PRODUCERS.map(p => <ProducerCard key={p.id} p={p}/>)}
    </div>
  );
}

/* ─────────── MANAGER CARD ─────────── */
function MgrCard({ m }) {
  return (
    <div className="artist-card clickable">
      <div className={`artist-cover ${m.id === "m1" ? "c2" : m.id === "m2" ? "c4" : m.id === "m3" ? "c3" : m.id === "m4" ? "c1" : "c5"}`}>
        <span className="look-tag">{m.type}</span>
        <span className="artist-av">{m.init}</span>
      </div>
      <div className="artist-info">
        <div>
          <div className="nm-row">
            <span className="nm">{m.name}</span>
            {m.verified && <span className="verified" style={{ color: "var(--violet-bright, #7b55d0)", display: "inline-flex" }}><EIcons.verified size={13}/></span>}
          </div>
          <div className="hd">{m.handle} · <span className="ct">{m.city}</span></div>
        </div>
        <div className="artist-genres">
          {m.areas.slice(0, 3).map(a => <span key={a} className="tal-chip">{a}</span>)}
        </div>
        <div className="artist-stats">
          <span><EIcons.clock size={11}/> {m.years} anni</span>
          <span className="sep">·</span>
          <span><EIcons.users size={11}/> Roster {m.roster}</span>
          <span className="sep">·</span>
          <span className={`tal-badge ${m.badge.toLowerCase()}`}>{m.badge}</span>
        </div>
      </div>
      <div className="artist-actions">
        <button className="ip-btn ghost" style={{ flex: 1, justifyContent: "center" }}>
          <EIcons.star size={11}/> Salva
        </button>
        <button className="ip-btn primary" style={{ flex: 1, justifyContent: "center" }}>
          <EIcons.user size={11}/> Profilo
        </button>
      </div>
    </div>
  );
}

function ManagersGrid() {
  return (
    <div className="artists-grid">
      {ESPLORA_MANAGERS.map(m => <MgrCard key={m.id} m={m}/>)}
    </div>
  );
}

Object.assign(window, {
  EsploraTabs: Tabs, EsploraFilters: Filters,
  ArtistsGrid, ProducersGrid, ManagersGrid,
  ArtistCard, ProducerCard, MgrCard,
  ESPLORA_ARTISTS, ESPLORA_PRODUCERS, ESPLORA_MANAGERS,
});