// HH (roles) library view

function downloadHHTemplate() {
  const content =
    "Rol,ValorHH,LeyesSociales,Unidad\n" +
    "Ingeniero Eléctrico Senior,28000,40,HH\n" +
    "Técnico Eléctrico,15000,40,HH\n" +
    "Maestro Instalador,12000,40,HH\n" +
    ",,,\n" +
    ",,,\n";
  const blob = new Blob(["\uFEFF" + content], { type: "text/csv;charset=utf-8" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = "MAB-plantilla-HH.csv";
  document.body.appendChild(a); a.click();
  setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 0);
}

function HHView({ state, setState }) {
  const [editing, setEditing] = React.useState(null);
  const [search, setSearch] = React.useState("");

  const update = (id, patch) => setState(s => ({
    ...s,
    roles: s.roles.map(r => r.id === id ? { ...r, ...patch } : r),
  }));
  const remove = (id) => setState(s => ({ ...s, roles: s.roles.filter(r => r.id !== id) }));
  const openNew = () => setEditing({ id: null, role: "", rate: 0, social: 40, unit: "HH" });
  const saveRole = (data) => {
    if (data.id) {
      update(data.id, data);
    } else {
      setState(s => ({ ...s, roles: [...s.roles, { ...data, id: uid("r") }] }));
    }
    setEditing(null);
  };

  const filteredRoles = state.roles.filter(r => {
    if (!search.trim()) return true;
    const t = (r.role + " " + (r.unit || "")).toLowerCase();
    return t.includes(search.toLowerCase());
  });

  const avg = state.roles.length ? state.roles.reduce((a,r)=>a+r.rate,0) / state.roles.length : 0;
  const max = state.roles.reduce((a,r)=>Math.max(a, r.rate), 0);
  const min = state.roles.filter(r=>r.rate>0).reduce((a,r)=>Math.min(a, r.rate), Infinity);

  return (
    <>
      <Topbar
        title="Horas Hombre · Tarifas profesionales"
        crumb="Biblioteca"
        actions={
          <>
            <button className="btn" onClick={downloadHHTemplate}>
              <Icon.download /> Plantilla CSV
            </button>
            <button className="btn primary" onClick={openNew}>
              <Icon.plus /> Nuevo perfil
            </button>
          </>
        }
      />
      <div className="content narrow">
        <div className="kpi-grid" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
          <div className="kpi">
            <div className="label">Tarifa promedio</div>
            <div className="value">{clp(avg)}</div>
            <div className="delta">{state.roles.length} perfiles activos</div>
          </div>
          <div className="kpi">
            <div className="label">Tarifa máxima</div>
            <div className="value">{clp(max)}</div>
            <div className="delta">/ HH</div>
          </div>
          <div className="kpi">
            <div className="label">Tarifa mínima</div>
            <div className="value">{clp(min === Infinity ? 0 : min)}</div>
            <div className="delta">/ HH</div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="row" style={{flex:1, gap: 10, alignItems:"center"}}>
              <div className="row" style={{flex:1, maxWidth: 360, gap: 8, padding: "6px 10px", border:"1px solid var(--line-strong)", borderRadius: 8}}>
                <Icon.search size={16} />
                <input value={search} onChange={e => setSearch(e.target.value)}
                       placeholder="Buscar perfil por nombre…"
                       style={{border:0, background:"transparent", flex:1, outline:"none"}} />
              </div>
              <span className="muted" style={{fontSize:12}}>{filteredRoles.length} de {state.roles.length}</span>
            </div>
            <span className="hint">Las leyes sociales se aplican como % adicional sobre el valor HH</span>
          </div>
          <div className="card-body flush">
            <table className="data">
              <thead>
                <tr>
                  <th>Rol / Perfil</th>
                  <th style={{width:70}}>Unidad</th>
                  <th style={{width:140}} className="num">Valor HH neto</th>
                  <th style={{width:120}} className="num">Leyes soc. %</th>
                  <th style={{width:140}} className="num">HH c/ leyes</th>
                  <th style={{width:70}}></th>
                </tr>
              </thead>
              <tbody>
                {filteredRoles.map(r => {
                  const social = +r.social || 0;
                  const withSocial = (+r.rate || 0) * (1 + social / 100);
                  return (
                    <tr key={r.id}>
                      <td>
                        <input value={r.role} onChange={e => update(r.id, { role: e.target.value })} />
                      </td>
                      <td>
                        <input value={r.unit} onChange={e => update(r.id, { unit: e.target.value })} />
                      </td>
                      <td className="num">
                        <input className="num" type="number" value={r.rate}
                               onChange={e => update(r.id, { rate: +e.target.value })} />
                      </td>
                      <td className="num">
                        <input className="num" type="number" value={r.social ?? 0}
                               onChange={e => update(r.id, { social: +e.target.value })} />
                      </td>
                      <td className="num muted" style={{fontWeight:600}}>{clp(withSocial)}</td>
                      <td>
                        <div className="row" style={{gap:4,justifyContent:"flex-end"}}>
                          <button className="btn icon" onClick={() => setEditing(r)} title="Editar en formulario">
                            <Icon.edit />
                          </button>
                          <button className="btn danger icon" onClick={() => remove(r.id)} title="Eliminar">
                            <Icon.trash />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="muted" style={{fontSize:12, marginTop:14, lineHeight:1.6}}>
          <b>Tip:</b> estas tarifas son las <b>por defecto</b> al agregar un rol a una cotización.
          Las leyes sociales (AFP, salud, seguros, vacaciones, etc.) se suman automáticamente al valor HH.
          Puedes editar las celdas directamente (autoguarda) o usar el botón ✎ para abrir un formulario completo.
        </div>
      </div>

      {editing && <RoleModal initial={editing} onClose={() => setEditing(null)} onSave={saveRole} />}
    </>
  );
}

function RoleModal({ initial, onClose, onSave }) {
  const [r, setR] = React.useState(initial);
  const set = (patch) => setR(s => ({ ...s, ...patch }));
  const valid = r.role.trim() && +r.rate >= 0;

  function submit(e) {
    e.preventDefault();
    if (!valid) return;
    onSave({ ...r, rate: +r.rate || 0, social: +r.social || 0 });
  }

  const withSocial = (+r.rate || 0) * (1 + (+r.social || 0) / 100);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:520}}>
        <div className="modal-head">
          <h2>{r.id ? "Editar perfil HH" : "Nuevo perfil HH"}</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <form onSubmit={submit}>
          <div className="modal-body stack" style={{gap:14}}>
            <div className="field">
              <label>Rol / Perfil <span style={{color:"var(--danger)"}}>*</span></label>
              <input value={r.role} onChange={e => set({ role: e.target.value })}
                     placeholder="Ej. Ingeniero Eléctrico Senior" autoFocus required />
            </div>
            <div className="grid-3">
              <div className="field">
                <label>Unidad</label>
                <input value={r.unit} onChange={e => set({ unit: e.target.value })} placeholder="HH / día" />
              </div>
              <div className="field">
                <label>Valor HH neto (CLP) <span style={{color:"var(--danger)"}}>*</span></label>
                <input type="number" min="0" value={r.rate}
                       onChange={e => set({ rate: e.target.value })} required />
              </div>
              <div className="field">
                <label>Leyes sociales (%)</label>
                <input type="number" min="0" value={r.social}
                       onChange={e => set({ social: e.target.value })} />
              </div>
            </div>
            <div style={{padding:"10px 14px",background:"var(--surface-2)",borderRadius:8,fontSize:13,display:"flex",justifyContent:"space-between"}}>
              <span className="muted">Valor HH con leyes sociales</span>
              <b className="num">{clp(withSocial)}</b>
            </div>
          </div>
          <div className="modal-foot row" style={{justifyContent:"flex-end",padding:"12px 18px",borderTop:"1px solid var(--line)"}}>
            <button type="button" className="btn" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn primary" disabled={!valid}>
              <Icon.check /> Guardar perfil
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { HHView, RoleModal, downloadHHTemplate });