/* global React */
// Études thermiques réglementaires (3CL-DPE 2021) — porté 1:1 de pg-etudes-reg
// dans audits-energies.html. Modal déclenchable depuis la Fiche Dossier.
// UI Claude Design IMMUTABLE : le modal est un overlay, pas une modif layout.

(function () {
  const { useState, useEffect, useMemo } = React;

  const TYPOLOGIES = [
    { v: 'MI', l: 'Maison individuelle' },
    { v: 'LC', l: 'Logement collectif' },
    { v: 'bureaux', l: 'Bureaux' },
    { v: 'commerce', l: 'Commerce / retail' },
    { v: 'enseignement', l: 'Enseignement' },
    { v: 'sante', l: 'Santé' },
    { v: 'hotellerie', l: 'Hôtellerie' },
    { v: 'logistique', l: 'Logistique / entrepôt' },
    { v: 'industriel_atelier', l: 'Industrie / atelier' },
  ];
  const CHAUFFAGES = [
    { v: 'chaudiere_standard|gaz|0.75', l: 'Chaudière gaz standard (rdt 75 %)' },
    { v: 'chaudiere_condensation|gaz|0.95', l: 'Chaudière gaz à condensation (95 %)' },
    { v: 'chaudiere_basse_temperature|fioul|0.85', l: 'Chaudière fioul BT (85 %)' },
    { v: 'radiateur_electrique|electricite|0.98', l: 'Radiateurs électriques (98 %)' },
    { v: 'pac_air_eau|electricite|3.0', l: 'PAC air/eau (COP 3.0)' },
    { v: 'pac_air_air|electricite|3.5', l: 'PAC air/air (COP 3.5)' },
    { v: 'poele_bois|bois|0.70', l: 'Poêle bois (70 %)' },
  ];
  const ECS = [
    { v: 'ecs_electrique|electricite|0.85', l: 'Ballon électrique (85 %)' },
    { v: 'ecs_gaz|gaz|0.78', l: 'Chauffe-eau gaz (78 %)' },
    { v: 'ecs_thermodynamique|electricite|2.5', l: 'ECS thermodynamique (COP 2.5)' },
    { v: 'ecs_solaire|electricite|0.90', l: 'Solaire + appoint (90 %)' },
  ];
  const VENTS = [
    { v: 'sans_vmc', l: 'Sans VMC (ventilation naturelle)' },
    { v: 'vmc_simple_flux_ancien', l: 'VMC simple flux ancienne' },
    { v: 'vmc_simple_flux_hygroreglable', l: 'VMC simple flux hygroréglable' },
    { v: 'vmc_double_flux_sans_rec', l: 'VMC double flux sans récup' },
    { v: 'vmc_double_flux_avec_rec_80pct', l: 'VMC double flux avec récup 80 %' },
  ];

  const CLASSE_COLOR = {
    A: '#00a651', B: '#52b448', C: '#b3d345',
    D: '#ffd900', E: '#f5a623', F: '#e8721d', G: '#d0021b',
  };

  function parseSys(v) {
    const [type, energie, rdt] = (v || '').split('|');
    return { type, energie, cop: parseFloat(rdt) || 1 };
  }

  function buildModele(inputs) {
    return {
      identification: { zoneClimatique: inputs.zone || 'H2b', altitude_m: Number(inputs.altitude) || 100 },
      usage: {
        typologie: inputs.typologie,
        shab: Number(inputs.shab) || 100,
        hauteur_sous_plafond_m: Number(inputs.hsp) || 2.5,
      },
      enveloppe: {
        parois_opaques: [
          { type: 'mur', U: Number(inputs.uMur) || 1.8, surface_m2: Number(inputs.sMur) || 100, b: 1 },
          { type: 'toiture', U: Number(inputs.uToit) || 0.45, surface_m2: Number(inputs.sToit) || 100, b: 1 },
          { type: 'plancher_bas', U: Number(inputs.uPb) || 1.8, surface_m2: Number(inputs.sPb) || 100, b: 0.8 },
        ],
        ouvrants: [
          { type: 'fen', Uw: Number(inputs.uFen) || 2.6, surface_m2: Number(inputs.sFen) || 18, Sw: 0.6, orientation: 'S' },
        ],
        ponts_thermiques: [{ psi: 0.55, longueur_m: 40 }],
      },
      systemes: {
        chauffage: parseSys(inputs.sysCh),
        ecs: parseSys(inputs.sysEcs),
        ventilation: { type: inputs.sysVent || 'vmc_simple_flux_ancien' },
      },
    };
  }

  // ─── Modal principal ─────────────────────────────────────────
  function EtudeReglementaireModal({ onClose, dossier, visite, prefill, prefillClient }) {
    const API = (window.AE_API && window.AE_API.BASE) || '';

    // ClientPicker unifié (Règle 3.a)
    const [picked, setPicked] = useState(prefillClient || null);
    // Inputs (tous live via useState)
    const [nom, setNom] = useState(prefill?.nom || prefillClient?.name || dossier?.client || visite?.client || '');
    const [adresse, setAdresse] = useState(prefill?.adresse || (prefillClient?.street ? [prefillClient.street, prefillClient.zip, prefillClient.city].filter(Boolean).join(' ') : '') || dossier?.address || visite?.clientAddress || '');
    const [siret, setSiret] = useState(prefill?.siret || prefillClient?.siret || dossier?.siret || '');

    const onPickClient = (c) => {
      setPicked(c);
      if (!c) return;
      setNom(c.name || '');
      if (c.street) setAdresse([c.street, c.zip, c.city].filter(Boolean).join(' '));
      if (c.zip) setCp(c.zip);
      if (c.siret) setSiret(c.siret);
    };
    const [cp, setCp] = useState(prefill?.cp || '');
    const [altitude, setAltitude] = useState(prefill?.altitude || 100);
    const [meteo, setMeteo] = useState(null);
    const [typologie, setTypologie] = useState(prefill?.typologie || 'MI');
    const [shab, setShab] = useState(prefill?.shab || 100);
    const [hsp, setHsp] = useState(prefill?.hsp || 2.5);
    const [annee, setAnnee] = useState(prefill?.annee || 1990);
    const [uMur, setUMur] = useState(1.8);
    const [sMur, setSMur] = useState(100);
    const [uToit, setUToit] = useState(0.45);
    const [sToit, setSToit] = useState(100);
    const [uPb, setUPb] = useState(1.8);
    const [sPb, setSPb] = useState(100);
    const [uFen, setUFen] = useState(2.6);
    const [sFen, setSFen] = useState(18);
    const [sysCh, setSysCh] = useState('chaudiere_standard|gaz|0.75');
    const [sysEcs, setSysEcs] = useState('ecs_electrique|electricite|0.85');
    const [sysVent, setSysVent] = useState('vmc_simple_flux_ancien');

    const [zone, setZone] = useState('H2b');
    const [busy, setBusy] = useState(false);
    const [resultat, setResultat] = useState(null);
    const [error, setError] = useState(null);
    const [etudeId, setEtudeId] = useState(null);
    const [recentEtudes, setRecentEtudes] = useState([]);
    const [showEtudesPicker, setShowEtudesPicker] = useState(false);
    const [deleting, setDeleting] = useState(false);

    // Charger la liste des études récentes au montage
    useEffect(() => {
      fetch(`${API}/api/thermique-reglementaire/etudes?limit=20`)
        .then(r => r.json())
        .then(d => setRecentEtudes(d?.etudes || d?.rows || []))
        .catch(() => {});
    }, []);

    // Résolution météo auto quand code postal ou altitude change
    useEffect(() => {
      if (!cp || cp.length !== 5) return;
      let cancelled = false;
      fetch(`${API}/api/thermique-reglementaire/resolve-meteo?postalCode=${cp}&altitude=${altitude}`)
        .then(r => r.json())
        .then(m => { if (!cancelled && m) { setMeteo(m); if (m.zoneKey) setZone(m.zoneKey); } })
        .catch(() => {});
      return () => { cancelled = true; };
    }, [cp, altitude]);

    // Inputs regroupés pour build + debounce calc
    const inputs = { nom, adresse, siret, cp, altitude, zone, typologie, shab, hsp, annee, uMur, sMur, uToit, sToit, uPb, sPb, uFen, sFen, sysCh, sysEcs, sysVent };

    // Calcul live en debounce (évite de spammer le backend)
    useEffect(() => {
      let cancelled = false;
      const t = setTimeout(() => {
        const modele = buildModele(inputs);
        fetch(`${API}/api/thermique-reglementaire/compute`, {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ modele }),
        })
          .then(r => r.json())
          .then(r => { if (!cancelled) setResultat(r); })
          .catch(e => { if (!cancelled) setError(e.message); });
      }, 400);
      return () => { cancelled = true; clearTimeout(t); };
    }, [cp, altitude, zone, typologie, shab, hsp, uMur, sMur, uToit, sToit, uPb, sPb, uFen, sFen, sysCh, sysEcs, sysVent]);

    const classeEnergie = resultat?.classes?.classeFinale || resultat?.classes?.classeEnergie || '?';
    const classeClimat = resultat?.classes?.classeClimat || '?';
    const cep = resultat?.indicateurs?.cepSpecifique_kWhEP_m2 != null ? Math.round(resultat.indicateurs.cepSpecifique_kWhEP_m2) : null;
    const ges = resultat?.indicateurs?.gesSpecifique_kgCO2_m2 != null ? Math.round(resultat.indicateurs.gesSpecifique_kgCO2_m2 * 10) / 10 : null;
    const ubat = resultat?.ubat != null ? Math.round(resultat.ubat * 100) / 100 : null;
    const actions = resultat?.actions || [];

    const loadEtude = async (id) => {
      const d = await fetch(`${API}/api/thermique-reglementaire/etudes/${id}`)
        .then(r => r.json()).catch(() => null);
      if (!d || d.error) return;
      setEtudeId(d.id);
      setNom(d.clientName || '');
      setAdresse(d.clientAddress || '');
      setSiret((d.clientSiret || '').replace(/\s+/g, ''));
      const m = d.modele || {};
      const ident = m.identification || {};
      const usage = m.usage || {};
      const env = m.enveloppe || {};
      const sys = m.systemes || {};
      setAltitude(ident.altitude_m || 100);
      setZone(ident.zoneClimatique || 'H2b');
      setTypologie(usage.typologie || 'MI');
      setShab(usage.shab || 100);
      setHsp(usage.hauteur_sous_plafond_m || 2.5);
      const mur  = (env.parois_opaques || []).find(p => p.type === 'mur') || {};
      const toit = (env.parois_opaques || []).find(p => p.type === 'toiture') || {};
      const pb   = (env.parois_opaques || []).find(p => p.type === 'plancher_bas') || {};
      const fen  = (env.ouvrants || [])[0] || {};
      setUMur(mur.U != null ? mur.U : 1.8);   setSMur(mur.surface_m2  || 100);
      setUToit(toit.U != null ? toit.U : 0.45); setSToit(toit.surface_m2 || 100);
      setUPb(pb.U  != null ? pb.U  : 1.8);   setSPb(pb.surface_m2   || 100);
      setUFen(fen.Uw != null ? fen.Uw : 2.6); setSFen(fen.surface_m2  || 18);
      if (sys.chauffage) setSysCh(`${sys.chauffage.type}|${sys.chauffage.energie}|${sys.chauffage.cop}`);
      if (sys.ecs)       setSysEcs(`${sys.ecs.type}|${sys.ecs.energie}|${sys.ecs.cop}`);
      if (sys.ventilation) setSysVent(sys.ventilation.type || 'vmc_simple_flux_ancien');
      setShowEtudesPicker(false);
    };

    const doDelete = async () => {
      if (!etudeId) return;
      if (!window.confirm(`Supprimer définitivement l'étude #${etudeId} ? Cette action est irréversible.\n\n⚠ Pour préserver la traçabilité OPQIBI sur une étude signée, préférez l'archivage.`)) return;
      setDeleting(true);
      try {
        const r = await fetch(`${API}/api/thermique-reglementaire/etudes/${etudeId}`, { method: 'DELETE' }).then(r => r.json()).catch(() => null);
        if (r && r.error && r.hint) {
          // Backend a refusé le hard-delete → propose archivage
          if (window.confirm(`${r.error}\n\nArchiver à la place ?`)) {
            await fetch(`${API}${r.hint}`, { method: 'POST' }).catch(() => null);
            setEtudeId(null);
            setRecentEtudes(prev => prev.filter(e => e.id !== etudeId));
            onClose();
          }
        } else {
          setEtudeId(null);
          setRecentEtudes(prev => prev.filter(e => e.id !== etudeId));
          onClose();
        }
      } catch(e) { setError(e.message); }
      finally { setDeleting(false); }
    };

    const doArchive = async () => {
      if (!etudeId) return;
      if (!window.confirm(`Archiver l'étude #${etudeId} ?\n\nL'étude restera consultable mais ne s'affichera plus dans la liste par défaut. Préserve la traçabilité légale (OPQIBI, dossier CEE).`)) return;
      setDeleting(true);
      try {
        const r = await fetch(`${API}/api/thermique-reglementaire/etudes/${etudeId}/archive`, { method: 'POST' }).then(r => r.json());
        if (r.status === 'ok') {
          setEtudeId(null);
          setRecentEtudes(prev => prev.filter(e => e.id !== etudeId));
          onClose();
        } else {
          setError(r.error || 'Erreur archivage');
        }
      } catch(e) { setError(e.message); }
      finally { setDeleting(false); }
    };

    const doSaveAndSign = async (sign) => {
      setBusy(true); setError(null);
      try {
        const modele = buildModele(inputs);
        const body = {
          methode: '3CL-DPE-2021',
          modele,
          clientName: nom || null,
          clientAddress: adresse || null,
          clientSiret: (siret || '').replace(/\s+/g, '') || null,
          ceeDossierId: dossier?.id || null,
          opportunityId: dossier?._opportunityId || visite?.opportunityId || null,
          contactId: picked?.contactId || dossier?._contactId || visite?.contactId || null,
          organizationId: picked?.organizationId || dossier?._organizationId || null,
          externalId: picked?.odooId ? `odoo:partner:${picked.odooId}` : null,
        };
        const url    = etudeId
          ? `${API}/api/thermique-reglementaire/etudes/${etudeId}`
          : `${API}/api/thermique-reglementaire/etudes`;
        const method = etudeId ? 'PUT' : 'POST';
        const etude = await fetch(url, {
          method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
        }).then(r => r.json());
        if (!etude || etude.error) throw new Error(etude?.error || 'Échec sauvegarde');
        const savedId = etude.id || etudeId;
        setEtudeId(savedId);
        // Rafraîchir la liste
        setRecentEtudes(prev => {
          const others = prev.filter(e => e.id !== savedId);
          return [{ id: savedId, clientName: nom, createdAt: new Date().toISOString() }, ...others].slice(0, 20);
        });
        if (sign) {
          await fetch(`${API}/api/thermique-reglementaire/etudes/${savedId}/sign`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' }).catch(() => null);
        }
        const pdf = await fetch(`${API}/api/thermique-reglementaire/etudes/${savedId}/pdf`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' }).then(r => r.json()).catch(() => null);
        if (pdf && pdf.pdfPath) {
          window.open(API + '/' + pdf.pdfPath.replace(/^\//, ''), '_blank');
        } else if (pdf && pdf.url) {
          window.open(API + pdf.url, '_blank');
        }
      } catch (e) {
        setError(e.message);
      } finally {
        setBusy(false);
      }
    };

    const inputStyle = { padding: '6px 8px', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 4, background: 'var(--paper-2)', color: 'var(--ink)', fontFamily: 'inherit', width: '100%', boxSizing: 'border-box' };
    const labelStyle = { fontSize: 10, color: 'var(--ink-4)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.4 };
    const fieldStyle = { display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 };

    return (
      <div
        style={{
          position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(14,16,16,0.6)',
          display: 'grid', placeItems: 'center', backdropFilter: 'blur(3px)', padding: 16,
        }}
        onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      >
        <div style={{
          width: 'min(900px, 100%)', maxHeight: '92vh', overflowY: 'auto',
          background: 'var(--paper)', borderRadius: 12, boxShadow: 'var(--shadow-3)',
          border: '1px solid var(--line-2)', boxSizing: 'border-box',
        }}>
          {/* Header */}
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10, position: 'sticky', top: 0, background: 'var(--paper)', zIndex: 1 }}>
            <Dot tone="plasma" size={8} pulse />
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Étude thermique réglementaire</div>
              <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>3CL-DPE 2021 · indicatif · signable référent technique</div>
            </div>
            <span style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{busy ? 'calcul…' : 'live'}</span>
            <button onClick={onClose} style={{ color: 'var(--ink-4)' }}><Icon.cross /></button>
          </div>

          {/* Charger étude existante */}
          {recentEtudes.length > 0 && (
            <div style={{ margin: '10px 20px 0', border: '1px solid var(--line-2)', borderRadius: 6, overflow: 'hidden' }}>
              <button
                onClick={() => setShowEtudesPicker(v => !v)}
                style={{ width: '100%', padding: '7px 12px', textAlign: 'left', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', background: 'var(--paper-2)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}
              >
                <span>📂 Charger étude existante</span>
                {etudeId && <span className="mono" style={{ fontSize: 10, color: 'var(--signal-deep)', marginLeft: 4 }}>— édition #{etudeId}</span>}
                <span style={{ marginLeft: 'auto', fontSize: 10 }}>{showEtudesPicker ? '▲' : '▼'}</span>
              </button>
              {showEtudesPicker && (
                <div style={{ maxHeight: 180, overflowY: 'auto', borderTop: '1px solid var(--line-2)' }}>
                  {recentEtudes.map(e => (
                    <button
                      key={e.id}
                      onClick={() => loadEtude(e.id)}
                      style={{ display: 'flex', width: '100%', alignItems: 'center', padding: '6px 12px', gap: 8, border: 'none', borderBottom: '1px solid var(--hairline)', background: etudeId === e.id ? 'var(--plasma-tint)' : 'var(--paper)', cursor: 'pointer', textAlign: 'left' }}
                    >
                      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', minWidth: 32 }}>#{e.id}</span>
                      <span style={{ fontSize: 11, flex: 1 }}>{e.clientName || e.nom || '—'}</span>
                      <span style={{ fontSize: 10, color: 'var(--ink-4)' }}>{e.createdAt ? new Date(e.createdAt).toLocaleDateString('fr-FR') : ''}</span>
                      {etudeId === e.id && <span style={{ fontSize: 10, color: 'var(--signal-deep)' }}>✓ chargée</span>}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Warning */}
          <div style={{ margin: '10px 20px 0', padding: '8px 12px', fontSize: 11, color: 'var(--copper)', background: 'var(--copper-tint)', border: '1px solid var(--copper)', borderRadius: 6, lineHeight: 1.5 }}>
            <strong>⚠ Étude indicative</strong> — Calcul selon méthode 3CL-DPE 2021. Non opposable au DPE officiel. Utilisable pour : accompagnement CEE, avant-projet, dossier OPQIBI, audit tertiaire.
          </div>

          {/* Form 2 colonnes */}
          <div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {/* Colonne 1 : Identification + Usage */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <SectionLabelER>1. Identification</SectionLabelER>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Client (Odoo + AE)</span>
                    {window.ClientPicker && <window.ClientPicker value={picked} onChange={onPickClient} placeholder="Rechercher client…" compact />}
                  </label>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Nom client / référence</span>
                    <input value={nom} onChange={e => setNom(e.target.value)} placeholder="Ex: M. Dupont" style={inputStyle} />
                  </label>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Adresse</span>
                    <input value={adresse} onChange={e => setAdresse(e.target.value)} placeholder="12 rue... 75001 Paris" style={inputStyle} />
                  </label>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>SIRET (si pro)</span>
                    <input value={siret} onChange={e => setSiret(e.target.value)} placeholder="Optionnel" style={inputStyle} />
                  </label>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <label style={fieldStyle}>
                      <span style={labelStyle}>Code postal</span>
                      <input value={cp} onChange={e => setCp(e.target.value)} placeholder="33000" style={inputStyle} />
                    </label>
                    <label style={fieldStyle}>
                      <span style={labelStyle}>Altitude (m)</span>
                      <input type="number" value={altitude} onChange={e => setAltitude(Number(e.target.value) || 0)} style={inputStyle} />
                    </label>
                  </div>
                  {meteo && (
                    <div style={{ padding: '6px 10px', fontSize: 10, color: 'var(--ink-3)', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 5 }}>
                      <strong>{meteo.zoneKey}</strong> — {meteo.zoneNom} · DJU {meteo.dju_chauffage} · Irradiation {meteo.irradiation_annuelle_kWh_m2} kWh/m²·an
                    </div>
                  )}
                </div>
              </div>

              <div>
                <SectionLabelER>2. Usage & surface</SectionLabelER>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Typologie</span>
                    <select value={typologie} onChange={e => setTypologie(e.target.value)} style={inputStyle}>
                      {TYPOLOGIES.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
                    </select>
                  </label>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <label style={fieldStyle}>
                      <span style={labelStyle}>Surface habitable (m²)</span>
                      <input type="number" value={shab} onChange={e => setShab(Number(e.target.value) || 0)} style={inputStyle} />
                    </label>
                    <label style={fieldStyle}>
                      <span style={labelStyle}>Hauteur ss plafond (m)</span>
                      <input type="number" step="0.1" value={hsp} onChange={e => setHsp(Number(e.target.value) || 0)} style={inputStyle} />
                    </label>
                  </div>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Année construction</span>
                    <input type="number" value={annee} onChange={e => setAnnee(Number(e.target.value) || 0)} style={inputStyle} />
                  </label>
                </div>
              </div>
            </div>

            {/* Colonne 2 : Enveloppe + Systèmes */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <SectionLabelER>3. Enveloppe (U moyens)</SectionLabelER>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { k: 'Murs', u: uMur, sU: setUMur, s: sMur, sS: setSMur },
                    { k: 'Toiture', u: uToit, sU: setUToit, s: sToit, sS: setSToit },
                    { k: 'Plancher bas', u: uPb, sU: setUPb, s: sPb, sS: setSPb },
                    { k: 'Fenêtres', u: uFen, sU: setUFen, s: sFen, sS: setSFen },
                  ].map((row, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr 1fr', gap: 8, alignItems: 'center' }}>
                      <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>{row.k}</span>
                      <label style={fieldStyle}>
                        <span style={labelStyle}>U (W/m²·K)</span>
                        <input type="number" step="0.01" value={row.u} onChange={e => row.sU(Number(e.target.value) || 0)} style={inputStyle} />
                      </label>
                      <label style={fieldStyle}>
                        <span style={labelStyle}>Surface (m²)</span>
                        <input type="number" value={row.s} onChange={e => row.sS(Number(e.target.value) || 0)} style={inputStyle} />
                      </label>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <SectionLabelER>4. Systèmes</SectionLabelER>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Chauffage</span>
                    <select value={sysCh} onChange={e => setSysCh(e.target.value)} style={inputStyle}>
                      {CHAUFFAGES.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
                    </select>
                  </label>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>ECS</span>
                    <select value={sysEcs} onChange={e => setSysEcs(e.target.value)} style={inputStyle}>
                      {ECS.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
                    </select>
                  </label>
                  <label style={fieldStyle}>
                    <span style={labelStyle}>Ventilation</span>
                    <select value={sysVent} onChange={e => setSysVent(e.target.value)} style={inputStyle}>
                      {VENTS.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
                    </select>
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Résultats live */}
          <div style={{ padding: '0 20px 20px' }}>
            <div style={{
              background: 'linear-gradient(135deg, rgba(107,76,255,0.08), var(--paper-2))',
              border: '1px solid var(--line-2)', borderRadius: 8, padding: 16,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <Dot tone="plasma" size={6} pulse />
                <span style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 700 }}>Résultats 3CL-DPE (live)</span>
                <span style={{ flex: 1 }} />
                {meteo && <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>zone {meteo.zoneKey}</span>}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 14 }}>
                <ErKpi label="Cep" value={cep != null ? cep : '—'} unit="kWhEP/m²·an" />
                <ErKpi label="GES" value={ges != null ? ges : '—'} unit="kgCO₂/m²·an" />
                <ErKpi label="Ubat" value={ubat != null ? ubat : '—'} unit="W/m²·K" />
                <ErClasse label="Classe énergie" value={classeEnergie} color={CLASSE_COLOR[classeEnergie] || '#999'} />
              </div>
              {actions.length > 0 && (
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--hairline)' }}>
                  <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 600, marginBottom: 6 }}>Plan d'actions recommandé</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {actions.slice(0, 5).map((a, i) => (
                      <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 10, padding: '6px 10px', background: 'var(--paper)', border: '1px solid var(--hairline)', borderRadius: 5, fontSize: 11, alignItems: 'center' }}>
                        <span className="mono" style={{ fontSize: 10, padding: '1px 5px', background: 'var(--paper-2)', borderRadius: 3, color: 'var(--ink-3)' }}>{a.code}</span>
                        <span style={{ fontWeight: 500 }}>{a.titre}</span>
                        {a.fostLie && <span className="mono" style={{ fontSize: 10, color: 'var(--signal-deep)' }}>{a.fostLie}</span>}
                        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{a.beneficeAnnuelKWh ? `+${Math.round(a.beneficeAnnuelKWh)} kWh/an` : ''}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {error && <div style={{ marginTop: 10, fontSize: 11, color: 'var(--rouge)' }}>Erreur : {error}</div>}
            </div>
          </div>

          {/* Actions */}
          <div style={{ padding: '0 20px 20px', display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', flexWrap: 'wrap' }}>
            {etudeId && (
              <>
                <span className="mono" style={{ fontSize: 10, color: 'var(--signal-deep)' }}>
                  {etudeId ? `✏️ Édition étude #${etudeId}` : ''}
                </span>
                <button
                  onClick={doArchive}
                  disabled={deleting}
                  style={{ padding: '8px 12px', fontSize: 12, color: 'var(--copper)', background: 'var(--copper-tint)', border: '1px solid var(--copper)', borderRadius: 5 }}
                  title="Archiver l'étude (préserve la traçabilité OPQIBI)"
                >📦 Archiver</button>
                <button
                  onClick={doDelete}
                  disabled={deleting}
                  style={{ padding: '8px 12px', fontSize: 12, color: 'var(--rouge)', background: 'var(--rouge-tint)', border: '1px solid var(--rouge)', borderRadius: 5 }}
                  title="Supprimer définitivement (refusé sur étude signée)"
                >🗑 Supprimer</button>
                <button
                  onClick={() => { setEtudeId(null); setNom(''); setAdresse(''); setSiret(''); setShowEtudesPicker(false); }}
                  style={{ padding: '8px 12px', fontSize: 12, color: 'var(--ink-3)', background: 'var(--paper-2)', border: '1px solid var(--line-2)', borderRadius: 5 }}
                  title="Nouvelle étude vierge"
                >+ Nouvelle étude</button>
              </>
            )}
            <span style={{ flex: 1 }} />
            <button onClick={onClose} style={{ padding: '8px 14px', fontSize: 12, color: 'var(--ink-3)' }}>Fermer</button>
            <button
              onClick={() => doSaveAndSign(false)}
              disabled={busy || !resultat}
              style={{ padding: '8px 14px', fontSize: 12, fontWeight: 600, background: 'var(--paper-2)', border: '1px solid var(--line-2)', borderRadius: 5 }}
            >{etudeId ? '💾 Mettre à jour + PDF' : '🖨️ Enregistrer + PDF'}</button>
            <button
              onClick={() => doSaveAndSign(true)}
              disabled={busy || !resultat}
              style={{ padding: '8px 14px', fontSize: 12, fontWeight: 600, background: 'var(--plasma)', color: '#fff', border: 'none', borderRadius: 5 }}
            >✍️ Signer & PDF</button>
          </div>
        </div>
      </div>
    );
  }

  function SectionLabelER({ children }) {
    return (
      <div style={{ fontSize: 11, color: 'var(--ink-2)', fontWeight: 700, marginBottom: 8, paddingBottom: 4, borderBottom: '1px solid var(--hairline)' }}>
        {children}
      </div>
    );
  }
  function ErKpi({ label, value, unit }) {
    return (
      <div>
        <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
          <span className="mono" style={{ fontSize: 17, fontWeight: 600, color: 'var(--ink)', transition: 'color 120ms' }}>{value}</span>
          <span style={{ fontSize: 9, color: 'var(--ink-4)' }}>{unit}</span>
        </div>
      </div>
    );
  }
  function ErClasse({ label, value, color }) {
    return (
      <div>
        <div style={{ fontSize: 9, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>{label}</div>
        <div style={{ marginTop: 2, display: 'inline-flex', padding: '3px 14px', borderRadius: 12, background: color, color: '#fff', fontSize: 14, fontWeight: 700 }}>{value}</div>
      </div>
    );
  }

  window.EtudeReglementaireModal = EtudeReglementaireModal;
})();