// SONARA — Producer Dashboard sections
const DIcons = window.SonaraIcons;

const PlayIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>;
const ChevIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;
const StarIc = ({ size = 12, filled = true }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
const VerifIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.39 1.73 2.95-.13.13 2.95L19.27 7l-1.73 2.39 1.73 2.39-1.8 2.46-.13 2.95-2.95-.13L12 19l-2.39-1.73-2.95.13-.13-2.95L4.73 12l1.73-2.39L4.73 7l1.8-2.46.13-2.95 2.95.13zM10.5 14.6l5-5-1.1-1.1-3.9 3.9-1.9-1.9-1.1 1.1z"/></svg>;
const ArrIc = ({ size = 14 }) => <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 UpIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 15 12 9 18 15"/></svg>;

/* ─────────── DA CONSEGNARE ─────────── */
function DaConsegnare() {
  const items = [
    {
      id: "o1",
      kind: "Mix + Master",
      title: "EP \"Asfalto\"",
      who: "RAZZA",
      whoIn: "RZ",
      net: 158,
      deadline: -2, // overdue 2h
      urgent: true,
      activity: "Hai consegnato v1 · in revisione richiesta",
      action: "Carica v2",
    },
    {
      id: "o2",
      kind: "Beat esclusivo",
      title: "Notturno · uso esclusivo",
      who: "Yoshi K.",
      whoIn: "YK",
      net: 308,
      deadline: 22, // 22h
      urgent: true,
      activity: "Artista ha caricato i riferimenti · 1h fa",
      action: "Apri brief",
    },
    {
      id: "o3",
      kind: "Mix stereo",
      title: "Singolo \"Mezzanotte\"",
      who: "M. Lentini",
      whoIn: "ML",
      net: 105,
      deadline: 48,
      urgent: false,
      activity: "Stems completi · countdown attivo",
      action: "Apri",
    },
    {
      id: "o4",
      kind: "Vocal production",
      title: "Brano \"Senza Te\"",
      who: "Sara D.",
      whoIn: "SD",
      net: 79,
      deadline: 96,
      urgent: false,
      activity: "Attesa stems dell'artista · pausa countdown",
      action: "Sollecita",
      waiting: true,
    },
  ];

  const fmtDeadline = (h) => {
    if (h < 0) return `In ritardo ${Math.abs(h)}h`;
    if (h < 24) return `Tra ${h}h`;
    return `Tra ${Math.round(h / 24)}gg`;
  };

  return (
    <section>
      <div className="section-head">
        <div className="t">
          Da consegnare
          <span className="count">{items.length}</span>
          <span className="ip-urgent-flag"><span className="dot"/> 2 urgenti</span>
        </div>
        <a className="more" href="Ordini.html">Vedi tutti <ChevIc size={12}/></a>
      </div>
      <div className="ip-list">
        {items.map(it => (
          <a href="Ordine.html" key={it.id} className={`ip-card ${it.urgent ? "urgent" : ""}`}>
            <div className="ip-icon">
              <DIcons.audioFile size={16}/>
            </div>
            <div className="ip-body">
              <div className="ip-row1">
                <span className="ip-kind">{it.kind}</span>
                <span className="ip-dot"/>
                <span className="ip-title">{it.title}</span>
                <span className="ip-spacer"/>
                <span className={`ip-time ${it.urgent ? "urgent" : ""}`}>
                  {it.urgent && <span className="ip-time-pulse"/>}
                  {fmtDeadline(it.deadline)}
                </span>
              </div>
              <div className="ip-row2">
                <div className="ip-meta">
                  <span className="ip-av">{it.whoIn}</span>
                  <span className="ip-who">{it.who}</span>
                  <span className="sep">·</span>
                  <span>€{it.net} netto</span>
                  <span className="sep">·</span>
                  <span>{it.activity}</span>
                </div>
                <div className="ip-actions">
                  <button className={`ip-btn ${it.urgent ? "urgent" : "primary"}`}>{it.action}</button>
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ─────────── REVENUE PIPELINE ─────────── */
function RevenueCard() {
  return (
    <div className="rev-card">
      <div className="rev-head">
        <div>
          <div className="rev-label">Disponibile per payout</div>
          <div className="rev-balance">
            <span className="ccy">€</span>
            <span className="num">1.247</span>
            <span className="cents">,60</span>
          </div>
        </div>
        <a href="Wallet.html" className="rev-btn">Richiedi payout <ArrIc size={13}/></a>
      </div>

      <div className="rev-pipeline">
        <div className="rev-row">
          <span className="rev-dot esc"/>
          <div className="rev-row-meta">
            <div className="rev-row-l">In escrow</div>
            <div className="rev-row-s">3 ordini in corso · si liberano alla consegna</div>
          </div>
          <div className="rev-row-v">€<strong>892</strong>,00</div>
        </div>
        <div className="rev-row">
          <span className="rev-dot clr"/>
          <div className="rev-row-meta">
            <div className="rev-row-l">In clearance</div>
            <div className="rev-row-s">Protezione chargeback · 7gg</div>
          </div>
          <div className="rev-row-v">€<strong>340</strong>,00</div>
        </div>
        <div className="rev-row">
          <span className="rev-dot pay"/>
          <div className="rev-row-meta">
            <div className="rev-row-l">Prossimo auto-payout</div>
            <div className="rev-row-s">Lunedì 18 maggio · IBAN ***4831</div>
          </div>
          <div className="rev-row-v"><span className="rev-pill">€1.247,60</span></div>
        </div>
      </div>

      <div className="rev-mini">
        <div>
          <div className="rev-mini-l">Ultimi 7gg</div>
          <div className="rev-mini-v">€482,00</div>
          <div className="rev-mini-d up"><UpIc size={11}/> +18%</div>
        </div>
        <div>
          <div className="rev-mini-l">Ultimi 30gg</div>
          <div className="rev-mini-v">€2.140,00</div>
          <div className="rev-mini-d up"><UpIc size={11}/> +24%</div>
        </div>
        <div>
          <div className="rev-mini-l">Ordini 30gg</div>
          <div className="rev-mini-v">14</div>
          <div className="rev-mini-d">su 47 lifetime</div>
        </div>
      </div>
    </div>
  );
}

/* ─────────── OPPORTUNITÀ ─────────── */
function OpportunitaCard() {
  const reqs = [
    {
      id: "r1",
      kind: "Beat trap dark",
      brief: "Cerco beat 808 pesante, BPM 138-145, tipo Travis Scott late-night",
      budget: "€100-200",
      offers: 4,
      time: "2h fa",
      new: true,
    },
    {
      id: "r2",
      kind: "Mix EP",
      brief: "EP 5 tracce trap/drill, stems pronti, consegna entro 3 settimane",
      budget: "€600-900",
      offers: 7,
      time: "5h fa",
      new: false,
    },
    {
      id: "r3",
      kind: "Custom production",
      brief: "Brano R&B con vibe Daniel Caesar/Brent Faiyaz, 1 beat + mix",
      budget: "€400",
      offers: 2,
      time: "Ieri",
      new: true,
    },
  ];

  return (
    <section>
      <div className="section-head">
        <div className="t">
          Opportunità per te
          <span className="count">8 nuove</span>
          <span className="ip-urgent-flag info"><span className="dot"/> match generi</span>
        </div>
        <a className="more" href="Opportunita.html">Tutte <ChevIc size={12}/></a>
      </div>
      <div className="oreq-list">
        {reqs.map(r => (
          <a href="Opportunita.html" key={r.id} className="oreq-row">
            <div className="oreq-icon"><DIcons.target size={14}/></div>
            <div className="oreq-body">
              <div className="t">{r.kind}{r.new && <span className="oreq-new" style={{ marginLeft: 8 }}>NEW</span>}</div>
              <div className="s">
                <span>{r.brief}</span>
              </div>
              <div className="s" style={{ marginTop: 2 }}>
                <strong>{r.budget}</strong>
                <span className="sep">·</span>
                <span>{r.offers} offerte</span>
                <span className="sep">·</span>
                <span>{r.time}</span>
              </div>
            </div>
            <button className="ip-btn primary" style={{ alignSelf: "center" }}>Offerta</button>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ─────────── MESSAGGI ─────────── */
function MessagesCard() {
  const msgs = [
    { who: "RAZZA", init: "RZ", verified: true, preview: "Perfetto, aspetto la v2 ✌️ ti faccio sentire anche un riferimento", time: "8m", unread: true, waiting: false },
    { who: "Yoshi K.", init: "YK", verified: true, preview: "Mi piacciono i riferimenti che hai mandato. Quanto per esclusiva?", time: "1h", unread: true, waiting: false },
    { who: "Sara D.", init: "SD", verified: false, preview: "Ti mando gli stems entro stasera, scusa il ritardo", time: "Ieri", unread: true, waiting: false },
    { who: "M. Lentini", init: "ML", verified: false, preview: "Ricevuti, suono pulitissimo. Procedo con il pagamento finale", time: "2gg", unread: false, waiting: true },
  ];
  return (
    <div className="card">
      <div className="section-head" style={{ marginBottom: 6 }}>
        <div className="t">Messaggi <span className="count">3 da leggere</span></div>
        <a className="more" href="Messaggi.html">Apri chat <ChevIc size={12}/></a>
      </div>
      <div className="msg-list">
        {msgs.map((m, i) => (
          <a key={i} href="Messaggi.html" className={`msg-row ${m.unread ? "unread" : ""}`}>
            <span className="av">{m.init}<span className="online"/></span>
            <div className="body">
              <div className="row1">
                <span className="name">{m.who}</span>
                {m.verified && <span className="verified"><VerifIc size={11}/></span>}
                {m.waiting && <span className="msg-waits" title="Ti aspetta da 2gg">●</span>}
              </div>
              <div className="preview">{m.preview}</div>
            </div>
            <div className="right">
              <span className="time">{m.time}</span>
              {m.unread && <span className="unread-dot"/>}
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

/* ─────────── QUICK ACTIONS ─────────── */
function QuickActions() {
  const actions = [
    { primary: true, t: "Carica nuovo beat", s: "Wizard 3-step · audio + metadata + licenze", ic: <DIcons.disc size={22}/>, href: "CaricaBeat.html" },
    { t: "Crea listing servizio", s: "Mix, master, custom, vocal prod", ic: <DIcons.mixer size={22}/>, href: "CreaListing.html" },
    { t: "Sfoglia opportunità", s: "8 richieste open compatibili", ic: <DIcons.target size={22}/>, href: "Opportunita.html" },
    { t: "Stats catalog", s: "Visite, ascolti, conversion per beat", ic: <DIcons.chart size={22}/>, href: "Catalog.html" },
  ];
  return (
    <section>
      <div className="section-head">
        <div className="t">Azioni rapide</div>
      </div>
      <div className="qa-grid">
        {actions.map((a, i) => (
          <a key={i} href={a.href} className={`qa-card ${a.primary ? "primary" : ""}`}>
            <div className="qa-ic">{a.ic}</div>
            <div className="qa-title">{a.t}</div>
            <div className="qa-sub">{a.s}</div>
            <div className="qa-foot">
              <span>Apri</span>
              <span className="qa-arrow"><ArrIc size={12}/></span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ─────────── STATS PERFORMANCE (full-width card) ─────────── */
function PerfStats() {
  return (
    <section>
      <div className="section-head">
        <div className="t">Performance <span className="count">ultimi 30gg</span></div>
        <a className="more" href="Wallet.html">Report completo <ChevIc size={12}/></a>
      </div>
      <div className="perf-row">
        <div className="perf-stat">
          <div className="l">Revenue 30gg</div>
          <div className="v">€2.140</div>
          <div className="d up"><UpIc size={11}/> +24% vs prec.</div>
        </div>
        <div className="perf-stat">
          <div className="l">Ordini chiusi</div>
          <div className="v">14</div>
          <div className="d">su 47 lifetime</div>
        </div>
        <div className="perf-stat">
          <div className="l">Rating ricevuto</div>
          <div className="v">
            4.8
            <span className="perf-stars">
              {[1,2,3,4,5].map(n => <StarIc key={n} size={11} filled={n <= 5}/>)}
            </span>
          </div>
          <div className="d">su 47 recensioni</div>
        </div>
        <div className="perf-stat">
          <div className="l">Response time</div>
          <div className="v">4h 12m</div>
          <div className="d up">Top 8% IT</div>
        </div>
        <div className="perf-stat">
          <div className="l">Conversion catalog</div>
          <div className="v">3.8%</div>
          <div className="d">visite → vendita</div>
        </div>
        <div className="perf-stat highlight">
          <div className="l">Ranking trap IT</div>
          <div className="v">
            <span className="perf-trophy">🏆</span>
            Top 12%
          </div>
          <div className="d">+3 posizioni questa sett.</div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── KYC BANNER (only when not verified) ─────────── */
function KycBanner({ status = "verified" }) {
  if (status === "verified") return null;
  const isReview = status === "in_review";
  return (
    <div className={`kyc-banner ${isReview ? "review" : "alert"}`}>
      <span className="ic"><DIcons.shield size={16}/></span>
      <div className="meta">
        <div className="t">
          {isReview ? "KYC in verifica" : "Completa il KYC per ricevere pagamenti"}
        </div>
        <div className="s">
          {isReview
            ? "I tuoi documenti sono in revisione. Risposta entro 1-3 giorni lavorativi."
            : "Senza KYC i fondi restano in wallet ma non possono essere prelevati. Ci vogliono 5 minuti."}
        </div>
      </div>
      <a href="Wallet.html" className="ip-btn primary">{isReview ? "Vedi stato" : "Completa KYC"}</a>
    </div>
  );
}

Object.assign(window, {
  DaConsegnare, RevenueCard, OpportunitaCard, MessagesCard,
  QuickActions, PerfStats, KycBanner,
});