// dashboard.jsx — Colonne droite : Dashboard 6 cadrans + bandeau + PriceSummary.

const Dashboard = ({ state, calc, viewMode }) => {
  const { fmtCAD, fmtCAD0, fmtPct, fmtNum } = window.RAYCAST_CALC;
  const { solar, project_type, building_type, client } = state;
  const hasSolar = project_type === "solaire" || project_type === "solaire_batterie";
  const internal = viewMode === "internal";

  // Hint dynamique
  let hint = null;
  if (hasSolar && calc.payback > 8 && solar.kw < 15) {
    hint = <>Pousse à <b>+5 kW</b> pour faire descendre le payback sous 8 ans.</>;
  } else if (hasSolar && solar.battery_brand === "none" && calc.coverage_pct > 60) {
    hint = <>Ajoute une batterie pour gagner de l'<b>autonomie en panne</b> et activer le peak shaving.</>;
  } else if (hasSolar && solar.battery_brand === "tesla" && (calc.autonomy_days || 0) < 2) {
    hint = <>Pousse à <b>2 × PW3</b> pour 2-3 jours d'autonomie en mode éco.</>;
  } else if (hasSolar && !solar.with_v2x && client.ev_km_per_year > 5000) {
    hint = <>Active <b>V2X (Sigenergy)</b> pour revenus 0,15 $/kWh chargé via Roulez Électrique.</>;
  } else if (project_type === "borne" && state.ve.dcc_option === "aucun" && building_type !== "residentiel_unifam") {
    hint = <>Ce bâtiment requiert un <b>DCC-12</b> pour rester sous 200 A.</>;
  } else {
    hint = <>Configuration équilibrée ✓</>;
  }

  return (
    <>
      <div className="dash">
        {/* Production annuelle */}
        <div className="kpi col-yellow">
          <div className="top">
            <div className="ico"><Icon name="sun" size={14}/></div>
            <div className="lbl">Production / an</div>
          </div>
          {hasSolar ? (
            <>
              <div className="val">{(calc.production / 1000).toFixed(2).replace(".", ",")} MWh</div>
              <div className="sub">{fmtNum(calc.production)} kWh</div>
            </>
          ) : (
            <><div className="val">—</div><div className="sub">Non applicable</div></>
          )}
        </div>

        {/* Économies 25 ans */}
        <div className="kpi col-green">
          <div className="top">
            <div className="ico"><Icon name="coins" size={14}/></div>
            <div className="lbl">Économies 25 ans</div>
          </div>
          <div className="val">{fmtCAD0(calc.savings_25)}</div>
          <div className="sub">avec inflation tarifs HQ</div>
        </div>

        {/* Couverture facture */}
        <div className="kpi col-blue">
          <div className="top">
            <div className="ico"><Donut pct={calc.coverage_pct} size={26} color="var(--raycom-accent)"/></div>
            <div className="lbl">Couverture facture</div>
          </div>
          <div className="val">{fmtPct(calc.coverage_pct, 0)}</div>
          <div className="sub">{fmtNum(calc.production)} / {fmtNum(calc.annual_kwh)} kWh</div>
        </div>

        {/* Autonomie panne */}
        <div className="kpi col-purple">
          <div className="top">
            <div className="ico"><Icon name="battery" size={14}/></div>
            <div className="lbl">Autonomie panne</div>
          </div>
          <div className="val">{calc.autonomy_days > 0 ? `${calc.autonomy_days.toFixed(1).replace(".", ",")} j` : "—"}</div>
          <div className="sub">{calc.autonomy_days > 0 ? "Mode éco · 20 % conso" : "Sans batterie"}</div>
        </div>

        {/* Payback */}
        <div className={`kpi ${calc.payback < 8 ? "col-green" : "col-red"}`}>
          <div className="top">
            <div className="ico"><Icon name="timer" size={14}/></div>
            <div className="lbl">Payback estimé</div>
          </div>
          <div className="val">
            {isFinite(calc.payback) && calc.payback > 0 ? `${calc.payback.toFixed(1).replace(".", ",")} ans` : "—"}
          </div>
          <div className="sub">Après LogisVert {fmtCAD0(calc.logisvert)}</div>
        </div>

        {/* Valeur maison */}
        <div className="kpi col-amber">
          <div className="top">
            <div className="ico"><Icon name="home" size={14}/></div>
            <div className="lbl">Valeur maison +</div>
          </div>
          <div className="val">{fmtCAD0(calc.home_value)}</div>
          <div className="sub">≈ 55 % du TTC (Zillow QC)</div>
        </div>
      </div>

      {/* Bandeau financier */}
      <div className="fin-strip">
        <div className="fin-row">
          <div>
            <div className="fin-lbl">Coût net client</div>
            <div className="fin-val lg">{fmtCAD0(calc.net_cost)}</div>
          </div>
          <div>
            <div className="fin-lbl">Mensualité</div>
            <div className="fin-val lg">{calc.fin.monthly > 0 ? fmtCAD(calc.fin.monthly) : "—"}</div>
          </div>
        </div>
        {internal && (
          <div className="fin-row">
            <div>
              <div className="fin-lbl">Commission Marc-André</div>
              <div className="fin-val">{fmtCAD0(calc.commission)}</div>
            </div>
            <div>
              <div className="fin-lbl">Marge ajustée</div>
              <div className="fin-val">{fmtPct(calc.marge_aj_pct)}</div>
            </div>
          </div>
        )}
      </div>

      {/* Hint */}
      <div className="hint">
        <Icon name="sparkles" size={13}/>
        <div>{hint}</div>
      </div>
    </>
  );
};

