// views-projects.jsx — Vista de gestión de proyectos para el admin.
// Cada proyecto puede tener un ID de grupo de WhatsApp donde se duplica
// el aviso al admin cuando un cliente abre un ticket de ese proyecto.

function ProjectsView({ projects, onCreate, onUpdate, onUpdateGroup, onDelete }) {
  const [showCreate, setShowCreate] = React.useState(false);
  const [editing, setEditing]       = React.useState(null);     // proyecto a renombrar
  const [groupOf, setGroupOf]       = React.useState(null);     // proyecto al que se configura el grupo
  const [search, setSearch]         = React.useState("");

  const filtered = projects.filter(p => {
    if (!search) return true;
    return p.nombre_proyecto.toLowerCase().includes(search.toLowerCase());
  });

  return (
    <div className="view">
      <div className="view-pad">
        <div className="page-head">
          <div className="page-head-info">
            <div className="page-head-title-row">
              <h2 className="page-head-title">Proyectos</h2>
              <span className="page-head-count" aria-label={`${projects.length} proyectos`}>
                {projects.length}
              </span>
            </div>
            <p className="page-head-sub">
              Catálogo visible para el cliente al crear un ticket.
            </p>
          </div>
          <button
            className="btn btn-primary page-head-cta"
            onClick={() => setShowCreate(true)}
          >
            <Icon name="plus" style={{ width: 14, height: 14 }} />
            <span>Nuevo proyecto</span>
          </button>
        </div>

        <div className="proj-toolbar">
          <div className="search proj-search">
            <Icon name="search" />
            <input
              type="text"
              placeholder="Buscar proyecto…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>
        </div>

        {filtered.length === 0 ? (
          <div className="proj-empty">
            <div className="proj-empty-icon">
              <Icon name="folder" />
            </div>
            <div className="proj-empty-title">
              {projects.length === 0
                ? "Aún no hay proyectos"
                : "Sin resultados"}
            </div>
            <div className="proj-empty-sub">
              {projects.length === 0
                ? "Crea el primero para que el cliente pueda seleccionarlo en el formulario."
                : "Prueba con otro término de búsqueda."}
            </div>
            {projects.length === 0 && (
              <button
                className="btn btn-primary"
                onClick={() => setShowCreate(true)}
                style={{ marginTop: 14 }}
              >
                <Icon name="plus" style={{ width: 14, height: 14 }} />
                Crear el primer proyecto
              </button>
            )}
          </div>
        ) : (
          <div className="proj-list">
            {filtered.map(p => (
              <ProjectRow
                key={p.id}
                project={p}
                onEditGroup={() => setGroupOf(p)}
                onEditName={() => setEditing(p)}
                onDelete={onDelete}
              />
            ))}
          </div>
        )}
      </div>

      {showCreate && (
        <CreateProjectModal
          existing={projects}
          onClose={() => setShowCreate(false)}
          onCreate={onCreate}
        />
      )}

      {editing && (
        <EditProjectModal
          project={editing}
          existing={projects}
          onClose={() => setEditing(null)}
          onUpdate={onUpdate}
        />
      )}

      {groupOf && (
        <ProjectGroupModal
          project={groupOf}
          onClose={() => setGroupOf(null)}
          onUpdateGroup={onUpdateGroup}
        />
      )}
    </div>
  );
}

function ProjectRow({ project, onEditGroup, onEditName, onDelete }) {
  const [confirming, setConfirming] = React.useState(false);
  const [busy, setBusy]             = React.useState(false);

  const hasGroup = !!(project.whatsapp_group_id);

  const doDelete = async () => {
    setBusy(true);
    try {
      await onDelete(project.id);
    } catch (_) {
      // El error ya se mostró como toast desde App
    } finally {
      setBusy(false);
      setConfirming(false);
    }
  };

  return (
    <div className="proj-row">
      <div className="proj-row-icon">
        <Icon name="folder" />
      </div>
      <div className="proj-row-body">
        <div className="proj-row-name">{project.nombre_proyecto}</div>
        <div className="proj-row-meta">
          ID interno · {project.id}
          {hasGroup && (
            <>
              {" · "}
              <span style={{ color: "var(--done)" }}>Grupo WA: +{project.whatsapp_group_id}</span>
            </>
          )}
        </div>
      </div>
      <div className="proj-row-actions">
        {!confirming ? (
          <>
            <button
              className={"btn btn-sm proj-action-icon" + (hasGroup ? " proj-action-active" : "")}
              onClick={onEditGroup}
              title={hasGroup ? "Editar grupo de WhatsApp" : "Vincular grupo de WhatsApp"}
              aria-label="Grupo de WhatsApp"
            >
              <Icon name="whatsapp" style={{ width: 14, height: 14 }} />
            </button>
            <button
              className="btn btn-sm proj-action-icon"
              onClick={onEditName}
              title="Editar nombre"
              aria-label="Editar"
            >
              <Icon name="edit" style={{ width: 14, height: 14 }} />
            </button>
            <button
              className="btn btn-sm btn-danger proj-action-icon"
              onClick={() => setConfirming(true)}
              title="Eliminar proyecto"
              aria-label="Eliminar"
            >
              <Icon name="trash" style={{ width: 14, height: 14 }} />
            </button>
          </>
        ) : (
          <>
            <span className="proj-confirm-text">¿Seguro?</span>
            <button
              className="btn btn-sm btn-danger"
              onClick={doDelete}
              disabled={busy}
            >
              {busy ? "Eliminando…" : "Sí, eliminar"}
            </button>
            <button
              className="btn btn-sm"
              onClick={() => setConfirming(false)}
              disabled={busy}
            >
              Cancelar
            </button>
          </>
        )}
      </div>
    </div>
  );
}

