'use client';
import Button from '@/components/button';
import Table, { Header } from '@/components/table';
const Modal = dynamic(() => import('@/components/modal'), { ssr: false });
import { useGetApi } from '@/hooks/use-get-api';
import { Administrador } from '@/types/administradores';
import React, { useState } from 'react';
import axiosInstance from '@/utils/api-config';
import dynamic from 'next/dynamic';

export default function Page() {
  const { data, setData } = useGetApi<Administrador[]>('/administrador');

  // Estado del modal
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalMode, setModalMode] = useState<'add' | 'edit'>('add');
  const [selectedUser, setSelectedUser] = useState<Administrador | null>(null);

  // Estado del modal de eliminación
  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
  const [userToDelete, setUserToDelete] = useState<Administrador | null>(null);

  // Estado del formulario
  const [formData, setFormData] = useState({
    nombre_usuario: '',
    correo: '',
    password: '',
    id_tipo_user: '',
  });

  // Handlers del modal
  const handleOpenAddModal = () => {
    setModalMode('add');
    setSelectedUser(null);
    setFormData({
      nombre_usuario: '',
      correo: '',
      password: '',
      id_tipo_user: '',
    });
    setIsModalVisible(true);
  };

  const handleOpenEditModal = (user: Administrador) => {
    setModalMode('edit');
    setSelectedUser(user);
    setFormData({
      nombre_usuario: user.nombre_usuario,
      correo: user.correo,
      password: '',
      id_tipo_user: user.tipoUser.id.toString(),
    });
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
    setSelectedUser(null);
  };

  // Handlers del modal de eliminación
  const handleOpenDeleteModal = (user: Administrador) => {
    setUserToDelete(user);
    setIsDeleteModalVisible(true);
  };

  const handleCloseDeleteModal = () => {
    setIsDeleteModalVisible(false);
    setUserToDelete(null);
  };

  const handleConfirmDelete = async () => {
    // Aquí iría la lógica para eliminar el usuario
    try {
      if (userToDelete) {
        // Lógica para eliminar el usuario
        const response = await axiosInstance.delete(
          `/administrador/${userToDelete.id_administrador}`
        );

        console.log('Usuario eliminado:', response.data);
        // Actualizar la lista de usuarios en el estado
        if (data) {
          const updatedData = data.filter(
            (user) => user.id_administrador !== userToDelete.id_administrador
          );
          setData(updatedData);
        }
      }
    } catch (error) {
      console.error('Error al eliminar el usuario:', error);
    }
    handleCloseDeleteModal();
  };

  // Handler para envío del formulario
  const handleSubmitForm = async () => {
    try {
      if (modalMode === 'add') {
        // Crear nuevo usuario
        const payload = {
          nombre_usuario: formData.nombre_usuario,
          correo: formData.correo,
          password: formData.password,
          id_tipo_user: parseInt(formData.id_tipo_user),
        };

        const response = await axiosInstance.post('/administrador', payload);
        console.log('Usuario creado:', response.data);

        // Actualizar la lista de usuarios
        if (data) {
          setData([
            ...data,
            {
              correo: formData.correo,
              id_administrador: response.data.id_administrador,
              nombre_usuario: formData.nombre_usuario,
              tipoUser: {
                id: parseInt(formData.id_tipo_user),
                tipo: formData.id_tipo_user === '1' ? 'Administrador' : 'Staff',
              },
            },
          ]);
        }
      } else if (modalMode === 'edit' && selectedUser) {
        // Editar usuario existente
        const payload = {
          nombre_usuario: formData.nombre_usuario,
          correo: formData.correo,
          id_tipo_user: parseInt(formData.id_tipo_user),
        };

        const response = await axiosInstance.put(
          `/administrador/${selectedUser.id_administrador}`,
          payload
        );
        console.log('Usuario actualizado:', response.data);

        // Actualizar la lista de usuarios
        if (data) {
          const updatedData = data.map((user) =>
            user.id_administrador === selectedUser.id_administrador
              ? { ...user, ...response.data }
              : user
          );
          setData(updatedData);
        }
      }

      handleCloseModal();
    } catch (error) {
      console.error('Error al guardar el usuario:', error);
    }
  };

  const headers: Header<Administrador>[] = [
    { key: 'id_administrador', label: 'ID' },
    { key: 'nombre_usuario', label: 'Nombre de Usuario' },
    { key: 'correo', label: 'Correo' },
    {
      key: 'tipoUser',
      render: (_, row) => row.tipoUser.tipo,
      label: 'Tipo de Usuario',
    },
    {
      key: 'tipoUser',
      render: (_, row) => (
        <div className="d-flex gap-2">
          <Button className="w-100" onClick={() => handleOpenEditModal(row)}>
            Editar
          </Button>
          <Button
            variant="danger"
            className="w-100"
            onClick={() => handleOpenDeleteModal(row)}
          >
            Eliminar
          </Button>
        </div>
      ),
      label: 'Acciones',
    },
  ];

  return (
    <div>
      <div className="d-flex justify-content-between align-items-center my-3">
        <h1>Administradores</h1>
        <Button variant="primary" onClick={handleOpenAddModal}>
          Agregar Administrador
        </Button>
      </div>
      {data && <Table headers={headers} data={data} />}

      <Modal
        isVisible={isModalVisible}
        onClose={handleCloseModal}
        size="lg"
        closeButton={true}
      >
        <div className="p-3">
          <h3 className="mb-4">
            {modalMode === 'add'
              ? 'Agregar Nuevo Administrador'
              : 'Editar Administrador'}
          </h3>

          {modalMode === 'edit' && selectedUser && (
            <div className="mb-3">
              <p>
                <strong>ID:</strong> {selectedUser.id_administrador}
              </p>
              <p>
                <strong>Usuario actual:</strong> {selectedUser.nombre_usuario}
              </p>
              <p>
                <strong>Correo actual:</strong> {selectedUser.correo}
              </p>
              <p>
                <strong>Tipo:</strong> {selectedUser.tipoUser.tipo}
              </p>
            </div>
          )}

          <div className="mb-3">
            <label htmlFor="nombre_usuario" className="form-label">
              Nombre de Usuario
            </label>
            <input
              type="text"
              className="form-control"
              id="nombre_usuario"
              value={formData.nombre_usuario}
              onChange={(e) =>
                setFormData((prev) => ({
                  ...prev,
                  nombre_usuario: e.target.value,
                }))
              }
              placeholder="Ingrese el nombre de usuario"
            />
          </div>

          <div className="mb-3">
            <label htmlFor="correo" className="form-label">
              Correo Electrónico
            </label>
            <input
              type="email"
              className="form-control"
              id="correo"
              value={formData.correo}
              onChange={(e) =>
                setFormData((prev) => ({
                  ...prev,
                  correo: e.target.value,
                }))
              }
              placeholder="Ingrese el correo electrónico"
            />
          </div>

          {modalMode === 'add' && (
            <div className="mb-3">
              <label htmlFor="password" className="form-label">
                Contraseña
              </label>
              <input
                type="password"
                className="form-control"
                id="password"
                value={formData.password}
                onChange={(e) =>
                  setFormData((prev) => ({
                    ...prev,
                    password: e.target.value,
                  }))
                }
                placeholder="Ingrese la contraseña"
              />
            </div>
          )}

          <div className="mb-4">
            <label htmlFor="tipoUser" className="form-label">
              Tipo de Usuario
            </label>
            <select
              className="form-select"
              id="tipoUser"
              value={formData.id_tipo_user}
              onChange={(e) =>
                setFormData((prev) => ({
                  ...prev,
                  id_tipo_user: e.target.value,
                }))
              }
            >
              <option value="">Seleccione un tipo</option>
              <option value="1">Administrador</option>
              <option value="2">Staff</option>
            </select>
          </div>

          <div className="d-flex gap-2 justify-content-end">
            <Button variant="secondary" onClick={handleCloseModal}>
              Cancelar
            </Button>
            <Button variant="primary" onClick={handleSubmitForm}>
              {modalMode === 'add' ? 'Crear Administrador' : 'Guardar Cambios'}
            </Button>
          </div>
        </div>
      </Modal>

      {/* Modal de confirmación de eliminación */}
      <Modal
        isVisible={isDeleteModalVisible}
        onClose={handleCloseDeleteModal}
        size="md"
        closeButton={true}
      >
        <div className="p-4 text-center">
          <div className="mb-4">
            <i className="bi bi-exclamation-triangle text-warning display-1"></i>
          </div>

          <h4 className="mb-3">¿Está seguro de eliminar al usuario?</h4>

          {userToDelete && (
            <div className="mb-4">
              <p className="fs-5 fw-bold text-danger">
                {userToDelete.nombre_usuario}
              </p>
              <p className="text-muted">Esta acción no se puede deshacer</p>
            </div>
          )}

          <div className="d-flex gap-3 justify-content-center">
            <Button variant="secondary" onClick={handleCloseDeleteModal}>
              Cancelar
            </Button>
            <Button variant="danger" onClick={handleConfirmDelete}>
              Sí, Eliminar
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}
