// SONARA — Manager Roster page (Attivi / Inviti in attesa / Storico)
const RIcons = window.SonaraIcons;

const RArrIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>;

const ACTIVE_ROSTER = [
  { id: "luca", handle: "@lucabianchi", name: "Luca Bianchi", init: "LB",
    genres: "Cantautorato · indie", city: "Milano",
    relation: "Esclusiva", since: "8 mesi",
    activity: { text: "5 offerte sulla richiesta Mix EP 'Restami'", time: "2h fa", accent: "violet", urgent: true } },
  { id: "martina", handle: "@martinarey", name: "Martina Rey", init: "MR",
    genres: "Alt-pop · R&B", city: "Bologna",
    relation: "Non-esclusiva", since: "3 settimane",
    activity: { text: "Master completato con Studio Riva · 5★", time: "1g fa", accent: "success" } },
  { id: "giada", handle: "@giadaverdi", name: "Giada Verdi", init: "GV",
    genres: "Trap · drill", city: "Roma",
    relation: "Esclusiva", since: "1 anno · 4 mesi",
    activity: { text: "Cerca beat trap dark · 8 offerte ricevute", time: "3g fa", accent: "violet" } },
  { id: "edo", handle: "@edopalma", name: "Edoardo Palma", init: "EP",
    genres: "Indie · folk", city: "Torino",
    relation: "Esclusiva", since: "2 anni",
    activity: { text: "Nessuna attività negli ultimi 30 giorni", time: "stale", accent: "neutral", warn: true } },
  { id: "kaya", handle: "@kayalow", name: "Kaya Low", init: "KL",
    genres: "R&B · neo-soul", city: "Milano",
    relation: "Project-based", since: "6 settimane",
    activity: { text: "Caricata nuova showcase track 'Mira'", time: "ieri", accent: "violet" } },
];

const PENDING = [
  { id: "i1", handle: "@simonecaruso", name: "Simone Caruso", init: "SC",
    genres: "Alt-pop · indie", city: "Torino",
    sent: "3gg fa", expires: 27, relation: "Esclusiva",
    msg: "Ho seguito la tua crescita su Spotify, mi piacerebbe parlare di una collaborazione di management strutturata. Sarei interessato a costruire un piano EP per il 2027." },
  { id: "i2", handle: "@noahmiles", name: "Noah Miles", init: "NM",
    genres: "Indie · alt-pop", city: "Milano",
    sent: "7gg fa", expires: 23, relation: "Non-esclusiva",
    msg: "Bellissimo lavoro su 'Aria di Marzo'. Vorrei discutere di booking e sync — la mia rete potrebbe aprirti il circuito club tedesco." },
  { id: "i3", handle: "@miabertolino", name: "Mia Bertolino", init: "MB",
    genres: "Indie · folk", city: "Padova",
    sent: "12gg fa", expires: 18, relation: "Project-based",
    msg: "Solo per il primo EP, da definire i termini insieme. Mi piace molto la tua voce." },
];

const STORICO = [
  { id: "h1", handle: "@martabasso", name: "Marta Basso", init: "MB",
    relation: "Esclusiva", terminated: "Terminata 15 mar 2026", reason: "Per accordo",
    duration: "1 anno · 8 mesi", by: "Reciproco" },
  { id: "h2", handle: "@feliceaurora", name: "Felice Aurora", init: "FA",
    relation: "Non-esclusiva", terminated: "Scaduta 2 mar 2026", reason: "Invito non risposto",
    duration: "Mai accettata", by: "Sistema (TTL 30gg)" },
  { id: "h3", handle: "@dariocosta", name: "Dario Costa", init: "DC",
    relation: "Project-based", terminated: "Conclusa 14 feb 2026", reason: "Progetto completato",
    duration: "4 mesi", by: "Reciproco" },
];

function RosterTabs({ active, onChange }) {
  const tabs = [
    { k: "attivi", l: "Attivi", c: ACTIVE_ROSTER.length },
    { k: "inviti", l: "Inviti in attesa", c: PENDING.length },
    { k: "storico", l: "Storico", c: STORICO.length },
  ];
  return (
    <div className="sub-tabs">
      {tabs.map(t => (
        <button key={t.k} className={`stab ${active === t.k ? "active" : ""}`} onClick={() => onChange(t.k)}>
          {t.l} <span className="c">{t.c}</span>
        </button>
      ))}
    </div>
  );
}

