/* Pólix — Pólizas: lista filtrable + ficha de detalle */
function Polizas() {
  const { data, route, go, openPoliza, search, hoy } = useApp();
  const { polizas, clientes, companias, ramos } = data;
  const [ramoF, setRamoF] = React.useState(route.params.ramo || "todos");
  const [estadoF, setEstadoF] = React.useState(route.params.filtro === "vence" ? "vence" : "todos");

  const getCli = (id) => clientes.find((c) => c.id === id);
  const getCo = (id) => companias.find((c) => c.id === id);
  const q = search.trim().toLowerCase();

  const rows = polizas
    .map((p) => ({ p, s: ventStatus(p, hoy), cli: getCli(p.clienteId) }))
    .filter(({ p, s, cli }) => {
      if (ramoF !== "todos" && p.ramo !== ramoF) return false;
      if (estadoF === "vence" && !["critico", "mes", "vencida"].includes(s.key)) return false;
      if (estadoF === "vigente" && s.key !== "vigente") return false;
      if (q) {
        const hay = (p.numero + " " + (cli ? nombreCompleto(cli) : "") + " " + (p.vehiculo ? p.vehiculo.matricula + " " + p.vehiculo.marca + " " + p.vehiculo.modelo : "")).toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    })
    .sort((a, b) => a.s.days - b.s.days);

  const cuenta = (r) => polizas.filter((p) => r === "todos" ? true : p.ramo === r).length;

  return (
    <div className="view-in">
      <div className="between wrap" style={{ marginBottom: 16 }}>
        <div className="chips">
          <button className={"chip" + (ramoF === "todos" ? " on" : "")} onClick={() => setRamoF("todos")}>Todas <span className="num">· {cuenta("todos")}</span></button>
          {Object.keys(ramos).map((r) => (
            <button key={r} className={"chip" + (ramoF === r ? " on" : "")} onClick={() => setRamoF(r)}>
              {ramos[r].label} <span className="num">· {cuenta(r)}</span>
            </button>
          ))}
        </div>
        <button className="btn btn-primary" onClick={() => go("polizas", { nueva: true })}><Icon name="plus" size={16} />Nueva póliza</button>
      </div>

      <div className="card">
        <div className="card-head between wrap" style={{ gap: 10 }}>
          <h3>{rows.length} póliza{rows.length !== 1 ? "s" : ""}</h3>
          <div className="row" style={{ gap: 10 }}>
            <button className="btn btn-ghost btn-sm" onClick={() => exportarPolizasCSV(rows.map((r) => r.p), data, "cartera-polix.csv")}><Icon name="download" size={15} />Exportar CSV</button>
            <div className="seg">
            <button className={estadoF === "todos" ? "on" : ""} onClick={() => setEstadoF("todos")}>Todas</button>
            <button className={estadoF === "vence" ? "on" : ""} onClick={() => setEstadoF("vence")}>Por vencer</button>
            <button className={estadoF === "vigente" ? "on" : ""} onClick={() => setEstadoF("vigente")}>Vigentes</button>
            </div>
          </div>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Póliza</th><th>Ramo</th><th>Cliente</th><th>Compañía</th><th>Cobertura</th><th>Vigencia</th><th>Prima total</th><th>Estado</th></tr></thead>
            <tbody>
              {rows.map(({ p, s, cli }) => (
                <tr key={p.id} onClick={() => openPoliza(p.id)}>
                  <td><span className="mono cell-main" style={{ fontSize: 12.5 }}>{p.numero}</span>{p.vehiculo && <div className="cell-sub">{p.vehiculo.descripcion || (p.vehiculo.marca + " " + p.vehiculo.modelo)} {p.vehiculo.anio} · {p.vehiculo.tipoBien}{p.vehiculo.matricula ? " · " + p.vehiculo.matricula : ""}</div>}</td>
                  <td><RamoTag ramo={p.ramo} /></td>
                  <td><div className="cell-main">{cli ? nombreCompleto(cli) : "—"}</div></td>
                  <td><CoChip co={getCo(p.companiaId)} /></td>
                  <td><span style={{ fontWeight: 600 }}>{p.cobertura}</span></td>
                  <td><div className="num">{fmtDate(p.inicio)}</div><div className="cell-sub num">→ {fmtDate(p.fin)}</div></td>
                  <td><span className="cell-main num">{fmtMoney(p.total)}</span><div className="cell-sub">{p.mensual ? "/mes" : `${p.cuotas} cuotas`}</div></td>
                  <td><StatusPill poliza={p} hoy={hoy} /></td>
                </tr>
              ))}
            </tbody>
          </table>
          {rows.length === 0 && <Empty icon="file" title="Sin pólizas" sub="Probá con otro filtro o creá una nueva." />}
        </div>
      </div>
      {route.params.nueva && <NuevaPolizaForm />}
    </div>
  );
}

/* ---------- Ficha de póliza ---------- */
function PolizaDetail({ id }) {
  const { data, closeDetail, openCliente, openSiniestro, hoy, renovarPoliza, anularPoliza, deletePoliza, go } = useApp();
  const p = data.polizas.find((x) => x.id === id);
  const [confirm, setConfirm] = React.useState(null); // 'anular' | 'eliminar'
  if (!p) return null;
  const cli = data.clientes.find((c) => c.id === p.clienteId);
  const co = data.companias.find((c) => c.id === p.companiaId);
  const meta = window.POLIX_DATA.ramos[p.ramo];
  const ss = data.siniestros.filter((s) => s.polizaId === p.id);
  const s = ventStatus(p, hoy);

  const valorCuota = p.mensual ? p.total : Math.round(p.total / p.cuotas);

  return (
    <Drawer onClose={closeDetail}
      head={
        <div className="row" style={{ gap: 14 }}>
          <span className="ico-wrap" style={{ margin: 0, width: 48, height: 48, borderRadius: 12, background: meta.color + "1a", color: meta.color, display: "grid", placeItems: "center" }}><Icon name={meta.icono} size={24} /></span>
          <div>
            <h3 style={{ fontSize: 18 }} className="mono">{p.numero}</h3>
            <div className="row" style={{ gap: 8, marginTop: 4 }}><RamoTag ramo={p.ramo} /><StatusPill poliza={p} hoy={hoy} /></div>
          </div>
        </div>
      }
      footer={<>
        <button className="btn btn-danger-soft" onClick={() => setConfirm("eliminar")}><Icon name="trash" size={15} />Eliminar</button>
        {!p.anulada && <button className="btn btn-ghost" onClick={() => setConfirm("anular")}><Icon name="xCircle" size={15} />Anular</button>}
        <button className="btn btn-ghost" onClick={() => { closeDetail(); go("polizas", { nueva: true, editId: p.id }); }}><Icon name="edit" size={15} />Editar</button>
        <button className="btn btn-primary" onClick={() => renovarPoliza(p.id)}><Icon name="refresh" size={15} />Renovar</button>
      </>}>

      {/* Cliente */}
      <button className="card" onClick={() => openCliente(cli.id)} style={{ width: "100%", textAlign: "left", padding: 14, display: "flex", alignItems: "center", gap: 12, cursor: "pointer", marginBottom: 20 }}>
        <Avatar c={cli} size={42} />
        <div style={{ flex: 1 }}><div className="cell-main">{nombreCompleto(cli)}</div><div className="cell-sub mono">{cli.cedula} · {cli.telefono}</div></div>
        <Icon name="chevronRight" size={16} className="muted" />
      </button>

      {/* Datos generales */}
      <div className="fieldset-title">Datos generales</div>
      <dl className="kv" style={{ margin: "12px 0 22px" }}>
        <dt>Compañía</dt><dd><CoChip co={co} /></dd>
        <dt>Cobertura</dt><dd>{p.cobertura}</dd>
        <dt>Vigencia</dt><dd>{fmtDate(p.inicio)} → {p.fin.startsWith("9999") ? "sin vencimiento" : fmtDate(p.fin)} {p.mensual && <Pill kind="info" dot={false}>mensual</Pill>}</dd>
        <dt>Método de pago</dt><dd>{p.metodoPago}</dd>
        <dt>Cuotas</dt><dd>{p.mensual ? "Mensual" : `${p.cuotas} cuota${p.cuotas !== 1 ? "s" : ""} de ${fmtMoney(valorCuota)}`}</dd>
      </dl>

      {/* Importes */}
      <div className="fieldset-title">Importe</div>
      <div className="card card-pad" style={{ margin: "12px 0 22px", background: "var(--surface-2)" }}>
        <div className="kv" style={{ gridTemplateColumns: "1fr auto" }}>
          <dt>Premio</dt><dd className="num" style={{ textAlign: "right" }}>{fmtMoney(p.premio)}</dd>
          <dt>IVA (22%)</dt><dd className="num" style={{ textAlign: "right" }}>{fmtMoney(p.iva)}</dd>
        </div>
        <div className="divider" style={{ margin: "12px 0" }} />
        <div className="between"><b style={{ fontSize: 15 }}>Total {p.mensual ? "mensual" : ""}</b><b className="num" style={{ fontSize: 20, color: "var(--primary-strong)" }}>{fmtMoney(p.total)}</b></div>
      </div>

      {/* Específicos del ramo */}
      {p.vehiculo && <DetalleVehiculo v={p.vehiculo} />}
      {p.hogar && <DetalleSimple titulo="Datos del inmueble" obj={{ "Tipo": p.hogar.tipo, "Superficie": p.hogar.metros + " m²", "Suma incendio": fmtMoney(p.hogar.sumaIncendio), "Suma contenido": fmtMoney(p.hogar.sumaContenido), "Cobertura de robo": p.hogar.robo ? "Sí" : "No" }} />}
      {p.act && <DetalleSimple titulo="Accidentes de trabajo (Ley 16.074)" obj={{ "Actividad": p.act.actividad, "Nº trabajadores": p.act.nominaTrabajadores, "Masa salarial": fmtMoney(p.act.masaSalarial), "Tasa aplicada": p.act.tasa + "%" }} />}
      {p.garantia && <DetalleSimple titulo="Garantía de alquiler" obj={{ "Inmueble": p.garantia.inmueble, "Alquiler mensual": fmtMoney(p.garantia.alquilerMensual), "Meses de cobertura": p.garantia.mesesCobertura, "Propietario": p.garantia.propietario }} />}
      {p.objeto && <DetalleSimple titulo="Objeto asegurado" obj={{ "Descripción": p.objeto.descripcion, "Suma asegurada": fmtMoney(p.objeto.sumaAsegurada), "Cobertura": p.objeto.cobertura }} />}

      {/* Siniestros */}
      <div className="fieldset-title" style={{ marginTop: 22 }}>Siniestros de esta póliza</div>
      <div className="grid" style={{ gap: 8, marginTop: 12 }}>
        {ss.length === 0 && <div className="muted" style={{ fontSize: 13 }}>Sin siniestros registrados.</div>}
        {ss.map((sn) => (
          <button key={sn.id} onClick={() => openSiniestro(sn.id)} className="between"
            style={{ border: "1px solid var(--border)", borderRadius: 10, padding: "10px 14px", background: "var(--surface)", cursor: "pointer" }}>
            <span className="row" style={{ gap: 10 }}><Icon name="claims" size={16} className="muted" /><b style={{ fontSize: 13.5 }}>{sn.tipo}</b><span className="cell-sub">{fmtDate(sn.fecha)}</span></span>
            <Pill kind={sn.estado === "Liquidado" || sn.estado === "Aprobado" ? "ok" : sn.estado === "Abierto" ? "danger" : "warn"} dot={false}>{sn.estado}</Pill>
          </button>
        ))}
      </div>

      {confirm === "anular" && (
        <Modal title="Anular póliza" sub={p.numero} onClose={() => setConfirm(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setConfirm(null)}>Cancelar</button>
            <button className="btn btn-primary" style={{ background: "var(--danger)" }} onClick={() => { anularPoliza(p.id); setConfirm(null); closeDetail(); }}>Sí, anular</button></>}>
          <p style={{ margin: 0 }}>¿Confirmás la anulación de la póliza <b>{p.numero}</b> de {nombreCompleto(cli)}? Esta acción quedará registrada en el historial.</p>
        </Modal>
      )}
      {confirm === "eliminar" && (
        <Modal title="Eliminar póliza" sub={p.numero} onClose={() => setConfirm(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setConfirm(null)}>Cancelar</button>
            <button className="btn btn-primary" style={{ background: "var(--danger)" }} onClick={() => { deletePoliza(p.id); setConfirm(null); }}>Sí, eliminar</button></>}>
          <p style={{ margin: 0 }}>¿Eliminar definitivamente la póliza <b>{p.numero}</b> de {nombreCompleto(cli)}? Se borrarán también sus siniestros asociados. Esta acción no se puede deshacer.</p>
        </Modal>
      )}
    </Drawer>
  );
}

function DetalleVehiculo({ v }) {
  const titulo = v.descripcion || `${v.marca} ${v.modelo}`;
  return (
    <>
      <div className="fieldset-title">Datos del {v.tipoBien === "Motocicleta" ? "vehículo (moto)" : "vehículo"}</div>
      <dl className="kv" style={{ margin: "12px 0 22px" }}>
        <dt>Tipo de bien</dt><dd>{v.tipoBien || "Automóvil"}</dd>
        <dt>Marca / Modelo</dt><dd>{titulo}</dd>
        <dt>Año</dt><dd className="num">{v.anio || "—"}</dd>
        <dt>Matrícula</dt><dd className="mono">{v.matricula || <span className="muted">a completar</span>}</dd>
        <dt>Nº de chasis</dt><dd className="mono">{v.chasis || <span className="muted">a completar</span>}</dd>
        <dt>Nº de padrón</dt><dd className="mono">{v.padron || <span className="muted">a completar</span>}</dd>
        <dt>Nº de motor</dt><dd className="mono">{v.motor || <span className="muted">a completar</span>}</dd>
        <dt>Tipo de cobertura</dt><dd>{v.tipoCobertura}</dd>
        <dt>Deducible</dt><dd className="num">{v.deducible ? fmtMoney(v.deducible) : "—"}</dd>
      </dl>
    </>
  );
}
function DetalleSimple({ titulo, obj }) {
  return (
    <>
      <div className="fieldset-title">{titulo}</div>
      <dl className="kv" style={{ margin: "12px 0 22px" }}>
        {Object.entries(obj).map(([k, val]) => <React.Fragment key={k}><dt>{k}</dt><dd>{val}</dd></React.Fragment>)}
      </dl>
    </>
  );
}

Object.assign(window, { Polizas, PolizaDetail });