// Pantalla Calculadora de préstamos — Auto Paniagua
// Campo a nivel de módulo (estable): si se define dentro del componente, React
// lo trata como un tipo nuevo en cada render y re-monta los inputs (el slider
// "solo cambia una vez").
function CalcField({ label, children, hint }) {
  return (
    <div className="ap-calc-field">
      <div className="ap-calc-field-top">
        <label>{label}</label>
        {hint ? <span className="ap-calc-hint">{hint}</span> : null}
      </div>
      {children}
    </div>
  );
}

function CalculatorScreen({ go, initial }) {
  const [precio, setPrecio] = useState(initial && initial.precio ? initial.precio : 35000);
  const [inicialPct, setInicialPct] = useState(20);
  const [tasa, setTasa] = useState(13.5);
  const [meses, setMeses] = useState(60);

  const inicial = Math.round(precio * inicialPct / 100);
  const financiado = precio - inicial;
  const r = tasa / 100 / 12;
  const cuota = r === 0 ? financiado / meses : (financiado * r) / (1 - Math.pow(1 + r, -meses));
  const totalPagar = cuota * meses + inicial;
  const intereses = cuota * meses - financiado;

  const plazos = [12, 24, 36, 48, 60, 72];

  return (
    <div className="ap-page">
      <div className="ap-listing-hero">
        <div className="ap-wrap">
          <button className="ap-back" onClick={() => go("home")}>{Icons.arrowLeft({ size: 16 })} Inicio</button>
          <p className="ap-overline ap-overline-light">Financiamiento</p>
          <h1 className="ap-listing-title">Calculadora de préstamos</h1>
          <p className="ap-listing-sub">Estima la cuota mensual de tu próximo vehículo en segundos.</p>
        </div>
      </div>

      <div className="ap-wrap ap-calc-layout">
        <div className="ap-calc-inputs">
          {initial && initial.id ? (
            <div className="ap-calc-vehbanner">
              {initial.img ? <img src={initial.img} alt="" /> : null}
              <div className="ap-calc-vehbanner-txt">
                <span className="ap-calc-vehbanner-label">Calculando para</span>
                <strong>{initial.marca} {initial.modelo}{initial.anio ? ` · ${initial.anio}` : ""}</strong>
              </div>
              <button className="ap-calc-vehbanner-link" onClick={() => go("detail", initial)}>Ver vehículo →</button>
            </div>
          ) : null}
          <CalcField label="Precio del vehículo">
            <div className="ap-calc-money">
              <span>US$</span>
              <input type="number" value={precio} min="0" step="500"
                onChange={(e) => setPrecio(Math.max(0, +e.target.value))} />
            </div>
            <input className="ap-range" type="range" min="13000" max="80000" step="500"
              value={Math.min(precio, 80000)} onChange={(e) => setPrecio(+e.target.value)} />
            <div className="ap-range-scale"><span>US$ 13k</span><span>US$ 80k</span></div>
          </CalcField>

          <CalcField label="Inicial" hint={`${inicialPct}% · ${fmtUSD(inicial)}`}>
            <input className="ap-range" type="range" min="0" max="80" step="5"
              value={inicialPct} onChange={(e) => setInicialPct(+e.target.value)} />
            <div className="ap-range-scale"><span>0%</span><span>80%</span></div>
          </CalcField>

          <CalcField label="Tasa de interés anual" hint={`${tasa}%`}>
            <input className="ap-range" type="range" min="6" max="22" step="0.5"
              value={tasa} onChange={(e) => setTasa(+e.target.value)} />
            <div className="ap-range-scale"><span>6%</span><span>22%</span></div>
          </CalcField>

          <CalcField label="Plazo">
            <div className="ap-calc-plazos">
              {plazos.map((p) => (
                <button key={p} className={`ap-plazo ${meses === p ? "is-on" : ""}`} onClick={() => setMeses(p)}>
                  {p}<small>meses</small>
                </button>
              ))}
            </div>
          </CalcField>
        </div>

        <div className="ap-calc-result">
          <div className="ap-calc-result-card">
            <p className="ap-calc-result-label">Cuota mensual estimada</p>
            <p className="ap-calc-cuota">{fmtUSD(Math.round(cuota))}<small>/mes</small></p>
            <div className="ap-calc-bar">
              <div className="ap-calc-bar-fill" style={{ width: `${financiado / (financiado + inicial) * 100}%` }}></div>
            </div>
            <div className="ap-calc-breakdown">
              <div className="ap-calc-line">
                <span>Inicial</span><strong>{fmtUSD(inicial)}</strong>
              </div>
              <div className="ap-calc-line">
                <span>Monto financiado</span><strong>{fmtUSD(Math.round(financiado))}</strong>
              </div>
              <div className="ap-calc-line">
                <span>Intereses ({meses} meses)</span><strong>{fmtUSD(Math.round(intereses))}</strong>
              </div>
              <div className="ap-calc-line ap-calc-line-total">
                <span>Total a pagar</span><strong>{fmtUSD(Math.round(totalPagar))}</strong>
              </div>
            </div>
            <Btn variant="wa" size="lg" className="ap-calc-btn" icon={Icons.whatsapp({ size: 20 })}
              href={waLink(`Hola, simulé un financiamiento: vehículo de ${fmtUSD(precio)}, inicial ${fmtUSD(inicial)}, ${meses} meses. Cuota aprox ${fmtUSD(Math.round(cuota))}/mes. Quiero una pre-aprobación.`)}>
              Solicitar pre-aprobación
            </Btn>
            <p className="ap-calc-disclaimer">
              {Icons.shield({ size: 13 })} Cálculo referencial. La cuota final depende de la entidad financiera, tu perfil crediticio y seguros aplicables.
            </p>
          </div>

          <button className="ap-calc-explore" onClick={() => go("listing")}>
            <div>
              <p className="ap-overline">Siguiente paso</p>
              <h3>Encuentra vehículos en tu rango</h3>
            </div>
            <span className="ap-cat-arrow">{Icons.arrowRight({ size: 18 })}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

window.CalculatorScreen = CalculatorScreen;