/* ============================================================
   INside One — Estimador de Flete
   Tabla de tarifas por ruta + calculadora rápida.
   Admin configura tarifas, logística estima al instante.
   ============================================================ */

const FE_COL = "qg_freight_rates";

const SHIPPING_METHODS = [
  { key: "maritimo", label: "Marítimo (FCL/LCL)" },
  { key: "aereo",    label: "Aéreo" },
  { key: "courier",  label: "Courier (DHL/FedEx)" },
];

const RATE_UNITS = [
  { key: "cbm",      label: "por CBM (m³)" },
  { key: "kg",       label: "por kg" },
  { key: "flat",     label: "tarifa fija" },
];

function fmtFE(n) {
  if (!n && n !== 0) return "—";
  return "$" + Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// ── RateModal — crear/editar tarifa ───────────────────────────
function RateModal({ rate, factories, onSave, onClose }) {
  const isNew = !rate.id;
  const [form, setForm] = React.useState({
    origin:        rate.origin        || "",
    destination:   rate.destination   || "Panamá",
    method:        rate.method        || "maritimo",
    unit:          rate.unit          || "cbm",
    rate_per_unit: rate.rate_per_unit || "",
    min_charge:    rate.min_charge    || "",
    transit_days:  rate.transit_days  || "",
    carrier:       rate.carrier       || "",
    notes:         rate.notes         || "",
    factory_id:    rate.factory_id    || "",
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const Row = ({ label, children }) => (
    <label style={{ display:"block", fontSize:12, fontWeight:600, color:"var(--muted)", marginBottom:12 }}>
      {label}
      <div style={{ marginTop:4 }}>{children}</div>
    </label>
  );

  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,.5)", zIndex:200,
      display:"flex", alignItems:"center", justifyContent:"center", padding:20 }}>
      <div style={{ background:"var(--surface)", borderRadius:16, width:"100%", maxWidth:520,
        maxHeight:"90vh", overflow:"auto", boxShadow:"0 24px 48px rgba(0,0,0,.3)" }}>
        <div style={{ padding:"20px 24px 16px", borderBottom:"1px solid var(--border)",
          display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <h2 style={{ margin:0, fontSize:17 }}>{isNew ? "Nueva tarifa" : "Editar tarifa"}</h2>
          <button className="iconbtn" onClick={onClose}><window.Icon name="x" size={16}/></button>
        </div>

        <div style={{ padding:"16px 24px" }}>
          <Row label="Proveedor / Fábrica (opcional)">
            <select className="inp" value={form.factory_id} onChange={e=>set("factory_id",e.target.value)}>
              <option value="">— Ruta general (sin fábrica específica) —</option>
              {factories.map(f=><option key={f.id} value={f.id}>{f.name} · {f.country||""}</option>)}
            </select>
          </Row>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
            <Row label="Origen (país / ciudad / puerto)">
              <input className="inp" value={form.origin} onChange={e=>set("origin",e.target.value)}
                placeholder="España · Barcelona" />
            </Row>
            <Row label="Destino">
              <input className="inp" value={form.destination} onChange={e=>set("destination",e.target.value)}
                placeholder="Panamá · Puerto Balboa" />
            </Row>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
            <Row label="Modalidad">
              <select className="inp" value={form.method} onChange={e=>set("method",e.target.value)}>
                {SHIPPING_METHODS.map(m=><option key={m.key} value={m.key}>{m.label}</option>)}
              </select>
            </Row>
            <Row label="Unidad de tarifa">
              <select className="inp" value={form.unit} onChange={e=>set("unit",e.target.value)}>
                {RATE_UNITS.map(u=><option key={u.key} value={u.key}>{u.label}</option>)}
              </select>
            </Row>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:12 }}>
            <Row label={`Tarifa (${RATE_UNITS.find(u=>u.key===form.unit)?.label||""})`}>
              <input className="inp" type="number" min="0" step="0.01" value={form.rate_per_unit}
                onChange={e=>set("rate_per_unit",parseFloat(e.target.value)||"")} placeholder="0.00" />
            </Row>
            <Row label="Cargo mínimo ($)">
              <input className="inp" type="number" min="0" step="0.01" value={form.min_charge}
                onChange={e=>set("min_charge",parseFloat(e.target.value)||"")} placeholder="0.00" />
            </Row>
            <Row label="Tránsito (días)">
              <input className="inp" type="number" min="0" value={form.transit_days}
                onChange={e=>set("transit_days",parseInt(e.target.value)||"")} placeholder="0" />
            </Row>
          </div>
          <Row label="Naviera / Aerolínea / Courier">
            <input className="inp" value={form.carrier} onChange={e=>set("carrier",e.target.value)}
              placeholder="CMA CGM, DHL, FedEx..." />
          </Row>
          <Row label="Notas (vigencia, restricciones, condiciones)">
            <textarea className="inp" rows={2} style={{ resize:"vertical", fontFamily:"inherit" }}
              value={form.notes} onChange={e=>set("notes",e.target.value)}
              placeholder="Tarifa vigente hasta dic 2025. Incluye BL. Excluye seguro." />
          </Row>
        </div>

        <div style={{ padding:"16px 24px", borderTop:"1px solid var(--border)",
          display:"flex", justifyContent:"flex-end", gap:10 }}>
          <window.Btn variant="ghost" onClick={onClose}>Cancelar</window.Btn>
          <window.Btn icon="check" onClick={() => { onSave({ ...rate, ...form }); onClose(); }}>
            {isNew ? "Crear tarifa" : "Guardar"}
          </window.Btn>
        </div>
      </div>
    </div>
  );
}