function CreateProjectModal({ existing, onClose, onCreate }) {
  const [name, setName]   = React.useState("");
  const [group, setGroup] = React.useState("");
  const [busy, setBusy]   = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => { inputRef.current?.focus(); }, []);
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  const handleGroupChange = (e) => {
    const raw = (e.target.value || "").replace(/@g\.us$/i, "");
    setGroup(raw.replace(/\D+/g, "").slice(0, 25));
  };

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    const clean = name.trim();
    if (!clean) { setError("Ingresa un nombre"); return; }
    if (clean.length > 120) { setError("Máximo 120 caracteres"); return; }
    if (existing.some(p => p.nombre_proyecto.toLowerCase() === clean.toLowerCase())) {
      setError("Ya existe un proyecto con ese nombre");
      return;
    }
    if (group && (group.length < 10 || group.length > 25)) {
      setError("El ID del grupo no parece válido (ej. 120363283116106808)");
      return;
    }
    setBusy(true);
    try {
      await onCreate(clean, group);
      onClose();
    } catch (err) {
      setError(err?.message || "No se pudo crear");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="modal-back" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" onMouseDown={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="modal-h">
          <Icon name="folder" style={{ width: 18, height: 18 }} />
          <h2 style={{ margin: 0 }}>Nuevo proyecto</h2>
          <button className="modal-x" onClick={onClose} aria-label="Cerrar">
            <Icon name="x" />
          </button>
        </div>

        <form className="modal-body" onSubmit={submit} autoComplete="off">
          <div className="field" style={{ marginBottom: 12 }}>
            <label className="field-label" htmlFor="proj-name">Nombre del proyecto</label>
            <input
              ref={inputRef}
              id="proj-name"
              className="input"
              type="text"
              placeholder=""
              value={name}
              onChange={e => setName(e.target.value)}
              maxLength={120}
              required
            />
            <div className="field-hint">
              El cliente verá este nombre en la lista de proyectos del formulario.
            </div>
          </div>

          <div className="field" style={{ marginBottom: 8 }}>
            <label className="field-label" htmlFor="proj-group">
              ID del grupo de WhatsApp (opcional)
            </label>
            <input
              id="proj-group"
              className="input"
              type="text"
              inputMode="numeric"
              placeholder=""
              value={group}
              onChange={handleGroupChange}
              maxLength={25}
            />
            <div className="field-hint">
              Si lo configuras, los avisos de este proyecto se enviarán también al grupo.
              Pega solo el ID (sin <code>@g.us</code>). Puedes dejarlo vacío y configurarlo después.
            </div>
          </div>

          {error && <ProjErrorBox text={error} />}

          <div className="modal-foot" style={{ paddingLeft: 0, paddingRight: 0, marginTop: 16 }}>
            <div className="left" />
            <div className="right">
              <button type="button" className="btn btn-sm" onClick={onClose} disabled={busy}>
                Cancelar
              </button>
              <button type="submit" className="btn btn-sm btn-primary" disabled={busy}>
                <Icon name="check" style={{ width: 13, height: 13 }} />
                {busy ? "Creando…" : "Crear proyecto"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

function EditProjectModal({ project, existing, onClose, onUpdate }) {
  const [name, setName]   = React.useState(project.nombre_proyecto);
  const [busy, setBusy]   = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => { inputRef.current?.focus(); inputRef.current?.select(); }, []);
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    const clean = name.trim();
    if (!clean) { setError("Ingresa un nombre"); return; }
    if (clean.length > 120) { setError("Máximo 120 caracteres"); return; }
    if (clean.toLowerCase() === project.nombre_proyecto.toLowerCase()) { onClose(); return; }
    if (existing.some(p => p.id !== project.id && p.nombre_proyecto.toLowerCase() === clean.toLowerCase())) {
      setError("Ya existe un proyecto con ese nombre");
      return;
    }
    setBusy(true);
    try {
      await onUpdate(project.id, { nombre_proyecto: clean });
      onClose();
    } catch (err) {
      setError(err?.message || "No se pudo guardar");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="modal-back" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" onMouseDown={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="modal-h">
          <Icon name="edit" style={{ width: 18, height: 18 }} />
          <h2 style={{ margin: 0 }}>Editar proyecto</h2>
          <button className="modal-x" onClick={onClose} aria-label="Cerrar">
            <Icon name="x" />
          </button>
        </div>

        <form className="modal-body" onSubmit={submit} autoComplete="off">
          <div className="field" style={{ marginBottom: 8 }}>
            <label className="field-label" htmlFor="proj-rename">Nombre del proyecto</label>
            <input
              ref={inputRef}
              id="proj-rename"
              className="input"
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
              maxLength={120}
              required
            />
          </div>

          {error && <ProjErrorBox text={error} />}

          <div className="modal-foot" style={{ paddingLeft: 0, paddingRight: 0, marginTop: 16 }}>
            <div className="left" />
            <div className="right">
              <button type="button" className="btn btn-sm" onClick={onClose} disabled={busy}>
                Cancelar
              </button>
              <button type="submit" className="btn btn-sm btn-primary" disabled={busy}>
                <Icon name="check" style={{ width: 13, height: 13 }} />
                {busy ? "Guardando…" : "Guardar"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

function ProjectGroupModal({ project, onClose, onUpdateGroup }) {
  const [group, setGroup] = React.useState(project.whatsapp_group_id || "");
  const [busy, setBusy]   = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => { inputRef.current?.focus(); }, []);
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  const handleChange = (e) => {
    const raw = (e.target.value || "").replace(/@g\.us$/i, "");
    setGroup(raw.replace(/\D+/g, "").slice(0, 25));
    setError(null);
  };

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    if (group && (group.length < 10 || group.length > 25)) {
      setError("El ID del grupo no parece válido (ej. 120363283116106808)");
      return;
    }
    setBusy(true);
    try {
      await onUpdateGroup(project.id, group);
      onClose();
    } catch (err) {
      setError(err?.message || "No se pudo guardar");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="modal-back" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" onMouseDown={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="modal-h">
          <Icon name="whatsapp" style={{ width: 18, height: 18 }} />
          <h2 style={{ margin: 0 }}>Grupo de WhatsApp</h2>
          <button className="modal-x" onClick={onClose} aria-label="Cerrar">
            <Icon name="x" />
          </button>
        </div>

        <form className="modal-body" onSubmit={submit} autoComplete="off">
          <div style={{ color: "var(--ink-2)", fontSize: 13, marginBottom: 12 }}>
            Proyecto: <b style={{ color: "var(--ink-1)" }}>{project.nombre_proyecto}</b>
          </div>

          <div className="field" style={{ marginBottom: 8 }}>
            <label
              className="field-label"
              htmlFor="proj-group-edit"
              style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}
            >
              <span>ID del grupo de WhatsApp</span>
              {group && (
                <button
                  type="button"
                  onClick={() => { setGroup(""); inputRef.current?.focus(); }}
                  disabled={busy}
                  title="Vaciar el campo para escribir otro ID"
                  style={{
                    display: "inline-flex", alignItems: "center", gap: 4,
                    padding: "3px 8px",
                    background: "transparent",
                    border: "1px solid color-mix(in oklab, var(--p-high, #e11d48) 30%, transparent)",
                    color: "var(--p-high, #e11d48)",
                    borderRadius: 6,
                    fontSize: 11.5, fontWeight: 600,
                    cursor: "pointer",
                  }}
                >
                  <Icon name="trash" style={{ width: 11, height: 11 }} />
                  Eliminar
                </button>
              )}
            </label>
            <input
              ref={inputRef}
              id="proj-group-edit"
              className="input"
              type="text"
              inputMode="numeric"
              placeholder=""
              value={group}
              onChange={handleChange}
              maxLength={25}
            />
            <div className="field-hint">
              Cuando un cliente cree un ticket de este proyecto, el aviso del
              admin también se enviará a este grupo. Déjalo vacío para no usar grupo.
            </div>
          </div>

          {error && <ProjErrorBox text={error} />}

          <div className="modal-foot" style={{ paddingLeft: 0, paddingRight: 0, marginTop: 16 }}>
            <div className="left" />
            <div className="right">
              <button type="button" className="btn btn-sm" onClick={onClose} disabled={busy}>
                Cancelar
              </button>
              <button type="submit" className="btn btn-sm btn-primary" disabled={busy}>
                <Icon name="check" style={{ width: 13, height: 13 }} />
                {busy ? "Guardando…" : "Guardar"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

function ProjErrorBox({ text }) {
  return (
    <div
      style={{
        marginTop: 10,
        padding: "10px 12px",
        background: "var(--p-high-soft, rgba(225,29,72,.12))",
        border: "1px solid color-mix(in oklab, var(--p-high, #e11d48) 30%, transparent)",
        borderRadius: "var(--radius-sm)",
        color: "var(--p-high, #e11d48)",
        fontSize: 13,
        fontWeight: 600,
      }}
    >
      {text}
    </div>
  );
}

window.ProjectsView = ProjectsView;