/* views.jsx — Tableau de bord, Catalogue, Consommation & facturation */
const { useState } = React;

/* =========================================================
   TABLEAU DE BORD
   ========================================================= */
function DashboardView({ go }) {
  const D = window.DATA;
  const totalThisMonth = D.CONSUMPTION.reduce((a,s) => a + s.series[s.series.length-1], 0);
  const lineSeries = [
    { data: D.CONSUMPTION.find(s=>s.id==="esign").series, color:"var(--primary)" },
    { data: D.CONSUMPTION.find(s=>s.id==="pvid").series, color:"var(--violet)" },
    { data: D.CONSUMPTION.find(s=>s.id==="kyc").series, color:"var(--green)" },
  ];
  const subscribed = D.SERVICES.filter(s => s.subscribed);

  return (
    <div className="page page--wide">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Tableau de bord</h1>
          <p>Vue d'ensemble de l'orchestration de vos services de confiance — juin 2026.</p>
        </div>
        <div className="page-head__actions">
          <button className="btn"><Ic name="Download" /> Exporter</button>
          <button className="btn btn--primary" onClick={() => go("journeys")}><Ic name="Plus" /> Nouveau parcours</button>
        </div>
      </div>

      <div className="grid cols-4" style={{ marginBottom:"var(--gap)" }}>
        <Kpi icon="Flow" label="Parcours actifs" value="3" sub="sur 4 modélisés" delta="+1" deltaDir="up" />
        <Kpi icon="Bolt" label="Exécutions ce mois" value={fmt(1742)} delta="+12,4 %" deltaDir="up" sub="vs. mai" />
        <Kpi icon="ShieldCheck" label="Taux de conformité" value="99,2 %" delta="+0,3 pt" deltaDir="up" sub="dossiers conformes" />
        <Kpi icon="Billing" label="Coût estimé du mois" value={eur(8421).replace(/\s?€/,"")} unit="€" delta="+5,5 %" deltaDir="up" sub="à date" />
      </div>

      <div className="grid" style={{ gridTemplateColumns:"1.6fr 1fr", marginBottom:"var(--gap)" }}>
        <div className="card">
          <div className="card__head">
            <div>
              <h3>Volume d'opérations</h3>
              <p>12 derniers mois · principales briques</p>
            </div>
            <div style={{ flex:1 }} />
            <div style={{ display:"flex", gap:14, fontSize:11.5, color:"var(--text-2)" }}>
              {[["Signature","var(--primary)"],["PVID","var(--violet)"],["KYC","var(--green)"]].map(([l,c]) => (
                <span key={l} style={{ display:"inline-flex", alignItems:"center", gap:6 }}>
                  <i style={{ width:9, height:9, borderRadius:3, background:c }} />{l}
                </span>
              ))}
            </div>
          </div>
          <div className="card__body">
            <LineChart series={lineSeries} labels={D.MONTHS} height={210} />
          </div>
        </div>

        <div className="card">
          <div className="card__head"><div><h3>Activité récente</h3><p>Temps réel</p></div></div>
          <div style={{ padding:"6px 0" }}>
            {D.ACTIVITY.map((a,i) => (
              <div key={i} style={{ display:"flex", gap:12, padding:"11px 18px", alignItems:"flex-start" }}>
                <span className="svc-ic" style={{ width:32, height:32, background: toneSoft(a.tone), color: toneVar(a.tone) }}><Ic name={a.icon} width={16} height={16} /></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>{a.who}</div>
                  <div style={{ fontSize:12.5, color:"var(--text-2)" }}>{a.what}</div>
                </div>
                <span style={{ fontSize:11, color:"var(--text-3)", whiteSpace:"nowrap" }}>{a.when}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns:"1fr 1fr" }}>
        <div className="card">
          <div className="card__head">
            <div><h3>Services souscrits</h3><p>{subscribed.length} briques actives ce mois</p></div>
            <div style={{ flex:1 }} />
            <button className="btn btn--sm" onClick={() => go("catalog")}>Catalogue <Ic name="ChevRight" width={14} height={14}/></button>
          </div>
          <div style={{ padding:"4px 0" }}>
            {subscribed.map(s => {
              const vol = (D.CONSUMPTION.find(c => c.id===s.id) || {}).series;
              const v = vol ? vol[vol.length-1] : null;
              return (
                <div key={s.id} style={{ display:"flex", gap:12, alignItems:"center", padding:"10px 18px" }}>
                  <SvcIcon service={s} size={34} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13, fontWeight:600 }}>{s.name}</div>
                    <div style={{ fontSize:11.5, color:"var(--text-3)" }}>{eur(s.price)} / {s.unit}</div>
                  </div>
                  {v != null && <div className="mono" style={{ fontSize:13, fontWeight:600 }}>{fmt(v)}<span style={{ color:"var(--text-3)", fontWeight:400, fontSize:11 }}> /mois</span></div>}
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card__head"><div><h3>Parcours métier</h3><p>État de l'orchestration</p></div>
            <div style={{ flex:1 }} />
            <button className="btn btn--sm" onClick={() => go("journeys")}>Gérer <Ic name="ChevRight" width={14} height={14}/></button>
          </div>
          <div style={{ padding:"4px 0" }}>
            {D.JOURNEYS.map(j => (
              <button key={j.id} onClick={() => go("journeys", j.id)} style={{ display:"flex", gap:12, alignItems:"center", padding:"11px 18px", width:"100%", background:"none", border:"none", textAlign:"left", borderBottom:"1px solid var(--border)" }} className="rowbtn">
                <span className="svc-ic" style={{ width:34, height:34, background:"var(--surface-3)", color:"var(--text-2)" }}><Ic name="Flow" width={17} height={17}/></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>{j.name}</div>
                  <div style={{ fontSize:11.5, color:"var(--text-3)" }}>{j.steps.length} étapes · {fmt(j.runs30)} exéc. / 30 j</div>
                </div>
                <StatusBadge s={j.status} />
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   CATALOGUE DE SERVICES
   ========================================================= */
function CatalogView() {
  const D = window.DATA;
  const [list, setList] = useState(() => D.SERVICES.map(s => ({ ...s, providers: s.providers.map(p => ({ ...p })) })));
  const [detailId, setDetailId] = useState(null);
  const [filter, setFilter] = useState("all");
  const cats = ["all", ...Array.from(new Set(D.SERVICES.map(s => s.cat)))];
  const shown = list.filter(s => filter==="all" || s.cat===filter);
  const detail = list.find(s => s.id === detailId);

  const toggle = (id) => setList(ls => ls.map(s => s.id===id ? {...s, subscribed:!s.subscribed} : s));
  const setDefault = (sid, pid) => setList(ls => ls.map(s => s.id===sid
    ? {...s, defaultProvider:pid, providers: s.providers.map(p => p.id===pid ? {...p, status:"connected"} : p)} : s));
  const toggleProv = (sid, pid) => setList(ls => ls.map(s => {
    if (s.id!==sid) return s;
    const providers = s.providers.map(p => p.id===pid ? {...p, status: p.status==="connected"?"available":"connected"} : p);
    let def = s.defaultProvider;
    if (def===pid && providers.find(p=>p.id===pid).status==="available") {
      const firstConn = providers.find(p => p.status==="connected");
      def = firstConn ? firstConn.id : null;
    }
    return {...s, providers, defaultProvider:def};
  }));

  const connCount = (s) => s.providers.filter(p => p.status==="connected").length;

  return (
    <div className="page page--wide">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Catalogue de services</h1>
          <p>Chaque brique de confiance peut être opérée par plusieurs fournisseurs certifiés — le service natif Doxallia et des connecteurs externes. Choisissez vos connecteurs et le fournisseur par défaut.</p>
        </div>
      </div>

      <div style={{ display:"flex", gap:8, marginBottom:"var(--gap)", flexWrap:"wrap" }}>
        {cats.map(c => (
          <button key={c} className={"btn btn--sm" + (filter===c ? " btn--primary":"")} onClick={() => setFilter(c)}>
            {c==="all" ? "Tous" : c}
          </button>
        ))}
      </div>

      <div className="grid cols-3">
        {shown.map(s => {
          const def = D.defProv(s);
          return (
          <div key={s.id} className="card" style={{ padding:18, display:"flex", flexDirection:"column", gap:13 }}>
            <div style={{ display:"flex", alignItems:"flex-start", gap:12 }}>
              <SvcIcon service={s} />
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:14.5, fontWeight:600 }}>{s.name}</div>
                <span className="tag" style={{ marginTop:3, display:"inline-block" }}>{s.code}</span>
              </div>
              {s.subscribed ? <Badge tone="green" dot>Souscrit</Badge> : <Badge tone="gray">Disponible</Badge>}
            </div>
            <p style={{ margin:0, fontSize:12.5, color:"var(--text-2)", lineHeight:1.5, flex:1, display:"-webkit-box", WebkitLineClamp:2, WebkitBoxOrient:"vertical", overflow:"hidden" }}>{s.desc}</p>

            {/* connecteurs */}
            <div style={{ background:"var(--surface-2)", border:"1px solid var(--border)", borderRadius:9, padding:"10px 12px" }}>
              <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:8 }}>
                <span style={{ fontSize:11, fontWeight:600, letterSpacing:".04em", textTransform:"uppercase", color:"var(--text-3)" }}>Connecteurs</span>
                <span className="tag">{connCount(s)} / {s.providers.length}</span>
              </div>
              <div style={{ display:"flex", alignItems:"center", gap:-6 }}>
                <div style={{ display:"flex" }}>
                  {s.providers.map((p,i) => (
                    <div key={p.id} title={p.name + (p.status==="connected"?" · connecté":" · disponible")}
                      style={{ marginLeft: i?-6:0, borderRadius:9, boxShadow:"0 0 0 2px var(--surface)", opacity: p.status==="connected"?1:0.4, filter: p.status==="connected"?"none":"grayscale(1)" }}>
                      <ProviderTile p={p} size={28} />
                    </div>
                  ))}
                </div>
                <div style={{ flex:1 }} />
                {def && <span style={{ fontSize:11.5, color:"var(--text-2)" }}>déf. <b>{def.name}</b></span>}
              </div>
            </div>

            <hr className="divider" />
            <div style={{ display:"flex", alignItems:"center", gap:10 }}>
              <div style={{ flex:1 }}>
                <div className="mono" style={{ fontSize:15, fontWeight:600 }}>{eur(s.price)}</div>
                <div style={{ fontSize:11, color:"var(--text-3)" }}>par {s.unit}</div>
              </div>
              <button className="btn btn--sm" onClick={() => setDetailId(s.id)}><Ic name="Layers" width={15} height={15}/> Connecteurs</button>
              <button className={"btn btn--sm" + (s.subscribed ? "" : " btn--primary")} onClick={() => toggle(s.id)}>
                {s.subscribed ? "Désactiver" : "Activer"}
              </button>
            </div>
          </div>
        );})}
      </div>

      {detail && (
        <Modal title={detail.name} icon={detail.icon} onClose={() => setDetailId(null)} lg
          foot={<><button className="btn" onClick={() => setDetailId(null)}>Fermer</button></>}>
          <div style={{ display:"flex", gap:10, marginBottom:14, flexWrap:"wrap" }}>
            <Badge tone={detail.tone}>{detail.cat}</Badge>
            {detail.subscribed ? <Badge tone="green" dot>Souscrit</Badge> : <Badge tone="gray">Non souscrit</Badge>}
            <span className="tag">{eur(detail.price)} / {detail.unit}</span>
          </div>
          <p style={{ fontSize:13.5, color:"var(--text-2)", lineHeight:1.6, marginTop:0 }}>{detail.desc}</p>

          <div style={{ display:"flex", alignItems:"center", gap:8, margin:"20px 0 12px" }}>
            <h4 style={{ margin:0, fontSize:13.5, fontWeight:600 }}>Fournisseurs disponibles</h4>
            <span className="tag">{connCount(detail)} connecté(s)</span>
            <div style={{ flex:1 }} />
            <span className="muted" style={{ fontSize:11.5 }}>Sélectionnez le fournisseur par défaut</span>
          </div>

          <div style={{ display:"flex", flexDirection:"column", gap:9 }}>
            {detail.providers.map(p => {
              const isDefault = detail.defaultProvider === p.id;
              const connected = p.status === "connected";
              return (
                <div key={p.id} style={{ display:"flex", alignItems:"center", gap:13, padding:"12px 14px", border:"1px solid " + (isDefault?"var(--primary)":"var(--border)"), borderRadius:10, background: isDefault?"var(--primary-soft)":"var(--surface)" }}>
                  <ProviderTile p={p} size={38} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <span style={{ fontWeight:600, fontSize:13.5 }}>{p.name}</span>
                      {p.kind==="native" ? <Badge tone="blue">Natif Doxallia</Badge> : <Badge tone="gray">Connecteur externe</Badge>}
                      {isDefault && <Badge tone="green" dot>Par défaut</Badge>}
                    </div>
                    <div style={{ display:"flex", gap:6, marginTop:5, flexWrap:"wrap", alignItems:"center" }}>
                      {p.certif.map(c => <span key={c} className="tag" style={{ fontSize:10 }}>{c}</span>)}
                      {connected && <span className="muted" style={{ fontSize:11 }}>· latence ≈ {p.latency}</span>}
                    </div>
                  </div>
                  {connected ? (
                    <>
                      {!isDefault && <button className="btn btn--sm" onClick={() => setDefault(detail.id, p.id)}>Définir par défaut</button>}
                      <button className="btn btn--sm btn--danger" onClick={() => toggleProv(detail.id, p.id)} title="Déconnecter"><Ic name="X" width={14} height={14}/></button>
                    </>
                  ) : (
                    <button className="btn btn--sm btn--primary" onClick={() => toggleProv(detail.id, p.id)}><Ic name="Plus" width={14} height={14}/> Connecter</button>
                  )}
                </div>
              );
            })}
          </div>
          <div style={{ display:"flex", gap:9, alignItems:"center", marginTop:16, padding:"11px 13px", background:"var(--surface-2)", borderRadius:9, fontSize:12, color:"var(--text-2)" }}>
            <Ic name="Info" width={16} height={16} /> Le fournisseur par défaut s'applique aux nouvelles étapes. Vous pouvez forcer un autre fournisseur étape par étape dans l'orchestrateur de parcours.
          </div>
        </Modal>
      )}
    </div>
  );
}

/* =========================================================
   CONSOMMATION & FACTURATION
   ========================================================= */
function BillingView() {
  const D = window.DATA;
  const [tab, setTab] = useState("conso");
  const rows = D.CONSUMPTION.map(c => {
    const s = D.svc(c.id);
    const qty = c.series[c.series.length-1];
    return { ...c, name:s.name, tone:s.tone, icon:s.icon, unit:s.unit, price:s.price, qty, total: qty*s.price };
  });
  const monthTotal = rows.reduce((a,r) => a + r.total, 0);
  const donutSegs = rows.map(r => ({ value:r.total, color: toneVar(r.tone)===("var(--text-3)") ? "var(--text-3)" : toneVar(r.tone) }));

  return (
    <div className="page page--wide">
      <div className="page-head">
        <div className="page-head__txt">
          <h1>Consommation & facturation</h1>
          <p>Suivi détaillé de la consommation de vos services souscrits et de votre facturation.</p>
        </div>
        <div className="page-head__actions">
          <div className="seg">
            <button className={tab==="conso"?"is-active":""} onClick={() => setTab("conso")}>Consommation</button>
            <button className={tab==="invoices"?"is-active":""} onClick={() => setTab("invoices")}>Factures</button>
          </div>
        </div>
      </div>

      {tab==="conso" && <>
        <div className="grid cols-4" style={{ marginBottom:"var(--gap)" }}>
          <Kpi icon="Billing" label="Estimé du mois en cours" value={eur(monthTotal).replace(/\s?€/,"")} unit="€" delta="+5,5 %" deltaDir="up" sub="juin 2026" />
          <Kpi icon="Bolt" label="Opérations facturables" value={fmt(rows.reduce((a,r)=>a+r.qty,0))} sub="ce mois" delta="+8,1 %" deltaDir="up" />
          <Kpi icon="Layers" label="Briques facturées" value={rows.length} sub="services actifs" deltaDir="flat" delta="stable" />
          <Kpi icon="Doc" label="Engagement annuel" value="120 k" unit="€" sub="forfait socle" deltaDir="flat" delta="—" />
        </div>

        <div className="grid" style={{ gridTemplateColumns:"1.7fr 1fr", marginBottom:"var(--gap)" }}>
          <div className="card">
            <div className="card__head"><div><h3>Détail de consommation</h3><p>Mois en cours · à date</p></div></div>
            <table className="table">
              <thead><tr><th>Service</th><th>Tarif</th><th style={{textAlign:"right"}}>Quantité</th><th style={{textAlign:"right"}}>Montant HT</th></tr></thead>
              <tbody>
                {rows.map(r => (
                  <tr key={r.id}>
                    <td><div style={{ display:"flex", alignItems:"center", gap:10 }}><SvcIcon service={r} size={30} /><span style={{ fontWeight:600 }}>{r.name}</span></div></td>
                    <td className="muted">{eur(r.price)} / {r.unit}</td>
                    <td className="num">{fmt(r.qty)}</td>
                    <td className="num" style={{ fontWeight:600 }}>{eur(r.total)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot><tr><td colSpan={3} style={{ textAlign:"right", fontWeight:600, padding:"13px 14px", borderTop:"2px solid var(--border-strong)" }}>Total estimé HT</td><td className="num" style={{ fontWeight:700, fontSize:14, borderTop:"2px solid var(--border-strong)" }}>{eur(monthTotal)}</td></tr></tfoot>
            </table>
          </div>

          <div className="card">
            <div className="card__head"><div><h3>Répartition</h3><p>par brique de confiance</p></div></div>
            <div className="card__body" style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:18 }}>
              <div style={{ position:"relative", display:"grid", placeItems:"center" }}>
                <Donut segments={donutSegs} />
                <div style={{ position:"absolute", textAlign:"center" }}>
                  <div className="mono" style={{ fontSize:18, fontWeight:700 }}>{eur(monthTotal).replace(/\s?€/,"")}€</div>
                  <div style={{ fontSize:10.5, color:"var(--text-3)" }}>estimé HT</div>
                </div>
              </div>
              <div style={{ width:"100%", display:"flex", flexDirection:"column", gap:8 }}>
                {rows.map(r => (
                  <div key={r.id} style={{ display:"flex", alignItems:"center", gap:9, fontSize:12.5 }}>
                    <i style={{ width:10, height:10, borderRadius:3, background: toneVar(r.tone), flex:"none" }} />
                    <span style={{ flex:1 }}>{r.name}</span>
                    <span className="mono" style={{ fontWeight:600 }}>{Math.round(r.total/monthTotal*100)} %</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card__head"><div><h3>Évolution du coût mensuel</h3><p>12 derniers mois (HT)</p></div></div>
          <div className="card__body">
            <BarChart data={D.MONTHS.map((_,i) => D.CONSUMPTION.reduce((a,c) => a + c.series[i]*D.svc(c.id).price, 0))} labels={D.MONTHS} unit="€ HT" color="var(--primary)" height={190} />
          </div>
        </div>
      </>}

      {tab==="invoices" && (
        <div className="card">
          <div className="card__head"><div><h3>Historique des factures</h3><p>Prélèvement mensuel · groupe Crédit Agricole</p></div></div>
          <table className="table">
            <thead><tr><th>Référence</th><th>Période</th><th>Échéance</th><th>Statut</th><th style={{textAlign:"right"}}>Montant TTC</th><th></th></tr></thead>
            <tbody>
              {D.INVOICES.map(inv => (
                <tr key={inv.id}>
                  <td className="mono" style={{ fontWeight:600 }}>{inv.id}</td>
                  <td>{inv.period}</td>
                  <td className="muted">{inv.due}</td>
                  <td><StatusBadge s={inv.status} /></td>
                  <td className="num" style={{ fontWeight:600 }}>{eur(inv.amount*1.2)}</td>
                  <td style={{ textAlign:"right" }}><button className="btn btn--ghost btn--sm"><Ic name="Download" width={15} height={15}/> PDF</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DashboardView, CatalogView, BillingView });