/* Modales CRUD: Jefe de Proyecto, Recurso, Solicitudes */
const { useState: useS } = React;

/* ---------- Jefe de Proyecto / Equipo ---------- */
function PMModal({ initial, onSave, onDelete, onClose }) {
  const CL = window.CL;
  const isEdit = !!(initial && initial.id);
  const [pm, setPm] = useS(initial?.pm || "");
  const [team, setTeam] = useS(initial?.team || "");
  const [template, setTemplate] = useS(!isEdit);
  const valid = pm.trim() && team.trim();
  const resCount = isEdit ? (CL.TEAMS.find((t) => t.id === initial.id)?.resources.length || 0) : 0;
  function submit() { if (valid) onSave({ id: initial?.id, pm: pm.trim(), team: team.trim(), template: !isEdit && template }); }
  const onKey = (e) => { if (e.key === "Enter") submit(); };

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target.classList.contains("overlay")) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <h2>{isEdit ? "Editar Jefe de Proyecto" : "Nuevo Jefe de Proyecto"}</h2>
          <button className="navbtn" onClick={onClose} style={{ border: "none" }}>{Icon.x({ width: 18, height: 18 })}</button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Nombre del Jefe de Proyecto</label>
            <input value={pm} autoFocus onChange={(e) => setPm(e.target.value)} onKeyDown={onKey} placeholder="Ej. Carlos Mendoza" />
          </div>
          <div className="field">
            <label>Nombre del equipo</label>
            <input value={team} onChange={(e) => setTeam(e.target.value)} onKeyDown={onKey} placeholder="Ej. Aurora" />
          </div>
          {!isEdit && (
            <label className="check-row">
              <input type="checkbox" checked={template} onChange={(e) => setTemplate(e.target.checked)} />
              <span>Crear con plantilla estándar <b>(3 desarrolladores, 1 QA, 1 analista prod.)</b></span>
            </label>
          )}
        </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 equipo</button>}</div>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn btn-primary" onClick={submit} disabled={!valid}>{isEdit ? "Guardar" : "Crear equipo"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Recurso (Dev / QA / Prod) ---------- */
