/* Pólix — Siniestros: registro e historial */
const ESTADOS_SIN = ["Abierto", "En análisis", "Aprobado", "Liquidado", "Rechazado"];
const estadoPill = (e) => e === "Liquidado" || e === "Aprobado" ? "ok" : e === "Abierto" ? "danger" : e === "Rechazado" ? "neutral" : "warn";

function Siniestros() {
  const { data, openSiniestro, hoy } = useApp();
  const { siniestros, clientes, companias, polizas } = data;
  const [estadoF, setEstadoF] = React.useState("todos");
  const [nuevo, setNuevo] = React.useState(false);

  const getCli = (id) => clientes.find((c) => c.id === id);
  const getCo = (id) => companias.find((c) => c.id === id);
  const rows = siniestros
    .filter((s) => estadoF === "todos" ? true : estadoF === "abiertos" ? (s.estado === "Abierto" || s.estado === "En análisis") : s.estado === estadoF)
    .sort((a, b) => b.fecha.localeCompare(a.fecha));

  const abiertos = siniestros.filter((s) => s.estado === "Abierto" || s.estado === "En análisis").length;

  return (
    <div className="view-in">
      <div className="between wrap" style={{ marginBottom: 16 }}>
        <div className="seg">
          <button className={estadoF === "todos" ? "on" : ""} onClick={() => setEstadoF("todos")}>Todos</button>
          <button className={estadoF === "abiertos" ? "on" : ""} onClick={() => setEstadoF("abiertos")}>Abiertos · {abiertos}</button>
          <button className={estadoF === "Liquidado" ? "on" : ""} onClick={() => setEstadoF("Liquidado")}>Liquidados</button>
        </div>
        <button className="btn btn-primary" onClick={() => setNuevo(true)}><Icon name="plus" size={16} />Registrar siniestro</button>
      </div>

      <div className="card">
        <div className="card-head"><h3>{rows.length} siniestro{rows.length !== 1 ? "s" : ""}</h3></div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Nº</th><th>Cliente</th><th>Tipo</th><th>Fecha</th><th>Compañía</th><th>Monto estimado</th><th>Estado</th></tr></thead>
            <tbody>
              {rows.map((s) => {
                const cli = getCli(s.clienteId);
                return (
                  <tr key={s.id} onClick={() => openSiniestro(s.id)}>
                    <td><span className="mono cell-main" style={{ fontSize: 12.5 }}>{s.numero}</span></td>
                    <td><div className="cell-main">{cli ? nombreCompleto(cli) : "—"}</div></td>
                    <td><span style={{ fontWeight: 600 }}>{s.tipo}</span></td>
                    <td className="num">{fmtDate(s.fecha)}</td>
                    <td><CoChip co={getCo(s.companiaId)} /></td>
                    <td className="num cell-main">{s.montoEstimado ? fmtMoney(s.montoEstimado) : <span className="muted">a determinar</span>}</td>
                    <td><Pill kind={estadoPill(s.estado)} dot={false}>{s.estado}</Pill></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {rows.length === 0 && <Empty icon="claims" title="Sin siniestros" sub="No hay siniestros para este filtro." />}
        </div>
      </div>
      {nuevo && <NuevoSiniestro onClose={() => setNuevo(false)} />}
    </div>
  );
}

function SiniestroDetail({ id }) {
  const { data, closeDetail, openPoliza, openCliente, setEstadoSiniestro } = useApp();
  const s = data.siniestros.find((x) => x.id === id);
  if (!s) return null;
  const cli = data.clientes.find((c) => c.id === s.clienteId);
  const co = data.companias.find((c) => c.id === s.companiaId);
  const pol = data.polizas.find((p) => p.id === s.polizaId);
  const idx = ESTADOS_SIN.indexOf(s.estado);

  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: "var(--danger-bg)", color: "var(--danger)", display: "grid", placeItems: "center" }}><Icon name="claims" size={24} /></span>
        <div><h3 style={{ fontSize: 18 }} className="mono">{s.numero}</h3><div className="row" style={{ gap: 8, marginTop: 4 }}><b>{s.tipo}</b><Pill kind={estadoPill(s.estado)} dot={false}>{s.estado}</Pill></div></div>
      </div>}
      footer={<>
        <button className="btn btn-ghost" onClick={closeDetail}>Cerrar</button>
        <select className="select" style={{ width: "auto" }} value={s.estado} onChange={(e) => setEstadoSiniestro(s.id, e.target.value)}>
          {ESTADOS_SIN.map((e) => <option key={e}>{e}</option>)}
        </select>
      </>}>

      {/* línea de estado */}
      <div className="row" style={{ gap: 0, margin: "4px 0 24px" }}>
        {ESTADOS_SIN.slice(0, 4).map((e, i) => (
          <React.Fragment key={e}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, flex: 1 }}>
              <span style={{ width: 26, height: 26, borderRadius: "50%", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700, background: i <= idx ? "var(--primary)" : "var(--bg-2)", color: i <= idx ? "#fff" : "var(--text-mut)" }}>{i < idx ? "✓" : i + 1}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: i <= idx ? "var(--text)" : "var(--text-mut)", textAlign: "center" }}>{e}</span>
            </div>
            {i < 3 && <div style={{ height: 2, flex: 0.5, background: i < idx ? "var(--primary)" : "var(--border)", marginTop: -16 }} />}
          </React.Fragment>
        ))}
      </div>

      <div className="fieldset-title">Detalle del evento</div>
      <dl className="kv" style={{ margin: "12px 0 22px" }}>
        <dt>Fecha del siniestro</dt><dd>{fmtDateLong(s.fecha)}</dd>
        <dt>Tipo</dt><dd>{s.tipo}</dd>
        <dt>Monto estimado</dt><dd className="num">{s.montoEstimado ? fmtMoney(s.montoEstimado) : "A determinar"}</dd>
        <dt>Compañía</dt><dd><CoChip co={co} /></dd>
      </dl>

      <div className="fieldset-title">Descripción</div>
      <p className="soft" style={{ margin: "10px 0 22px", lineHeight: 1.6 }}>{s.descripcion}</p>

      {cli && <button className="card" onClick={() => openCliente(cli.id)} style={{ width: "100%", textAlign: "left", padding: 14, display: "flex", alignItems: "center", gap: 12, cursor: "pointer", marginBottom: 10 }}>
        <Avatar c={cli} size={40} /><div style={{ flex: 1 }}><div className="cell-main">{nombreCompleto(cli)}</div><div className="cell-sub">Ver ficha del cliente</div></div><Icon name="chevronRight" size={16} className="muted" />
      </button>}
      {pol && <button className="card" onClick={() => openPoliza(pol.id)} style={{ width: "100%", textAlign: "left", padding: 14, display: "flex", alignItems: "center", gap: 12, cursor: "pointer" }}>
        <span className="ico-wrap" style={{ margin: 0, width: 40, height: 40, borderRadius: 10, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center" }}><Icon name="file" size={19} /></span>
        <div style={{ flex: 1 }}><div className="cell-main mono" style={{ fontSize: 13 }}>{pol.numero}</div><div className="cell-sub">Póliza vinculada · {pol.cobertura}</div></div><Icon name="chevronRight" size={16} className="muted" />
      </button>}
    </Drawer>
  );
}