// ── Calculadora rápida ────────────────────────────────────────
function QuickCalc({ rates, factories, rfqs, quotes }) {
  const [method,    setMethod]    = React.useState("maritimo");
  const [rateId,    setRateId]    = React.useState("");
  const [cbm,       setCbm]       = React.useState("");
  const [weight,    setWeight]    = React.useState("");
  const [quoteRef,  setQuoteRef]  = React.useState("");
  const [saved,     setSaved]     = React.useState(false);

  const availableRates = rates.filter(r => !method || r.method === method);
  const selectedRate   = rates.find(r => r.id === rateId);

  const estimate = React.useMemo(() => {
    if (!selectedRate) return null;
    const { unit, rate_per_unit, min_charge } = selectedRate;
    let raw = 0;
    if (unit === "cbm")  raw = (parseFloat(cbm)    || 0) * (parseFloat(rate_per_unit) || 0);
    if (unit === "kg")   raw = (parseFloat(weight)  || 0) * (parseFloat(rate_per_unit) || 0);
    if (unit === "flat") raw = parseFloat(rate_per_unit) || 0;
    const min = parseFloat(min_charge) || 0;
    return Math.max(raw, min);
  }, [selectedRate, cbm, weight]);

  const applyToRfq = async () => {
    if (!quoteRef || estimate === null) return;
    const rfq = rfqs.find(r => r.from_quote === quoteRef || r.quote_id === quoteRef);
    if (!rfq) { alert("No se encontró un RFQ para esa cotización."); return; }
    await window.DB.collection(window.QG_COLS.rfqs).doc(rfq.id).update({
      logistics_estimate: estimate,
      logistics_is_estimate: true,
      logistics_estimate_manual: true,
    });
    // También actualizar el ticket logístico
    if (rfq.quote_id) {
      await window.DB.collection("qg_logistics").doc(rfq.quote_id).set({
        logistics_estimate: estimate,
        auto_logistics_estimate: false,
        _ts: Date.now(),
      }, { merge: true });
    }
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <window.Card style={{ marginBottom:24 }}>
      <div style={{ fontSize:13, fontWeight:700, marginBottom:16 }}>Calculadora rápida</div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(180px,1fr))", gap:12 }}>
        <label style={{ fontSize:11, fontWeight:600, color:"var(--muted)" }}>
          Modalidad
          <select className="inp" style={{ marginTop:4, display:"block", width:"100%" }}
            value={method} onChange={e=>{ setMethod(e.target.value); setRateId(""); }}>
            {SHIPPING_METHODS.map(m=><option key={m.key} value={m.key}>{m.label}</option>)}
          </select>
        </label>

        <label style={{ fontSize:11, fontWeight:600, color:"var(--muted)" }}>
          Ruta / tarifa
          <select className="inp" style={{ marginTop:4, display:"block", width:"100%" }}
            value={rateId} onChange={e=>setRateId(e.target.value)}>
            <option value="">— Seleccionar —</option>
            {availableRates.map(r=>(
              <option key={r.id} value={r.id}>
                {r.origin} → {r.destination}{r.carrier?" · "+r.carrier:""}
              </option>
            ))}
          </select>
        </label>

        {selectedRate?.unit === "cbm" && (
          <label style={{ fontSize:11, fontWeight:600, color:"var(--muted)" }}>
            Volumen (CBM)
            <input className="inp" type="number" min="0" step="0.01" style={{ marginTop:4, display:"block", width:"100%" }}
              value={cbm} onChange={e=>setCbm(e.target.value)} placeholder="0.00" />
          </label>
        )}

        {selectedRate?.unit === "kg" && (
          <label style={{ fontSize:11, fontWeight:600, color:"var(--muted)" }}>
            Peso bruto (kg)
            <input className="inp" type="number" min="0" style={{ marginTop:4, display:"block", width:"100%" }}
              value={weight} onChange={e=>setWeight(e.target.value)} placeholder="0" />
          </label>
        )}

        {estimate !== null && (
          <div style={{ display:"flex", flexDirection:"column", justifyContent:"flex-end" }}>
            <div style={{ fontSize:10, fontWeight:700, color:"var(--muted)", textTransform:"uppercase",
              letterSpacing:".07em", marginBottom:4 }}>Estimado</div>
            <div style={{ fontSize:26, fontWeight:800, color:"var(--accent)", lineHeight:1 }}>
              {fmtFE(estimate)}
            </div>
            {selectedRate?.transit_days && (
              <div style={{ fontSize:11, color:"var(--muted)", marginTop:4 }}>
                Tránsito aprox. {selectedRate.transit_days} días · {selectedRate.carrier || "—"}
              </div>
            )}
          </div>
        )}
      </div>

      {estimate !== null && estimate > 0 && (
        <div style={{ marginTop:16, paddingTop:16, borderTop:"1px solid var(--border)",
          display:"flex", alignItems:"center", gap:10, flexWrap:"wrap" }}>
          <div style={{ fontSize:11, fontWeight:600, color:"var(--muted)" }}>Aplicar a cotización:</div>
          <select className="inp" style={{ width:220 }} value={quoteRef}
            onChange={e=>setQuoteRef(e.target.value)}>
            <option value="">— Seleccionar cotización —</option>
            {quotes.map(q=>(
              <option key={q.id} value={q.quote_number||q.id}>
                {q.quote_number} · {q.project_name||q.client_company||""}
              </option>
            ))}
          </select>
          <window.Btn size="sm" icon={saved?"check":"send"} onClick={applyToRfq} disabled={!quoteRef||saved}>
            {saved ? "Aplicado ✓" : "Aplicar estimado"}
          </window.Btn>
        </div>
      )}
    </window.Card>
  );
}