function ResourceModal({ initial, teamName, onSave, onDelete, onClose }) {
  const CL = window.CL;
  const isEdit = !!(initial && initial.id);
  const [name, setName] = useS(initial?.name || "");
  const [role, setRole] = useS(initial?.role || "Desarrollador");
  const valid = name.trim();
  function submit() { if (valid) onSave({ id: initial?.id, name: name.trim(), role }); }

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target.classList.contains("overlay")) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <div>
            <h2>{isEdit ? "Editar recurso" : "Nuevo recurso"}</h2>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Equipo {teamName}</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>Nombre completo</label>
            <input value={name} autoFocus onChange={(e) => setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") submit(); }} placeholder="Ej. Mateo Quispe" />
          </div>
          <div className="field">
            <label>Rol</label>
            <div className="type-pick" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
              {CL.ROLES.map((r) => (
                <button key={r.role} className={"type-opt" + (role === r.role ? " sel" : "")} onClick={() => setRole(r.role)} style={{ justifyContent: "center" }}>
                  {r.roleShort === "Dev" ? "Desarrollador" : r.role}
                </button>
              ))}
            </div>
          </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={submit} disabled={!valid}>{isEdit ? "Guardar" : "Agregar recurso"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Solicitudes (códigos) ---------- */
function ProjectsModal({ events, onCommit, onClose }) {
  const CL = window.CL;
  const [draft, setDraft] = useS(() => CL.PROJECTS.map((p) => ({ _key: p.id, id: p.id, name: p.name, color: p.color })));
  const marcasOf = (pid) => (events || []).filter((e) => e.type === "asignacion" && e.projectId === pid).length;

  function set(i, patch) { setDraft((d) => d.map((row, j) => (j === i ? Object.assign({}, row, patch) : row))); }
  function addRow() {
    const used = new Set(draft.map((d) => d.color));
    const color = CL.PROJECT_COLORS.find((c) => !used.has(c)) || CL.PROJECT_COLORS[draft.length % CL.PROJECT_COLORS.length];
    setDraft((d) => d.concat([{ _key: CL.uid("new"), id: "", name: "", color }]));
  }
  function removeRow(i) { setDraft((d) => d.filter((_, j) => j !== i)); }

  // validación
  const ids = draft.map((d) => d.id.trim());
  const dupe = ids.some((id, i) => id && ids.indexOf(id) !== i);
  const empty = draft.some((d) => !d.id.trim() || !d.name.trim());
  const valid = !dupe && !empty;

  // impacto: marcas que se eliminarán al borrar solicitudes
  const origIds = CL.PROJECTS.map((p) => p.id);
  const keptKeys = new Set(draft.map((d) => d._key));
  const removedNow = origIds.filter((id) => !keptKeys.has(id));
  const marcasARemover = removedNow.reduce((s, id) => s + marcasOf(id), 0);

  function commit() {
    if (!valid) return;
    const newProjects = draft.map((d) => ({ id: d.id.trim(), name: d.name.trim(), color: d.color }));
    const originals = CL.PROJECTS.map((p) => p.id);
    const remap = {};
    draft.forEach((d) => { if (d._key && originals.includes(d._key) && d._key !== d.id.trim()) remap[d._key] = d.id.trim(); });
    const kept = new Set(draft.filter((d) => originals.includes(d._key)).map((d) => d._key));
    const removed = originals.filter((id) => !kept.has(id));
    onCommit({ newProjects, remap, removed });
  }

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target.classList.contains("overlay")) onClose(); }}>
      <div className="modal" style={{ maxWidth: 620 }}>
        <div className="modal-head">
          <div>
            <h2>Gestionar solicitudes</h2>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Códigos de solicitud / proyecto y su color en el calendario</div>
          </div>
          <button className="navbtn" onClick={onClose} style={{ border: "none" }}>{Icon.x({ width: 18, height: 18 })}</button>
        </div>
        <div className="modal-body" style={{ gap: 10, maxHeight: "56vh", overflowY: "auto" }}>
          <div className="proj-head">
            <span>Código</span><span>Nombre de la solicitud</span><span>Color</span><span></span>
          </div>
          {draft.map((row, i) => (
            <div className="proj-row" key={row._key}>
              <input className="proj-code" value={row.id} onChange={(e) => set(i, { id: e.target.value.toUpperCase() })} placeholder="SOL-0000" />
              <div>
                <input value={row.name} onChange={(e) => set(i, { name: e.target.value })} placeholder="Nombre" />
                {origIds.includes(row._key) && marcasOf(row._key) > 0 && <div className="proj-marcas">{marcasOf(row._key)} marca{marcasOf(row._key) === 1 ? "" : "s"} en el calendario</div>}
              </div>
              <div className="swatches">
                {CL.PROJECT_COLORS.map((c) => (
                  <button key={c} className={"swatch" + (row.color === c ? " sel" : "")} style={{ background: c }} onClick={() => set(i, { color: c })}></button>
                ))}
              </div>
              <button className="navbtn del-sm" onClick={() => removeRow(i)} title="Eliminar solicitud">{Icon.trash({ width: 15, height: 15 })}</button>
            </div>
          ))}
          <button className="btn add-proj" onClick={addRow}>{Icon.plus({ width: 15, height: 15 })} Agregar solicitud</button>
          {dupe && <div className="warn-text">{Icon.alert({ width: 14, height: 14 })} Hay códigos duplicados.</div>}
          {empty && !dupe && <div className="warn-text" style={{ color: "var(--muted)" }}>{Icon.alert({ width: 14, height: 14 })} Completa código y nombre en cada fila.</div>}
          {marcasARemover > 0 && <div className="warn-text">{Icon.alert({ width: 14, height: 14 })} Al guardar se eliminarán {marcasARemover} marca{marcasARemover === 1 ? "" : "s"} del calendario de las solicitudes borradas.</div>}
        </div>
        <div className="modal-foot" style={{ justifyContent: "flex-end" }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={commit} disabled={!valid}>Guardar cambios</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PMModal, ResourceModal, ProjectsModal });