function NuevoSiniestro({ onClose }) {
  const { data, addSiniestro } = useApp();
  const { polizas, clientes } = data;
  const [polizaId, setPolizaId] = React.useState("");
  const [tipo, setTipo] = React.useState("Choque");
  const [fecha, setFecha] = React.useState("2026-06-02");
  const [monto, setMonto] = React.useState("");
  const [desc, setDesc] = React.useState("");
  const pol = polizas.find((p) => p.id === polizaId);
  const cli = pol && clientes.find((c) => c.id === pol.clienteId);

  function guardar() {
    addSiniestro({
      id: "s" + Math.random().toString(36).slice(2, 6),
      numero: "SIN-2026-" + String(Math.floor(Math.random() * 9000) + 1000),
      polizaId, clienteId: pol.clienteId, companiaId: pol.companiaId,
      fecha, tipo, estado: "Abierto", descripcion: desc || "—", montoEstimado: Number(monto) || 0,
    });
    onClose();
  }

  return (
    <Modal title="Registrar siniestro" onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-primary" disabled={!polizaId} style={!polizaId ? { opacity: .5, pointerEvents: "none" } : null} onClick={guardar}>Registrar</button></>}>
      <div className="field" style={{ marginBottom: 14 }}>
        <label>Póliza afectada *</label>
        <select className="select" value={polizaId} onChange={(e) => setPolizaId(e.target.value)}>
          <option value="">Seleccionar póliza…</option>
          {polizas.map((p) => { const c = clientes.find((x) => x.id === p.clienteId); return <option key={p.id} value={p.id}>{p.numero} — {c ? nombreCompleto(c) : ""}</option>; })}
        </select>
        {cli && <span className="hint">Cliente: {nombreCompleto(cli)}</span>}
      </div>
      <div className="form-grid">
        <div className="field"><label>Tipo de siniestro</label><select className="select" value={tipo} onChange={(e) => setTipo(e.target.value)}><option>Choque</option><option>Robo total</option><option>Robo parcial</option><option>Cristales</option><option>Granizo</option><option>Incendio</option><option>Daños a terceros</option><option>Accidente laboral</option><option>Otro</option></select></div>
        <div className="field"><label>Fecha del evento</label><input type="date" className="input" value={fecha} onChange={(e) => setFecha(e.target.value)} /></div>
        <div className="field full"><label>Monto estimado (opcional)</label><input className="input num" value={monto} onChange={(e) => setMonto(e.target.value)} placeholder="64000" /></div>
        <div className="field full"><label>Descripción</label><textarea className="input" rows={3} value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="¿Qué pasó?"></textarea></div>
      </div>
    </Modal>
  );
}

Object.assign(window, { Siniestros, SiniestroDetail });