// ── FreightEstimatorView ──────────────────────────────────────
function FreightEstimatorView() {
  const { factories, rfqs, quotes } = React.useContext(window.AppCtx);
  const [rates,     setRates]    = React.useState([]);
  const [loading,   setLoading]  = React.useState(true);
  const [modal,     setModal]    = React.useState(null); // null | rate object
  const [confirm,   setConfirm]  = React.useState(null);
  const [filterMethod, setFilterMethod] = React.useState("todos");

  React.useEffect(() => {
    if (!window.DB) return;
    const unsub = window.DB.collection(FE_COL)
      .orderBy("origin").onSnapshot(snap => {
        setRates(snap.docs.map(d => ({ id:d.id, ...d.data() })));
        setLoading(false);
      }, () => setLoading(false));
    return unsub;
  }, []);

  const saveRate = async (rate) => {
    if (rate.id && rate.id !== "__new__") {
      await window.DB.collection(FE_COL).doc(rate.id).set(rate, { merge: true });
    } else {
      const id = "fr-" + Date.now().toString(36);
      await window.DB.collection(FE_COL).doc(id).set({ id, ...rate, _ts: Date.now() });
    }
  };

  const removeRate = async (id) => {
    await window.DB.collection(FE_COL).doc(id).delete();
  };

  const visibleRates = filterMethod === "todos"
    ? rates
    : rates.filter(r => r.method === filterMethod);

  const methodLabel = (k) => SHIPPING_METHODS.find(m=>m.key===k)?.label || k;
  const unitLabel   = (k) => RATE_UNITS.find(u=>u.key===k)?.label || k;

  return (
    <div style={{ padding:"24px 28px 80px" }}>
      {/* Header */}
      <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between",
        marginBottom:20, gap:16, flexWrap:"wrap" }}>
        <div>
          <h1 style={{ margin:0, fontSize:22, fontWeight:800 }}>Estimador de Flete</h1>
          <div style={{ fontSize:13, color:"var(--muted)", marginTop:4 }}>
            Tabla de tarifas por ruta · calculadora instantánea
          </div>
        </div>
        <window.Btn icon="plus" onClick={() => setModal({ id:"__new__" })}>
          Nueva tarifa
        </window.Btn>
      </div>

      {/* Calculadora rápida */}
      {rates.length > 0 && (
        <QuickCalc rates={rates} factories={factories} rfqs={rfqs} quotes={quotes} />
      )}

      {/* Filtros */}
      <div style={{ display:"flex", gap:10, marginBottom:16, alignItems:"center" }}>
        <div style={{ display:"flex", gap:6 }}>
          {["todos", ...SHIPPING_METHODS.map(m=>m.key)].map(k=>(
            <button key={k}
              style={{ padding:"5px 14px", borderRadius:99, fontSize:12, fontWeight:600, cursor:"pointer",
                background: filterMethod===k ? "var(--accent)" : "var(--surface)",
                color: filterMethod===k ? "#fff" : "var(--muted)",
                border: filterMethod===k ? "none" : "1px solid var(--border)" }}
              onClick={() => setFilterMethod(k)}>
              {k==="todos" ? "Todos" : methodLabel(k)}
            </button>
          ))}
        </div>
        <div style={{ marginLeft:"auto", fontSize:12, color:"var(--muted)" }}>
          {visibleRates.length} tarifa{visibleRates.length!==1?"s":""}
        </div>
      </div>

      {/* Tabla de tarifas */}
      {loading ? (
        <div style={{ textAlign:"center", padding:60, color:"var(--muted)" }}>Cargando tarifas...</div>
      ) : visibleRates.length === 0 ? (
        <div style={{ textAlign:"center", padding:"60px 20px", color:"var(--muted)" }}>
          <div style={{ fontSize:15, marginBottom:8 }}>
            {rates.length === 0
              ? "No hay tarifas configuradas aún."
              : "Ninguna tarifa coincide con el filtro."}
          </div>
          {rates.length === 0 && (
            <div style={{ fontSize:13 }}>
              Agrega la tarifa que te da tu forwarder — origen, destino, modalidad y precio por CBM o kg.
            </div>
          )}
        </div>
      ) : (
        <window.Card pad={0} style={{ overflow:"hidden" }}>
          <table className="hist-table">
            <thead><tr>
              <th>Ruta</th>
              <th>Modalidad</th>
              <th>Tarifa</th>
              <th>Cargo mín.</th>
              <th>Tránsito</th>
              <th>Naviera / Courier</th>
              <th>Notas</th>
              <th style={{ textAlign:"right" }}>Acciones</th>
            </tr></thead>
            <tbody>
              {visibleRates.map(r => {
                const factory = factories.find(f=>f.id===r.factory_id);
                return (
                  <tr key={r.id} className="hist-row">
                    <td>
                      <div style={{ fontWeight:600 }}>{r.origin} → {r.destination}</div>
                      {factory && (
                        <div style={{ fontSize:11, color:"var(--muted)" }}>{factory.name}</div>
                      )}
                    </td>
                    <td>
                      <span style={{ fontSize:11, fontWeight:600, padding:"2px 8px", borderRadius:99,
                        background:"var(--bg)", border:"1px solid var(--border)" }}>
                        {methodLabel(r.method)}
                      </span>
                    </td>
                    <td style={{ fontFamily:"var(--mono)", fontWeight:700 }}>
                      {fmtFE(r.rate_per_unit)}
                      <span style={{ fontSize:11, fontWeight:400, color:"var(--muted)", marginLeft:4 }}>
                        {unitLabel(r.unit)}
                      </span>
                    </td>
                    <td style={{ fontFamily:"var(--mono)", fontSize:12 }}>
                      {r.min_charge ? fmtFE(r.min_charge) : "—"}
                    </td>
                    <td style={{ fontSize:12, color:"var(--muted)" }}>
                      {r.transit_days ? r.transit_days + " días" : "—"}
                    </td>
                    <td style={{ fontSize:12 }}>{r.carrier || "—"}</td>
                    <td style={{ fontSize:11, color:"var(--muted)", maxWidth:160,
                      overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
                      {r.notes || "—"}
                    </td>
                    <td>
                      <div style={{ display:"flex", gap:4, justifyContent:"flex-end" }}>
                        <button className="iconbtn" title="Editar" onClick={() => setModal(r)}>
                          <window.Icon name="edit" size={15}/>
                        </button>
                        <button className="iconbtn danger" title="Eliminar"
                          onClick={() => setConfirm({ msg:`Eliminar tarifa ${r.origin} → ${r.destination}?`, id:r.id })}>
                          <window.Icon name="trash" size={15}/>
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </window.Card>
      )}

      {modal && (
        <RateModal rate={modal} factories={factories}
          onSave={saveRate} onClose={() => setModal(null)} />
      )}

      {confirm && (
        <window.ConfirmModal open title="Eliminar tarifa" message={confirm.msg}
          onConfirm={() => { removeRate(confirm.id); setConfirm(null); }}
          onClose={() => setConfirm(null)} />
      )}
    </div>
  );
}

window.FreightEstimatorView = FreightEstimatorView;