"use client";

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

interface Perfil {
    id_perfil: number;
    perfil: string;
}

interface Usuario {
    id_usuario: number;
    nombre: string;
    apellido_paterno: string;
    apellido_materno: string;
    usuario: string;
    activo: number;
    descripcion: string;
    perfil: Perfil;
}

export default function UserPage() {

    const [usuarios, setUsuarios] = useState<Usuario[]>([]);
    const [perfiles, setPerfiles] = useState<Perfil[]>([]);

    const [nombre, setNombre] = useState("");
    const [apellidoPaterno, setApellidoPaterno] = useState("");
    const [apellidoMaterno, setApellidoMaterno] = useState("");
    const [usuario, setUsuario] = useState("");
    const [password, setPassword] = useState("");
    const [descripcion, setDescripcion] = useState("");
    const [idPerfil, setIdPerfil] = useState<number | "">("");
    const [activo, setActivo] = useState(true);

    const API = `${envConfig.apiUrl}/user`;
    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

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

    const obtenerPerfiles = async () => {
        try {
            const res = await axios.get(`${API}/perfil`, { headers });
            setPerfiles(res.data);
        } catch (error) {
            console.error("Error al obtener perfiles", error);
            Swal.fire({
                title: "Error al obtener perfiles!",
                icon: "error",
                draggable: true
            });
        }
    };

    useEffect(() => {
        obtenerUsuarios();
        obtenerPerfiles();
    }, []);

    const crearUsuario = async () => {

        if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {

            Swal.fire({
                title: "Todos los campos obligatorios deben llenarse.!",
                icon: "error",
                draggable: true
            });
            return;
        }

        try {
            await axios.post(
                `${API}/create`,
                {
                    nombre,
                    apellido_paterno: apellidoPaterno,
                    apellido_materno: apellidoMaterno,
                    usuario,
                    password,
                    descripcion,
                    activo: activo ? 1 : 0,
                    id_perfil: idPerfil,
                },
                { headers }
            );

            limpiarFormulario();
            obtenerUsuarios();
        } catch (error) {
            console.error("Error al crear usuario", error);
            Swal.fire({
                title: "Error al crear usuario.!",
                icon: "error",
                draggable: true
            });

        }
    };

    const limpiarFormulario = () => {
        setNombre("");
        setApellidoPaterno("");
        setApellidoMaterno("");
        setUsuario("");
        setPassword("");
        setDescripcion("");
        setIdPerfil("");
        setActivo(true);
    };

    const active = async (id_usuario: number) => {
        try {

            await axios.patch(
                `${API}/${id_usuario}/activo`,
                {},
                { headers }
            );

            setUsuarios((prev) =>
                prev.map((u) =>
                    u.id_usuario === id_usuario
                        ? { ...u, activo: u.activo === 1 ? 0 : 1 }
                        : u
                )
            );

        } catch (error) {
            console.error("Error al cambiar estado del usuario", error);

            Swal.fire({
                title: "Error al cambiar estado del usuario",
                icon: "error",
                draggable: true
            });
        }
    };

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

            <div style={{ marginBottom: "10px" }}>

                <input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />

                <input placeholder="Apellido Paterno" value={apellidoPaterno} onChange={(e) => setApellidoPaterno(e.target.value)} />

                <input placeholder="Apellido Materno" value={apellidoMaterno} onChange={(e) => setApellidoMaterno(e.target.value)} />

                <input placeholder="Usuario" value={usuario} onChange={(e) => setUsuario(e.target.value)} />

                <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />

                <input placeholder="Descripción" value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />

                <select value={idPerfil} onChange={(e) => setIdPerfil(Number(e.target.value))}>
                    <option value="">Seleccione Perfil</option>
                    {perfiles.map((p) => (
                        <option key={p.id_perfil} value={p.id_perfil}>
                            {p.perfil}
                        </option>
                    ))}

                </select>

                <label className="user">

                    Activo
                    <input
                        type="checkbox"
                        checked={activo}
                        onChange={(e) => setActivo(e.target.checked)}
                    />

                </label>

                <button className="button buttonSearch" onClick={crearUsuario}>
                    Crear Usuario
                </button>
            </div>

            <div style={{ overflow: "auto", maxHeight: "350px" }}>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Usuario</th>
                            <th>Perfil</th>
                            <th>Activo</th>

                        </tr>
                    </thead>
                    <tbody>
                        {usuarios.map((u) => (
                            <tr key={u.id_usuario}>
                                <td>{u.id_usuario}</td>
                                <td>{u.nombre} {u.apellido_paterno} </td>
                                <td>{u.usuario}</td>
                                <td>{u.perfil?.perfil}</td>
                                <td style={{ display: "flex", alignItems: "center", gap: "5px" }}>
                                    <span>{u.activo === 1 ? "Sí" : "No"}</span>

                                    <input
                                        type="checkbox"
                                        checked={u.activo === 1}
                                        style={{ height: "2rem" }}
                                        onChange={() => active(u.id_usuario)}
                                    />
                                </td>

                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

        </div>
    );
}