helpdesk/frontend/src/app/(app)/settings/departments/page.tsx

"use client";

import { useEffect, useState, useCallback } from "react";
import {
  getGroups,
  createGroup,
  updateGroup,
  deleteGroup,
  type Group,
} from "@/lib/api";
import Modal from "@/components/Modal";

export default function DepartmentsPage() {
  const [groups, setGroups] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<Group | null>(null);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [isActive, setIsActive] = useState(true);
  const [saving, setSaving] = useState(false);
  const [modalError, setModalError] = useState("");

  const fetchGroups = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      setGroups(await getGroups());
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al cargar");
      setGroups([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchGroups();
  }, [fetchGroups]);

  const openCreate = () => {
    setEditing(null);
    setName("");
    setDescription("");
    setIsActive(true);
    setModalError("");
    setShowModal(true);
  };

  const openEdit = (g: Group) => {
    setEditing(g);
    setName(g.name);
    setDescription(g.description || "");
    setIsActive(g.isActive);
    setModalError("");
    setShowModal(true);
  };

  const handleSubmit = async () => {
    if (!name.trim()) {
      setModalError("El nombre es requerido");
      return;
    }
    setSaving(true);
    setModalError("");
    try {
      if (editing) {
        await updateGroup(editing.id, {
          name: name.trim(),
          description: description.trim() || undefined,
          isActive,
        });
      } else {
        await createGroup({ name: name.trim(), description: description.trim() || undefined });
      }
      setShowModal(false);
      fetchGroups();
    } catch (err) {
      setModalError(err instanceof Error ? err.message : "Error al guardar");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (g: Group) => {
    if (!confirm(`¿Eliminar el departamento "${g.name}"?`)) return;
    setError("");
    try {
      await deleteGroup(g.id);
      fetchGroups();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al eliminar");
    }
  };

  return (
    <div>
      <div className="page-header">
        <h1>Departamentos</h1>
        <button className="btn btn-primary" onClick={openCreate}>
          <i className="bi bi-plus-lg me-2"></i>
          Nuevo Departamento
        </button>
      </div>

      {error && (
        <div className="alert alert-danger" role="alert">
          <i className="bi bi-exclamation-circle me-2"></i>
          {error}
        </div>
      )}

      <div className="card">
        <div className="card-body p-0">
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Descripción</th>
                  <th>Estado</th>
                  <th className="text-end">Acciones</th>
                </tr>
              </thead>
              <tbody>
                {loading ? (
                  <tr>
                    <td colSpan={4} className="text-center py-4">
                      <div className="spinner-border spinner-border-sm text-primary" role="status"></div>
                    </td>
                  </tr>
                ) : groups.length === 0 ? (
                  <tr>
                    <td colSpan={4} className="empty-state">
                      <i className="bi bi-diagram-3 d-block"></i>
                      <h5>Sin departamentos</h5>
                      <p className="text-muted mb-0">Crea el primero para organizar los tickets</p>
                    </td>
                  </tr>
                ) : (
                  groups.map((g) => (
                    <tr key={g.id}>
                      <td className="fw-semibold">{g.name}</td>
                      <td className="text-muted">{g.description || "—"}</td>
                      <td>
                        {g.isActive ? (
                          <span className="badge bg-success">Activo</span>
                        ) : (
                          <span className="badge bg-secondary">Inactivo</span>
                        )}
                      </td>
                      <td className="text-end">
                        <button
                          className="btn btn-sm btn-outline-primary me-2"
                          onClick={() => openEdit(g)}
                          title="Editar"
                        >
                          <i className="bi bi-pencil"></i>
                        </button>
                        <button
                          className="btn btn-sm btn-outline-danger"
                          onClick={() => handleDelete(g)}
                          title="Eliminar"
                        >
                          <i className="bi bi-trash"></i>
                        </button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <Modal
        show={showModal}
        title={editing ? "Editar Departamento" : "Nuevo Departamento"}
        onClose={() => setShowModal(false)}
        onSubmit={handleSubmit}
        submitting={saving}
      >
        {modalError && (
          <div className="alert alert-danger py-2" role="alert">
            {modalError}
          </div>
        )}
        <div className="mb-3">
          <label className="form-label">Nombre *</label>
          <input
            type="text"
            className="form-control"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="ej: Soporte Nivel 1"
            autoFocus
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Descripción</label>
          <textarea
            className="form-control"
            rows={2}
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </div>
        {editing && (
          <div className="form-check form-switch">
            <input
              className="form-check-input"
              type="checkbox"
              role="switch"
              checked={isActive}
              onChange={(e) => setIsActive(e.target.checked)}
              id="deptActive"
            />
            <label className="form-check-label" htmlFor="deptActive">
              Activo
            </label>
          </div>
        )}
      </Modal>
    </div>
  );
}