/* Pólix — Clientes: lista, búsqueda y ficha */
function Clientes() {
  const { data, search, setSearch, openCliente, openNuevoCliente } = useApp();
  const { clientes, polizas } = data;
  const [orden, setOrden] = React.useState("apellido");

  const q = search.trim().toLowerCase();
  const filtrados = clientes
    .filter((c) => {
      if (!q) return true;
      return nombreCompleto(c).toLowerCase().includes(q)
        || c.apellido.toLowerCase().includes(q)
        || c.cedula.replace(/\./g, "").includes(q.replace(/\./g, ""))
        || (c.email || "").toLowerCase().includes(q);
    })
    .sort((a, b) => orden === "apellido"
      ? (a.apellido || a.nombre).localeCompare(b.apellido || b.nombre)
      : polizasDe(b.id).length - polizasDe(a.id).length);

  function polizasDe(id) { return polizas.filter((p) => p.clienteId === id); }

  return (
    <div className="view-in">
      <div className="between wrap" style={{ marginBottom: 18 }}>
        <div className="row wrap" style={{ gap: 10 }}>
          <label className="search" style={{ width: 360 }}>
            <Icon name="search" size={17} />
            <input value={search} placeholder="Buscar por apellido o cédula…" onChange={(e) => setSearch(e.target.value)} />
            {search && <button className="iconbtn" style={{ padding: 2 }} onClick={() => setSearch("")}><Icon name="x" size={15} /></button>}
          </label>
          <div className="seg">
            <button className={orden === "apellido" ? "on" : ""} onClick={() => setOrden("apellido")}>A–Z</button>
            <button className={orden === "polizas" ? "on" : ""} onClick={() => setOrden("polizas")}>Más pólizas</button>
          </div>
        </div>
        <button className="btn btn-primary" onClick={openNuevoCliente}><Icon name="plus" size={16} />Nuevo cliente</button>
      </div>

      <div className="card">
        <div className="card-head between">
          <h3>{filtrados.length} cliente{filtrados.length !== 1 ? "s" : ""}{q && <span className="muted" style={{ fontWeight: 500 }}> · “{search}”</span>}</h3>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Cliente</th><th>Cédula / RUT</th><th>Contacto</th><th>Departamento</th><th>Pólizas</th><th></th></tr></thead>
            <tbody>
              {filtrados.map((c) => {
                const ps = polizasDe(c.id);
                return (
                  <tr key={c.id} onClick={() => openCliente(c.id)}>
                    <td>
                      <div className="row" style={{ gap: 11 }}>
                        <Avatar c={c} />
                        <div>
                          <div className="cell-main">{nombreCompleto(c)}</div>
                          <div className="cell-sub">{c.empresa ? "Empresa" : "Persona física"} · cliente desde {c.desde.split("-")[0]}</div>
                        </div>
                      </div>
                    </td>
                    <td><span className="mono">{c.cedula}</span></td>
                    <td>
                      <div className="row" style={{ gap: 8 }}>
                        {c.telefono && <a className="wa-btn" href={waLink(c.telefono)} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()} title={`WhatsApp a ${nombreCompleto(c)}`}><Icon name="whatsapp" size={16} /></a>}
                        <div><div className="cell-main" style={{ fontWeight: 600 }}>{c.telefono}</div><div className="cell-sub">{c.email}</div></div>
                      </div>
                    </td>
                    <td>{c.departamento}</td>
                    <td>{ps.length ? <Pill kind="info" dot={false}>{ps.length} activa{ps.length !== 1 ? "s" : ""}</Pill> : <span className="muted">—</span>}</td>
                    <td style={{ textAlign: "right" }}><Icon name="chevronRight" size={16} className="muted" /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {filtrados.length === 0 && <Empty title="Sin resultados" sub={`No encontramos clientes para “${search}”.`} />}
        </div>
      </div>
    </div>
  );
}

/* ---- Ficha del cliente (drawer) ---- */
function ClienteDetail({ id }) {
  const { data, closeDetail, openPoliza, openSiniestro, hoy, go, openEditCliente, deleteCliente } = useApp();
  const c = data.clientes.find((x) => x.id === id);
  const [confirm, setConfirm] = React.useState(false);
  if (!c) return null;
  const ps = data.polizas.filter((p) => p.clienteId === id);
  const ss = data.siniestros.filter((s) => s.clienteId === id);
  const getCo = (cid) => data.companias.find((x) => x.id === cid);
  const primaAnual = ps.reduce((a, p) => a + (p.mensual ? p.total * 12 : p.total), 0);

  return (
    <Drawer onClose={closeDetail}
      head={
        <div className="row" style={{ gap: 14 }}>
          <Avatar c={c} size={52} />
          <div>
            <h3 style={{ fontSize: 19 }}>{nombreCompleto(c)}</h3>
            <div className="muted" style={{ fontSize: 13 }}>{c.empresa ? "Empresa" : "Persona física"} · <span className="mono">{c.cedula}</span></div>
          </div>
        </div>
      }
      footer={<>
        <button className="btn btn-danger-soft" onClick={() => setConfirm(true)}><Icon name="trash" size={15} />Eliminar</button>
        {c.telefono && <a className="btn btn-ghost" href={waLink(c.telefono)} target="_blank" rel="noreferrer" style={{ color: "#1a9d52", borderColor: "oklch(0.86 0.1 150)" }}><Icon name="whatsapp" size={15} />WhatsApp</a>}
        <button className="btn btn-ghost" onClick={() => { closeDetail(); openEditCliente(c.id); }}><Icon name="edit" size={15} />Editar</button>
        <button className="btn btn-primary" onClick={() => { closeDetail(); go("polizas", { nueva: true, cliente: c.id }); }}><Icon name="plus" size={15} />Nueva póliza</button>
      </>}>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 22 }}>
        <div className="stat" style={{ padding: "14px 16px" }}><div className="label">Pólizas</div><div className="value num" style={{ fontSize: 24 }}>{ps.length}</div></div>
        <div className="stat" style={{ padding: "14px 16px" }}><div className="label">Siniestros</div><div className="value num" style={{ fontSize: 24 }}>{ss.length}</div></div>
        <div className="stat" style={{ padding: "14px 16px" }}><div className="label">Prima anual</div><div className="value num" style={{ fontSize: 19 }}>{fmtMoney(primaAnual)}</div></div>
      </div>

      <div className="fieldset-title">Datos de contacto</div>
      <dl className="kv" style={{ margin: "12px 0 24px" }}>
        <dt>Teléfono</dt><dd>{c.telefono}</dd>
        <dt>Email</dt><dd>{c.email}</dd>
        <dt>Dirección</dt><dd>{c.direccion}</dd>
        <dt>Departamento</dt><dd>{c.departamento}</dd>
        <dt>Cliente desde</dt><dd>{fmtDateLong(c.desde)}</dd>
      </dl>

      <div className="fieldset-title">Pólizas vinculadas</div>
      <div className="grid" style={{ gap: 10, margin: "12px 0 24px" }}>
        {ps.map((p) => {
          const meta = window.POLIX_DATA.ramos[p.ramo];
          return (
            <button key={p.id} className="card" onClick={() => openPoliza(p.id)}
              style={{ textAlign: "left", padding: 14, display: "flex", alignItems: "center", gap: 12, cursor: "pointer" }}>
              <span className="ico-wrap" style={{ margin: 0, width: 38, height: 38, borderRadius: 10, background: meta.color + "1a", color: meta.color, display: "grid", placeItems: "center", flex: "none" }}><Icon name={meta.icono} size={19} /></span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: "block", fontWeight: 700 }}>{meta.label} · {p.cobertura}</span>
                <span className="cell-sub mono" style={{ display: "block" }}>{p.numero}</span>
              </span>
              <span style={{ textAlign: "right" }}>
                <CoChip co={getCo(p.companiaId)} />
                <div style={{ marginTop: 5 }}><StatusPill poliza={p} hoy={hoy} /></div>
              </span>
            </button>
          );
        })}
        {ps.length === 0 && <div className="muted" style={{ fontSize: 13 }}>Este cliente no tiene pólizas registradas.</div>}
      </div>

      {ss.length > 0 && <>
        <div className="fieldset-title">Historial de siniestros</div>
        <div className="grid" style={{ gap: 8, marginTop: 12 }}>
          {ss.map((s) => (
            <button key={s.id} onClick={() => openSiniestro(s.id)} className="row"
              style={{ justifyContent: "space-between", 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 }}>{s.tipo}</b><span className="cell-sub">{fmtDate(s.fecha)}</span></span>
              <Pill kind={s.estado === "Liquidado" || s.estado === "Aprobado" ? "ok" : s.estado === "Abierto" ? "danger" : "warn"} dot={false}>{s.estado}</Pill>
            </button>
          ))}
        </div>
      </>}

      {confirm && <Modal title="Eliminar cliente" sub={nombreCompleto(c)} onClose={() => setConfirm(false)}
        footer={<><button className="btn btn-ghost" onClick={() => setConfirm(false)}>Cancelar</button>
          <button className="btn btn-primary" style={{ background: "var(--danger)" }} onClick={() => { deleteCliente(c.id); setConfirm(false); }}>Sí, eliminar</button></>}>
        <p style={{ margin: 0 }}>¿Eliminar a <b>{nombreCompleto(c)}</b>? {ps.length > 0 && <span style={{ color: "var(--danger)" }}>Se eliminarán también sus {ps.length} póliza{ps.length !== 1 ? "s" : ""} y siniestros asociados.</span>} Esta acción no se puede deshacer.</p>
      </Modal>}
    </Drawer>
  );
}

Object.assign(window, { Clientes, ClienteDetail });