function ActiveTab() {
  return (
    <div className="roster-list">
      {ACTIVE_ROSTER.map(a => (
        <a href={`Artista.html#id=${a.id}`} key={a.id} className={`roster-row ${a.activity.urgent ? "urgent" : ""} ${a.activity.warn ? "stale" : ""}`}>
          <span className="rost-av">{a.init}</span>
          <div className="rost-body">
            <div className="rost-row1">
              <span className="rost-name">{a.name}</span>
              <span className="rost-handle">{a.handle}</span>
              <span className="rost-sep">·</span>
              <span className={`rost-rel ${a.relation === "Esclusiva" ? "excl" : a.relation === "Project-based" ? "proj" : "nonexcl"}`}>
                {a.relation}
              </span>
            </div>
            <div className="rost-row2">
              <span className="rost-genres">{a.genres}</span>
              <span className="rost-sep">·</span>
              <span>{a.city}</span>
              <span className="rost-sep">·</span>
              <span>Da {a.since}</span>
            </div>
            <div className={`rost-activity ${a.activity.accent}`}>
              <span className="rost-dot"/>
              <span className="rost-act-text">{a.activity.text}</span>
              {a.activity.time !== "stale" && <span className="rost-act-time">{a.activity.time}</span>}
            </div>
          </div>
          <div className="rost-actions" onClick={(e) => e.stopPropagation()}>
            <button onClick={(e) => { e.preventDefault(); location.href = "Messaggi.html"; }} className="ip-btn ghost"><RIcons.connect size={11}/> DM</button>
            <button onClick={(e) => { e.preventDefault(); location.href = `Artista.html#id=${a.id}`; }} className="ip-btn"><RIcons.user size={11}/> Profilo</button>
          </div>
        </a>
      ))}
    </div>
  );
}

function PendingTab() {
  return (
    <>
      <div className="roster-list">
        {PENDING.map(p => (
          <article key={p.id} className="roster-row" style={{ alignItems: "flex-start" }}>
            <span className="rost-av">{p.init}</span>
            <div className="rost-body">
              <div className="rost-row1">
                <span className="rost-name">{p.name}</span>
                <span className="rost-handle">{p.handle}</span>
                <span className="rost-sep">·</span>
                <span className={`rost-rel ${p.relation === "Esclusiva" ? "excl" : p.relation === "Project-based" ? "proj" : "nonexcl"}`}>
                  {p.relation}
                </span>
                <span className="rost-sep">·</span>
                <span style={{ fontSize: 12, color: p.expires < 7 ? "#f59e0b" : "var(--muted-foreground)" }}>
                  Scade tra <strong>{p.expires}gg</strong>
                </span>
              </div>
              <div className="rost-row2">
                <span className="rost-genres">{p.genres}</span>
                <span className="rost-sep">·</span>
                <span>{p.city}</span>
                <span className="rost-sep">·</span>
                <span>Inviato {p.sent}</span>
              </div>
              <blockquote className="pending-msg">"{p.msg}"</blockquote>
            </div>
            <div className="rost-actions" style={{ flexDirection: "column", alignItems: "stretch" }}>
              <button className="ip-btn ghost">Modifica</button>
              <button className="ip-btn">Ritira</button>
            </div>
          </article>
        ))}
      </div>
      <div className="empty-add" style={{ marginTop: 16 }}>
        <span>Puoi avere fino a <strong>20 inviti pendenti</strong>. Attualmente: {PENDING.length}/20.</span>
        <a href="Esplora.html" className="ip-btn primary">+ Invita un artista</a>
      </div>
    </>
  );
}

function StoricoTab() {
  return (
    <div className="roster-list">
      {STORICO.map(s => (
        <article key={s.id} className="roster-row" style={{ opacity: 0.85 }}>
          <span className="rost-av" style={{ background: "linear-gradient(135deg, #555, #2a2a2a)" }}>{s.init}</span>
          <div className="rost-body">
            <div className="rost-row1">
              <span className="rost-name">{s.name}</span>
              <span className="rost-handle">{s.handle}</span>
              <span className="rost-sep">·</span>
              <span className={`rost-rel ${s.relation === "Esclusiva" ? "excl" : s.relation === "Project-based" ? "proj" : "nonexcl"}`}>
                {s.relation}
              </span>
            </div>
            <div className="rost-row2">
              <span style={{ color: "var(--foreground)", fontWeight: 500 }}>{s.terminated}</span>
              <span className="rost-sep">·</span>
              <span>Durata: {s.duration}</span>
            </div>
            <div className="rost-activity neutral">
              <span className="rost-dot"/>
              <span className="rost-act-text">{s.reason}</span>
              <span className="rost-act-time">· {s.by}</span>
            </div>
          </div>
          <div className="rost-actions">
            <a href="Esplora.html" className="ip-btn ghost">Invita di nuovo</a>
          </div>
        </article>
      ))}
    </div>
  );
}

Object.assign(window, { RosterTabs, ActiveTab, PendingTab, StoricoTab, ACTIVE_ROSTER, PENDING, STORICO });