/* Pólix — Compañías de seguro: CRUD + nomenclatura de coberturas y beneficios */
function Companias() {
  const { data, openCompania, addCompania } = useApp();
  const { companias, polizas, ramos } = data;
  const [nueva, setNueva] = React.useState(false);
  return (
    <div className="view-in">
      <div className="between wrap" style={{ marginBottom: 18, alignItems: "flex-start" }}>
        <p className="muted" style={{ margin: 0, maxWidth: 560 }}>Cada aseguradora define sus propias coberturas y beneficios. Al emitir una póliza, el sistema muestra solo los nombres exactos de la compañía elegida.</p>
        <button className="btn btn-primary" style={{ flex: "none" }} onClick={() => setNueva(true)}><Icon name="plus" size={16} />Nueva compañía</button>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))" }}>
        {companias.map((co) => {
          const nPol = polizas.filter((p) => p.companiaId === co.id).length;
          return (
            <button key={co.id} className="card" onClick={() => openCompania(co.id)}
              style={{ textAlign: "left", padding: 0, cursor: "pointer", overflow: "hidden" }}>
              <div style={{ height: 6, background: co.color }} />
              <div className="card-pad">
                <div className="row" style={{ gap: 12, marginBottom: 14 }}>
                  <CoLogo co={co} size={44} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 800, fontSize: 15.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{co.corto}</div>
                    <div className="cell-sub" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{co.nombre}</div>
                  </div>
                </div>
                <div className="row wrap" style={{ gap: 6, marginBottom: 14 }}>
                  {co.ramos.slice(0, 4).map((r) => <span key={r} className="tag" style={{ fontSize: 11 }}><span className="swatch" style={{ background: ramos[r].color }} />{ramos[r].label}</span>)}
                  {co.ramos.length > 4 && <span className="tag" style={{ fontSize: 11 }}>+{co.ramos.length - 4}</span>}
                </div>
                <div className="divider" style={{ marginBottom: 12 }} />
                <div className="between">
                  <span className="cell-sub">{co.coberturas.length} coberturas</span>
                  <span className="row" style={{ gap: 5, fontWeight: 700, fontSize: 13, color: "var(--primary-strong)" }}>{nPol} pólizas <Icon name="chevronRight" size={14} /></span>
                </div>
              </div>
            </button>
          );
        })}
      </div>
      {nueva && <NuevaCompania onClose={() => setNueva(false)} onSave={(c) => { addCompania(c); setNueva(false); }} />}
    </div>
  );
}

