/* =====================================================================
   VILLAVERDE · Cotización imprimible (hoja carta, solo @media print)
   ===================================================================== */

function CotizacionPrint({ pkg, guests, pp, cliente, evento }) {
  const total = pp * guests;
  const anticipo = 3000;
  const fmt = (n) => '$' + n.toLocaleString('es-MX');

  const hoy = new Date();
  const fechaHoy = hoy.toLocaleDateString('es-MX', { day: 'numeric', month: 'long', year: 'numeric' });
  const folio = 'VV-' + hoy.getFullYear().toString().slice(2) +
    String(hoy.getMonth() + 1).padStart(2, '0') + String(hoy.getDate()).padStart(2, '0');

  const fechaEvento = localStorage.getItem('vv_fecha') || 'Por definir';
  const mantel = VV.MANTELES.find(m => m.id === (localStorage.getItem('vv_mantel') || ''));

  let favIds = [];
  try { favIds = JSON.parse(localStorage.getItem('vv_fav') || '[]'); } catch {}
  const favs = VV.CORTESIAS.filter(c => favIds.includes(c.id));

  const incluye = [];
  if (pkg.hereda) incluye.push('Todo lo incluido en el paquete ' + pkg.hereda);
  incluye.push(...pkg.incluye);

  const cortNote = pkg.cortesias === 'Todas'
    ? 'Este paquete incluye TODAS las cortesías.'
    : `Este paquete incluye ${pkg.cortesias} cortesía${pkg.cortesias > 1 ? 's' : ''} a elegir.`;

  return ReactDOM.createPortal(
    <div className="vv-ps">
      <header className="vv-ps__head">
        <div className="vv-ps__brand">
          <img src="assets/logo-villaverde.png" alt="Villaverde" />
          <div>
            <div className="vv-ps__name">Villaverde</div>
            <div className="vv-ps__sub">Jardín &amp; Salón de Eventos · {VV.CONTACTO.lugar}</div>
          </div>
        </div>
        <div className="vv-ps__doc">
          <div className="vv-ps__doctitle">Cotización</div>
          <div className="vv-ps__folio">Folio {folio} · {fechaHoy}</div>
        </div>
      </header>

      <div className="vv-ps__meta">
        <div><span>A nombre de</span><b>{cliente || '________________________'}</b></div>
        <div><span>Evento</span><b>{evento || '—'}</b></div>
        <div><span>Fecha del evento</span><b>{fechaEvento}</b></div>
        <div><span>Invitados</span><b>{guests} personas</b></div>
      </div>

      <div className="vv-ps__pkg">
        <div>
          <div className="vv-ps__pkgname">Paquete {pkg.name}</div>
          <div className="vv-ps__pkgtag">{pkg.tag} · {pkg.horasDet || pkg.horas}</div>
        </div>
        <div className="vv-ps__pkgprice">
          <div className="vv-ps__pp">{fmt(pp)} <small>por persona × {guests}</small></div>
          <div className="vv-ps__total">{fmt(total)}</div>
          <div className="vv-ps__totalnote">Inversión total · todo incluido</div>
        </div>
      </div>

      <div className="vv-ps__cols">
        <div>
          <h4>El paquete incluye</h4>
          <ul className="vv-ps__list">
            {incluye.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
        </div>
        <div>
          <h4>Cortesías de su interés</h4>
          <div className="vv-ps__cortnote">{cortNote}</div>
          {favs.length > 0 ? (
            <ul className="vv-ps__list vv-ps__list--fav">
              {favs.map(f => <li key={f.id}>{f.name}</li>)}
            </ul>
          ) : (
            <div className="vv-ps__empty">Sin cortesías marcadas aún.</div>
          )}

          {mantel && (
            <div className="vv-ps__mantel">
              <h4>Mantelería elegida</h4>
              <span className="vv-ps__swatch" style={{ background: mantel.hex }}></span> {mantel.name}
            </div>
          )}

          <div className="vv-ps__pay">
            <div><span>Anticipo para apartar fecha</span><b>{fmt(anticipo)}</b></div>
            <div><span>Restante (plan de pagos a meses)</span><b>{fmt(total - anticipo)}</b></div>
          </div>
        </div>
      </div>

      <footer className="vv-ps__foot">
        <div>
          <b>WhatsApp {VV.CONTACTO.whats}</b> · Lun–Sáb 10–12 y 3–6 pm<br />
          Precios sujetos a disponibilidad de fecha. Cotización válida 15 días naturales.
        </div>
        <div className="vv-ps__sign">
          <div className="vv-ps__signline"></div>
          Asesor Villaverde
        </div>
      </footer>
    </div>,
    document.body
  );
}

Object.assign(window, { CotizacionPrint });