// In Progress + Messages + Quick Actions + Wallet mini
const Icons = window.SonaraIcons;

function InProgress() {
  const projects = [
    {
      id: 3, kind: "master", kindIcon: <Icons.equalizer size={16}/>, kindLabel: "Master",
      title: "'Skyline EP'",
      who: "Studio Riva", whoInit: "SR",
      meta: "Studio Riva ha consegnato il master finale",
      timeLabel: "Scade tra 6h",
      action: { label: "Approva ora", primary: true },
      secondaryAction: { label: "Ascolta" },
      urgent: true, progress: 95,
    },
    {
      id: 1, kind: "mix", kindIcon: <Icons.mixer size={16}/>, kindLabel: "Mix",
      title: "'Notte Lunga'",
      who: "Marco Vitale", whoInit: "MV",
      meta: "v2 consegnata · 1 revisione rimasta",
      timeLabel: "Approva entro 2 giorni",
      action: { label: "Approva o revisiona", primary: true },
      secondaryAction: { label: "Ascolta" },
      progress: 80,
    },
    {
      id: 2, kind: "beat", kindIcon: <Icons.music size={16}/>, kindLabel: "Beat custom",
      title: "'Trap dark'",
      who: "Yoshi", whoInit: "Y",
      meta: "Stems consegnati · revisione 0 di 2",
      timeLabel: "Producer lavora · consegna in 5gg",
      action: { label: "Vedi progresso" },
      progress: 45,
    },
  ];
  const urgentCount = projects.filter(p => p.urgent).length;

  return (
    <div>
      <div className="section-head">
        <span className="t">
          Da revisionare <span className="count">{projects.length}</span>
          {urgentCount > 0 && (
            <span className="ip-urgent-flag">
              <span className="dot"/> {urgentCount} urgente
            </span>
          )}
        </span>
        <a href="Progetti.html" className="more">Vedi tutti <Icons.chevronRight size={14}/></a>
      </div>
      <div className="ip-list">
        {projects.map(p => (
          <article key={p.id} className={`ip-card ${p.urgent ? "urgent" : ""}`}>
            <div className="ip-icon" aria-hidden>
              {p.kindIcon}
            </div>
            <div className="ip-body">
              <div className="ip-row1">
                <span className="ip-kind">{p.kindLabel}</span>
                <span className="ip-dot"/>
                <span className="ip-title">{p.title}</span>
                <span className="ip-spacer"/>
                <span className={`ip-time ${p.urgent ? "urgent" : ""}`}>
                  {p.urgent && <span className="ip-time-pulse"/>}
                  {p.timeLabel}
                </span>
              </div>
              <div className="ip-row2">
                <span className="ip-meta">
                  <span className="ip-av">{p.whoInit}</span>
                  <span className="ip-who">{p.who}</span>
                  <span className="sep">·</span>
                  <span>{p.meta}</span>
                </span>
                <span className="ip-actions">
                  {p.secondaryAction && (
                    <a href="Progetti.html" className="ip-btn ghost">
                      <Icons.play size={11}/> {p.secondaryAction.label}
                    </a>
                  )}
                  <a href="Progetti.html" className={`ip-btn ${p.action.primary ? (p.urgent ? "urgent" : "primary") : ""}`}>
                    {p.action.label} <Icons.arrowRight size={12}/>
                  </a>
                </span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

function Messages() {
  const msgs = [
    { id: 1, name: "Yoshi", init: "Y", time: "12:14", verified: true, online: true,
      preview: "Ti ho mandato la v2 col kick più presente, dimmi che ne pensi.", unread: true },
    { id: 2, name: "Marco Vitale", init: "MV", time: "11:02", verified: true, online: false,
      preview: "Mix pronto. Ho lasciato spazio in alto per la tua voce in coda.", unread: true },
    { id: 3, name: "Sara · Riva Studio", init: "SR", time: "ieri", verified: false, online: true,
      preview: "Confermi master finale? Approvazione automatica fra 6h.", unread: true },
    { id: 4, name: "Diego K.", init: "DK", time: "ieri", verified: true, online: false,
      preview: "Ricevuta. Mando un'offerta entro stasera 🔥", unread: false },
    { id: 5, name: "Vale Frey", init: "VF", time: "lun", verified: false, online: false,
      preview: "Grazie per la collab! Ti recensisco oggi.", unread: false },
  ];
  return (
    <div>
      <div className="section-head">
        <span className="t">Messaggi <span className="count">3 non letti</span></span>
        <a href="Messaggi.html" className="more">Apri chat <Icons.chevronRight size={14}/></a>
      </div>
      <div className="card padless">
        <div className="msg-list" style={{ padding: "4px 14px" }}>
          {msgs.map(m => (
            <a key={m.id} href="Messaggi.html" className={`msg-row ${m.unread ? "unread" : ""}`}>
              <div className="av">
                {m.init}
                {m.online && <span className="online"/>}
              </div>
              <div className="body">
                <div className="row1">
                  <span className="name">{m.name}</span>
                  {m.verified && <span className="verified"><Icons.verified size={12}/></span>}
                </div>
                <div className="preview">{m.preview}</div>
              </div>
              <div className="right">
                <div className="time">{m.time}</div>
                {m.unread && <span className="unread-dot"/>}
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function QuickActions() {
  const actions = [
    {
      primary: true,
      t: "Pubblica richiesta",
      s: "Cerco un beat, un mix, un master — i producer fanno offerte a te.",
      hint: "Apri brief",
      icon: <Icons.target size={22}/>,
      href: "PubblicaRichiesta.html",
    },
    {
      t: "Esplora beat",
      s: "Sfoglia 12.4k tracce dei migliori producer italiani.",
      hint: "Vai al catalogo",
      icon: <Icons.disc size={22}/>,
      href: "Esplora.html",
    },
    {
      t: "Cerca producer",
      s: "Filtra per genere, città, rating e tempo di risposta.",
      hint: "Apri directory",
      icon: <Icons.mixer size={22}/>,
      href: "Esplora.html#producer",
    },
    {
      t: "Carica showcase",
      s: "Aggiungi i tuoi brani al profilo, fino a 6 tracce.",
      hint: "Carica audio",
      icon: <Icons.audioFile size={22}/>,
      href: "Profilo.html",
    },
    {
      t: "Pubblica un tuo servizio",
      s: "Vocalist, topline, songwriting: vendi le tue skill come faresti con un beat.",
      hint: "Apri brief",
      icon: <Icons.mic size={22}/>,
      href: "PubblicaServizio.html",
    },
  ];
  return (
    <div>
      <div className="section-head">
        <span className="t">Azioni rapide</span>
      </div>
      <div className="qa-grid">
        {actions.map((a, i) => (
          <a key={i} href={a.href || "#"} className={`qa-card ${a.primary ? "primary" : ""}`}>
            <span className="qa-ic">{a.icon}</span>
            <span className="qa-title">{a.t}</span>
            <span className="qa-sub">{a.s}</span>
            <span className="qa-foot">
              <span>{a.hint}</span>
              <span className="qa-arrow"><Icons.arrowRight size={14}/></span>
            </span>
          </a>
        ))}
      </div>
    </div>
  );
}

function OpenRequest() {
  const requests = [
    {
      id: 1, brief: "Cerco beat trap dark · 140 BPM", offers: 8, newOffers: 1,
      expires: "scade tra 22 giorni",
    },
  ];
  const newCount = requests.reduce((n, r) => n + r.newOffers, 0);
  return (
    <div>
      <div className="section-head sub">
        <span className="t">
          Richieste aperte <span className="count">{requests.length}</span>
          {newCount > 0 && <span className="ip-urgent-flag info"><span className="dot"/> {newCount} nuova offerta</span>}
        </span>
        <a href="Progetti.html#richieste" className="more">Tutte <Icons.chevronRight size={14}/></a>
      </div>
      <div className="oreq-list">
        {requests.map(r => (
          <article key={r.id} className="oreq-row">
            <div className="oreq-icon"><Icons.target size={14}/></div>
            <div className="oreq-body">
              <div className="t">"{r.brief}"</div>
              <div className="s">
                <strong>{r.offers} offerte</strong>
                {r.newOffers > 0 && <span className="oreq-new">+{r.newOffers} nuova</span>}
                <span className="sep">·</span>
                <span>{r.expires}</span>
              </div>
            </div>
            <a href="Progetti.html#richieste" className="ip-btn primary">
              Vedi offerte <Icons.arrowRight size={12}/>
            </a>
          </article>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { InProgress, Messages, QuickActions, OpenRequest });