function CompaniaDetail({ id }) {
  const { data, closeDetail, deleteCompania, openEditCompania } = useApp();
  const co = data.companias.find((c) => c.id === id);
  const [confirm, setConfirm] = React.useState(false);
  if (!co) return null;
  const meta = window.POLIX_DATA.beneficiosMeta;
  const nPol = data.polizas.filter((p) => p.companiaId === co.id).length;

  const renderBenef = (cb, m) => {
    const v = cb.beneficios[m.key];
    if (m.tipo === "bool") return v ? <Icon name="check" size={16} className="yes" /> : <Icon name="x" size={15} className="no" />;
    if (v == null || v === 0) return <span className="no">—</span>;
    if (m.tipo === "moneda") return <span className="num">{fmtMoney(v)}</span>;
    if (m.tipo === "dias") return <span className="num">{v} días</span>;
    return <span className="num">{v}</span>;
  };

  return (
    <Drawer onClose={closeDetail}
      head={<div className="row" style={{ gap: 14 }}>
        <CoLogo co={co} size={50} />
        <div><h3 style={{ fontSize: 18 }}>{co.nombre}</h3><div className="muted" style={{ fontSize: 13 }}>{nPol} pólizas · {co.telefono} · {co.sitio}</div></div>
      </div>}
      footer={<>
        <button className="btn btn-danger-soft" onClick={() => setConfirm(true)}><Icon name="trash" size={15} />Dar de baja</button>
        <button className="btn btn-ghost" onClick={() => { closeDetail(); openEditCompania(co.id); }}><Icon name="edit" size={15} />Editar</button>
      </>}>

      <div className="fieldset-title">Ramos habilitados</div>
      <div className="row wrap" style={{ gap: 8, margin: "12px 0 24px" }}>
        {co.ramos.map((r) => <RamoTag key={r} ramo={r} />)}
      </div>

      <div className="fieldset-title">Coberturas y beneficios</div>
      <div className="muted" style={{ fontSize: 12.5, margin: "8px 0 16px" }}>Detalle de qué cubre cada cobertura de {co.corto}.</div>
      <div className="grid" style={{ gap: 16 }}>
        {co.coberturas.map((cb) => (
          <div key={cb.nombre} className="card card-pad">
            <div className="between" style={{ marginBottom: 14 }}>
              <div><div style={{ fontWeight: 800, fontSize: 15 }}>{cb.nombre}</div><RamoTag ramo={cb.ramo} /></div>
              <div style={{ textAlign: "right" }}><div className="num" style={{ fontWeight: 800, fontSize: 18, color: "var(--primary-strong)" }}>{fmtMoney(cb.precioMensual)}</div><div className="cell-sub">por mes (ref.)</div></div>
            </div>
            <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "8px 18px" }}>
              {meta.map((m) => (
                <div key={m.key} className="between" style={{ borderBottom: "1px solid var(--border)", paddingBottom: 6, fontSize: 13 }}>
                  <span className="muted">{m.label}</span><span style={{ fontWeight: 700 }}>{renderBenef(cb, m)}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {confirm && <Modal title="Dar de baja la compañía" sub={co.nombre} onClose={() => setConfirm(false)}
        footer={<><button className="btn btn-ghost" onClick={() => setConfirm(false)}>Cancelar</button>
          <button className="btn btn-primary" style={{ background: "var(--danger)" }} onClick={() => { deleteCompania(co.id); setConfirm(false); closeDetail(); }}>Dar de baja</button></>}>
        <p style={{ margin: 0 }}>¿Dar de baja a <b>{co.nombre}</b>? {nPol > 0 && <span style={{ color: "var(--danger)" }}>Tiene {nPol} pólizas asociadas que seguirán visibles en el historial.</span>}</p>
      </Modal>}
    </Drawer>
  );
}

function NuevaCompania({ onClose, onSave, initial }) {
  const { data } = useApp();
  const [nombre, setNombre] = React.useState(initial ? initial.nombre : "");
  const [corto, setCorto] = React.useState(initial ? initial.corto : "");
  const [color, setColor] = React.useState(initial ? initial.color : "#2563EB");
  const [ramosSel, setRamosSel] = React.useState(initial ? [...initial.ramos] : ["vehiculos"]);
  const ramos = data.ramos;
  const toggle = (r) => setRamosSel((s) => s.includes(r) ? s.filter((x) => x !== r) : [...s, r]);
  const colores = ["#1857B0", "#0033A0", "#00963F", "#D8161E", "#7C3AED", "#0E9488", "#D97706", "#DB2777"];

  function guardar() {
    onSave(initial
      ? { ...initial, nombre, corto: corto || nombre.slice(0, 6), color, ramos: ramosSel }
      : { id: "co" + Math.random().toString(36).slice(2, 6), nombre, corto: corto || nombre.slice(0, 6), color, sitio: "", telefono: "", ramos: ramosSel, coberturas: [] });
  }
  return (
    <Modal title={initial ? "Editar compañía" : "Nueva compañía"} sub={initial ? initial.nombre : "Alta de aseguradora"} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-primary" disabled={!nombre} style={!nombre ? { opacity: .5, pointerEvents: "none" } : null} onClick={guardar}>{initial ? "Guardar cambios" : "Crear compañía"}</button></>}>
      <div className="form-grid">
        <div className="field full"><label>Nombre *</label><input className="input" value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Ej. Berkley Seguros" /></div>
        <div className="field"><label>Sigla / nombre corto</label><input className="input" value={corto} onChange={(e) => setCorto(e.target.value)} placeholder="Berkley" /></div>
        <div className="field"><label>Color de marca</label>
          <div className="row wrap" style={{ gap: 7, paddingTop: 4 }}>
            {colores.map((c) => <button key={c} onClick={() => setColor(c)} style={{ width: 28, height: 28, borderRadius: 8, background: c, border: color === c ? "3px solid var(--text)" : "2px solid var(--border)", cursor: "pointer" }} />)}
          </div>
        </div>
      </div>
      <div className="field full" style={{ marginTop: 16 }}><label>Ramos que opera</label>
        <div className="chips" style={{ paddingTop: 4 }}>
          {Object.keys(ramos).map((r) => <button key={r} className={"chip" + (ramosSel.includes(r) ? " on" : "")} onClick={() => toggle(r)}>{ramos[r].label}</button>)}
        </div>
      </div>
      <p className="hint" style={{ marginTop: 14 }}>Luego de crearla vas a poder cargar sus coberturas y beneficios desde la ficha.</p>
    </Modal>
  );
}

Object.assign(window, { Companias, CompaniaDetail, NuevaCompania });