/* Modal para agregar / editar marcas */
const { useState: useStateM } = React;

function EventModal({ initial, resource, onSave, onDelete, onClose }) {
  const CL = window.CL;
  const isEdit = !!(initial && initial.id);
  const [type, setType] = useStateM(initial?.type || "asignacion");
  const [projectId, setProjectId] = useStateM(initial?.projectId || CL.PROJECTS[0].id);
  const [estado, setEstado] = useStateM(initial?.estado || "en_curso");
  const [start, setStart] = useStateM(initial?.start || CL.YEAR + "-06-01");
  const [end, setEnd] = useStateM(initial?.end || CL.YEAR + "-06-05");

  const types = [
    { k: "asignacion", label: "Asignación", color: "#7C3AED" },
    { k: "vacaciones", label: "Vacaciones", color: CL.EVENT_TYPES.vacaciones.color },
    { k: "licencia", label: "Licencia", color: CL.EVENT_TYPES.licencia.color },
    { k: "capacitacion", label: "Capacitación", color: CL.EVENT_TYPES.capacitacion.color },
  ];

  const invalidRange = CL.parseISO(end).getTime() < CL.parseISO(start).getTime();
  // ¿el inicio cae en día no laborable?
  function nonLab(s) { const d = CL.parseISO(s); return CL.isWeekend(d) || CL.isHoliday(d); }
  const startNonLab = nonLab(start), endNonLab = nonLab(end);

  function save() {
    if (invalidRange) return;
    const proj = CL.PROJECT_MAP.get(projectId);
    const ev = {
      id: initial?.id,
      resourceId: resource.id,
      type,
      start, end,
      title: type === "asignacion" ? proj.name : CL.EVENT_TYPES[type].label,
    };
    if (type === "asignacion") {
      ev.projectId = projectId;
      ev.estado = estado;
      ev.planEnd = end;
      if (estado === "completada" || estado === "retrasada") {
        ev.realEnd = end;
        ev.onTime = estado === "completada";
      } else { ev.realEnd = null; ev.onTime = null; }
    }
    onSave(ev);
  }

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target.classList.contains("overlay")) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <div>
            <h2>{isEdit ? "Editar marca" : "Nueva marca"}</h2>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{resource.name} · {resource.role}</div>
          </div>
          <button className="navbtn" onClick={onClose} style={{ border: "none" }}>{Icon.x({ width: 18, height: 18 })}</button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Tipo de marca</label>
            <div className="type-pick">
              {types.map((t) => (
                <button key={t.k} className={"type-opt" + (type === t.k ? " sel" : "")} onClick={() => setType(t.k)}>
                  <span className="sw" style={{ background: t.color }}></span>{t.label}
                </button>
              ))}
            </div>
          </div>

          {type === "asignacion" && (
            <React.Fragment>
              <div className="field">
                <label>Solicitud / Proyecto</label>
                <select value={projectId} onChange={(e) => setProjectId(e.target.value)}>
                  {CL.PROJECTS.map((p) => <option key={p.id} value={p.id}>{p.id} · {p.name}</option>)}
                </select>
              </div>
              <div className="field">
                <label>Estado</label>
                <select value={estado} onChange={(e) => setEstado(e.target.value)}>
                  <option value="en_curso">En curso</option>
                  <option value="completada">Completada (a tiempo)</option>
                  <option value="en_riesgo">En riesgo</option>
                  <option value="retrasada">Retrasada</option>
                </select>
              </div>
            </React.Fragment>
          )}

          <div className="field-row">
            <div className="field">
              <label>Fecha inicio</label>
              <input type="date" value={start} min={CL.MIN_YEAR + "-01-01"} max={CL.MAX_YEAR + "-12-31"} onChange={(e) => setStart(e.target.value)} />
            </div>
            <div className="field">
              <label>Fecha fin</label>
              <input type="date" value={end} min={CL.MIN_YEAR + "-01-01"} max={CL.MAX_YEAR + "-12-31"} onChange={(e) => setEnd(e.target.value)} />
            </div>
          </div>

          {invalidRange && <div className="warn-text">{Icon.alert({ width: 14, height: 14 })} La fecha fin no puede ser anterior al inicio.</div>}
          {!invalidRange && (startNonLab || endNonLab) && (
            <div className="warn-text" style={{ color: "var(--muted)" }}>{Icon.alert({ width: 14, height: 14 })} Nota: {startNonLab && endNonLab ? "inicio y fin caen" : "una fecha cae"} en día no laborable (fin de semana o feriado). El cálculo de carga solo cuenta días laborables.</div>
          )}
        </div>
        <div className="modal-foot">
          <div>{isEdit && <button className="btn" onClick={() => onDelete(initial.id)} style={{ color: "var(--rojo-700)", borderColor: "#F3D0D4" }}>{Icon.trash({ width: 15, height: 15 })} Eliminar</button>}</div>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn btn-primary" onClick={save} disabled={invalidRange}>{isEdit ? "Guardar" : "Agregar marca"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EventModal });