front-AT/app/(private)/Periodo/page.tsx

"use client";

import { useState, useEffect } from "react";
import { envConfig } from "@/app/lib/config";
import axios from "axios";
import Cookies from "js-cookie";

interface Periodo {
  id_periodo: number;
  semestre: string;
  fecha_inicio_servicio: string;
  fecha_fin_servicio: string;
  activo: {
    type: string;
    data: number[];
  };
}
export default function PeriodoPage() {

  const [periodos, setPeriodos] = useState<Periodo[]>([]);
  const [semestre, setSemestre] = useState("");
  const [fechaInicio, setFechaInicio] = useState("");
  const [fechaFin, setFechaFin] = useState("");
  const [modoEdicion, setModoEdicion] = useState(false);
  const [idEditar, setIdEditar] = useState<number | null>(null);

  const API = `${envConfig.apiUrl}/periodo`;

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };

  const obtenerPeriodos = async () => {
    try {
      const res = await axios.get(API, { headers });
      setPeriodos(res.data);
    } catch (error) {
      console.error("Error al obtener periodos", error);
    }
  };

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

  const handleSemestreChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const valor = e.target.value;
   
    if (/^\d{0,6}$/.test(valor)) {
      setSemestre(valor);
    }
  };

  const crearPeriodo = async () => {
    if (semestre.length !== 6) {
      alert("El semestre debe tener exactamente 6 dígitos.");
      return;
    }

    try {
      await axios.post(
        API,
        {
          semestre,
          fecha_inicio_servicio: fechaInicio,
          fecha_fin_servicio: fechaFin,
          activo: true,
        },
        { headers }
      );

      limpiarFormulario();
      obtenerPeriodos();
    } catch (error) {
      console.error("Error al crear periodo", error);
    }
  };

  const cargarPeriodo = (p: Periodo) => {
    setModoEdicion(true);
    setIdEditar(p.id_periodo);
    setSemestre(p.semestre);
    setFechaInicio(p.fecha_inicio_servicio);
    setFechaFin(p.fecha_fin_servicio);
  };

 
  const modificarPeriodo = async () => {
    if (semestre.length !== 6) {
      alert("El semestre debe tener exactamente 6 dígitos.");
      return;
    }

    try {
      await axios.put(
        `${API}/${idEditar}`,
        {
          semestre,
          fecha_inicio_servicio: fechaInicio,
          fecha_fin_servicio: fechaFin,
        },
        { headers }
      );

      limpiarFormulario();
      obtenerPeriodos();
    } catch (error) {
      console.error("Error al modificar periodo", error);
    }
  };

  const limpiarFormulario = () => {
    setSemestre("");
    setFechaInicio("");
    setFechaFin("");
    setModoEdicion(false);
    setIdEditar(null);
  };

  return (
    <div>
      <h1 style={{ color: "rgb(3, 1, 72)" }}>PERIODO ESCOLAR</h1>

      <div style={{ marginBottom: "10px" }}>
        <input
          type="text"
          placeholder="Periodo (6 dígitos)"
          value={semestre}
          maxLength={6}
          onChange={handleSemestreChange}
        />

        <label style={{ color: "rgb(3, 1, 72)" }}>
          Elige la fecha de inicio de Periodo
        </label>
        <input
          type="date"
          value={fechaInicio}
          onChange={(e) => setFechaInicio(e.target.value)}
        />

        <label style={{ color: "rgb(3, 1, 72)" }}>
          Elige la fecha de fin de Periodo
        </label>
        <input
          type="date"
          value={fechaFin}
          onChange={(e) => setFechaFin(e.target.value)}
        />

        {modoEdicion ? (
          <>
            <button
              className="button buttonSearch"
              onClick={modificarPeriodo}
            >
              Guardar Cambios
            </button>

            <button
              className="button buttonCancel"
              onClick={limpiarFormulario}
            >
              Cancelar
            </button>
          </>
        ) : (
          <button
            className="button buttonSearch"
            onClick={crearPeriodo}
          >
            Crear Periodo
          </button>
        )}
      </div>

      <div style={{ overflow: "auto", maxHeight: "350px" }}>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>PERIODO</th>
              <th>Inicio</th>
              <th>Fin</th>
              <th>Activo</th>
              <th>Acción</th>
            </tr>
          </thead>
          <tbody>
            {periodos.map((p) => (
              <tr key={p.id_periodo}>
                <td>{p.id_periodo}</td>
                <td>{p.semestre}</td>
                <td>{p.fecha_inicio_servicio}</td>
                <td>{p.fecha_fin_servicio}</td>
               <td>{p.activo.data[0] === 1 ? "Sí" : "No"}</td>
                <td>
                  <button
                    className="button buttonSearch"
                    onClick={() => cargarPeriodo(p)}
                  >
                    Modificar
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}