const PriceSummary = ({ state, calc, viewMode }) => {
  const { fmtCAD, fmtCAD0, fmtPct } = window.RAYCAST_CALC;
  const internal = viewMode === "internal";
  const { building_type } = state;
  const fin = window.RAYCOM_DATA.financeit_plans.find(p => p.id === state.client.financing_plan_id);
  const hasSolar = state.project_type === "solaire" || state.project_type === "solaire_batterie";

  // Palier suivant pour incitatif commission
  const currentPct = calc.marge_aj_pct;
  let nextTier = null;
  const tiers = [{ at: 30, rate: 3.5, label: "Acceptable" }, { at: 35, rate: 4, label: "Cible" }, { at: 40, rate: 5, label: "Bonus" }];
  for (const t of tiers) {
    if (currentPct < t.at) { nextTier = t; break; }
  }
  const gain = nextTier ? calc.ht * (nextTier.rate / 100) - calc.commission : 0;
  const points_needed = nextTier ? nextTier.at - currentPct : 0;

  return (
    <>
      {/* TTC */}
      <div className="ps-card accent">
        <div className="lbl">Total TTC</div>
        <div className="val lg tnum">{fmtCAD(calc.ttc)}</div>
        <div className="sub">HT {fmtCAD0(calc.ht)} · TPS+TVQ {fmtCAD0(calc.tps + calc.tvq)}</div>
      </div>

      {/* Subvention */}
      {calc.total_grant > 0 && (
        <div className="ps-card green">
          <div className="lbl">Subvention totale estimée</div>
          <div className="val tnum">{fmtCAD0(calc.total_grant)}</div>
          <div className="sub" style={{ marginTop: 8, paddingTop: 8, borderTop: "1px dashed rgba(5,150,105,0.2)" }}>
            Coût net client · <b style={{ color: "var(--raycom-ink)" }}>{fmtCAD0(calc.net_cost)}</b>
          </div>
        </div>
      )}

      {/* Financement */}
      {calc.fin.monthly > 0 && (
        <div className="ps-card dim">
          <div className="lbl">Financement {fin.label}</div>
          <div className="val tnum" style={{ color: "var(--raycom-accent-dark)" }}>{fmtCAD(calc.fin.monthly)}<span style={{ fontSize: 13, fontWeight: 500, color: "var(--raycom-ink-muted)" }}>/mois</span></div>
          <div className="sub">
            {fmtCAD(calc.fin.biweekly)} bimensuel · {fmtCAD(calc.fin.weekly)} hebdo
          </div>
        </div>
      )}

      {/* Rendement */}
      {hasSolar && calc.savings.total > 0 && (
        <div className="ps-card">
          <div className="lbl">Rendement annuel estimé</div>
          <div style={{ marginTop: 8 }}>
            <div className="row"><span className="k">Production</span><span className="v">{window.RAYCAST_CALC.fmtNum(calc.production)} kWh</span></div>
            <div className="row"><span className="k">Économies + revenus</span><span className="v" style={{ color: "var(--raycom-energy)" }}>{fmtCAD0(calc.savings.total)}</span></div>
            {calc.savings.peak_bonus > 0 && <div className="row"><span className="k">→ Bonus pointe (Flex D/DP)</span><span className="v">{fmtCAD0(calc.savings.peak_bonus)}</span></div>}
            {calc.savings.v2x > 0 && <div className="row"><span className="k">→ Revenus V2X</span><span className="v">{fmtCAD0(calc.savings.v2x)}</span></div>}
            <div className="row" style={{ marginTop: 4, paddingTop: 6, borderTop: "1px solid var(--raycom-border)" }}>
              <span className="k">Payback estimé</span>
              <span className="v" style={{ color: calc.payback < 8 ? "var(--margin-green)" : "var(--margin-yellow)" }}>{isFinite(calc.payback) ? `${calc.payback.toFixed(1).replace(".", ",")} ans` : "—"}</span>
            </div>
          </div>
        </div>
      )}

      {/* Commission (interne) */}
      {internal && (
        <div className="ps-card" style={{ background: "linear-gradient(135deg, #fef3c7, #fde68a)", border: 0 }}>
          <div className="lbl" style={{ color: "#78350f" }}>💰 Commission Marc-André</div>
          <div className="val tnum" style={{ color: "#78350f" }}>{fmtCAD0(calc.commission)}</div>
          <div className="sub" style={{ color: "#92400e" }}>
            {fmtPct(calc.com.rate, 1)} · palier <b>{calc.com.label}</b>
          </div>
          {nextTier && gain > 0 && (
            <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px dashed rgba(120,53,15,0.18)", fontSize: 11, color: "#78350f" }}>
              <Icon name="trending-up" size={11}/>{" "}
              <b>+{fmtCAD0(gain)}</b> si tu gagnes {points_needed.toFixed(1).replace(".", ",")} pt de marge (palier <b>{nextTier.label}</b>)
            </div>
          )}
        </div>
      )}

      {/* Marge brute (interne) */}
      {internal && (
        <div className="ps-card">
          <div className="lbl">Marge brute Raycom</div>
          <div style={{ marginTop: 8 }}>
            <div className="row"><span className="k">Prix vente HT</span><span className="v">{fmtCAD0(calc.ht)}</span></div>
            <div className="row"><span className="k">Coût total</span><span className="v" style={{ color: "var(--raycom-ink-muted)" }}>−{fmtCAD0(calc.cost_total)}</span></div>
            <div className="row" style={{ marginTop: 2, paddingTop: 6, borderTop: "1px solid var(--raycom-border)" }}>
              <span className="k">Marge brute</span>
              <span className={`v tnum m-${window.RAYCAST_CALC.margeColor(calc.marge_pct, building_type)}`}>{fmtCAD0(calc.marge_brute)} · {fmtPct(calc.marge_pct)}</span>
            </div>
            {calc.fin.fee > 0 && (
              <>
                <div className="row"><span className="k">Frais marchand Financeit</span><span className="v" style={{ color: "var(--margin-yellow)" }}>−{fmtCAD0(calc.fin.fee)}</span></div>
                <div className="row" style={{ paddingTop: 4, borderTop: "1px dashed rgba(11,27,43,0.08)" }}>
                  <span className="k"><b>Marge ajustée</b></span>
                  <span className={`v tnum m-${window.RAYCAST_CALC.margeColor(calc.marge_aj_pct, building_type)}`}><b>{fmtCAD0(calc.marge_ajustee)} · {fmtPct(calc.marge_aj_pct)}</b></span>
                </div>
              </>
            )}
            <div className="row" style={{ fontSize: 11 }}>
              <span className="k">Impact</span>
              <span className="v">
                {calc.marge_aj_pct >= 35 && <span style={{ color: "var(--margin-green)" }}>🟢 OK</span>}
                {calc.marge_aj_pct >= 30 && calc.marge_aj_pct < 35 && <span style={{ color: "var(--margin-yellow)" }}>🟡 Attention</span>}
                {calc.marge_aj_pct < 30 && <span style={{ color: "var(--margin-red)" }}>🔴 Coûteux</span>}
              </span>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

window.Dashboard = Dashboard;
window.PriceSummary = PriceSummary;