import { useEffect, useState } from 'react';
import {
  AppShell,
  Stack,
  Card,
  Text,
  Title,
  ScrollArea,
  Group,
  Button,
  TextInput,
  Modal,
  Box,
  Loader,
  Textarea
} from '@mantine/core';
import { AppShellWithMenu } from '../components/Appshell/Appshell';
import axios from 'axios';

type Nota = {
  id: string;
  titulo: string;
  texto: string;
};

type Biblioteca = {
  id: string;
  nombre: string;
  descripcion: string;
  notas: Nota[];
};

export function Biblioteca() {
  const [bibliotecas, setBibliotecas] = useState<Biblioteca[]>([]);
  const [bibliotecaSeleccionada, setBibliotecaSeleccionada] = useState<Biblioteca | null>(null);
  const [modalAbierto, setModalAbierto] = useState(false);
  const [tituloNota, setTituloNota] = useState('');
  const [contenidoNota, setContenidoNota] = useState('');
  const [loadingNotas, setLoadingNotas] = useState(false);
  const [notaEnEdicion, setNotaEnEdicion] = useState<Nota | null>(null);
  const [modalEditarAbierto, setModalEditarAbierto] = useState(false);
  const [modalNuevaBiblio, setModalNuevaBiblio] = useState(false);
  const [nombreBiblio, setNombreBiblio] = useState('');
  const [descripcionBiblio, setDescripcionBiblio] = useState('');
  const [loadingNuevaBiblio, setLoadingNuevaBiblio] = useState(false);


  const fetchBibliotecas = async () => {
    try {
      const res = await axios.get('/api/v1/text_manager/list');
      console.log('📦 Respuesta del backend:', res.data);

      if (!Array.isArray(res.data)) {
        console.error('❌ La respuesta no es un array:', res.data);
        return;
      }

      const bibliotecasConNotas = await Promise.all(
        res.data.map(async (biblio: Omit<Biblioteca, 'notas'>) => {
          const notas = await axios.get(`/api/v1/text_manager/nota/list/${biblio.id}`);
          return { ...biblio, notas: notas.data as Nota[] };
        })
      );
      setBibliotecas(bibliotecasConNotas);
      setBibliotecaSeleccionada(bibliotecasConNotas[0] || null);
    } catch (error) {
      console.error('Error al cargar bibliotecas:', error);
    }
  };

const crearBiblioteca = async () => {
  setLoadingNuevaBiblio(true); // 🔄 Activa el loader en el botón
  try {
    // Llamada a backend
    await axios.post('/api/v1/text_manager/biblioteca', {
      nombre_biblioteca: nombreBiblio,
      descripcion: descripcionBiblio,
    });

    // 🧼 Limpia formularios
    setNombreBiblio('');
    setDescripcionBiblio('');

    // 🔒 Cierra el modal
    setModalNuevaBiblio(false);

    // 🔄 Refresca la lista de bibliotecas
    await fetchBibliotecas();
  } catch (error) {
    console.error('❌ Error al crear biblioteca:', error);
  } finally {
    setLoadingNuevaBiblio(false); // ✅ Apaga el loader
  }
};

  const agregarNota = async () => {
    if (!bibliotecaSeleccionada) return;

    try {
      await axios.post(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}`, {
        titulo: tituloNota,
        texto: contenidoNota,
        tags: [],
        conexiones: [],
        resumen: '',
      });

      setLoadingNotas(true);
      const nuevasNotas = await axios.get(`/api/v1/text_manager/nota/list/${bibliotecaSeleccionada.id}`);
      const nuevasBibliotecas = bibliotecas.map((b) =>
        b.id === bibliotecaSeleccionada.id ? { ...b, notas: nuevasNotas.data as Nota[] } : b
      );
      setBibliotecas(nuevasBibliotecas);
      setBibliotecaSeleccionada(nuevasBibliotecas.find((b) => b.id === bibliotecaSeleccionada.id) || null);
      setTituloNota('');
      setContenidoNota('');
      setModalAbierto(false);
    } catch (error) {
      console.error('Error al agregar nota:', error);
    } finally {
      setLoadingNotas(false);
    }
  };

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

  // Eliminar nota
  const eliminarNota = async (notaId: string) => {
    if (!bibliotecaSeleccionada) return;
    try {
      await axios.delete(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaId}`);

      // Solo actualiza la biblioteca actual
      const nuevasNotas = await axios.get(`/api/v1/text_manager/nota/list/${bibliotecaSeleccionada.id}`);
      const nuevasBibliotecas = bibliotecas.map((b) =>
        b.id === bibliotecaSeleccionada.id ? { ...b, notas: nuevasNotas.data as Nota[] } : b
      );
      setBibliotecas(nuevasBibliotecas);
      setBibliotecaSeleccionada(nuevasBibliotecas.find(b => b.id === bibliotecaSeleccionada.id) || null);
    } catch (error) {
      console.error("Error al eliminar nota:", error);
    }
  };

  // Editar nota
  const abrirModalEditar = (nota: Nota) => {
    setNotaEnEdicion(nota);
    setModalEditarAbierto(true);
  };

  // Guardar cambios de edición
  const guardarEdicionNota = async () => {
    if (!notaEnEdicion || !bibliotecaSeleccionada) return;
    try {
      await axios.put(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaEnEdicion.id}`, {
        titulo: notaEnEdicion.titulo,
        texto: notaEnEdicion.texto,
        tags: [],
        conexiones: [],
        resumen: ""
      });
      setModalEditarAbierto(false);
      setNotaEnEdicion(null);
      await fetchBibliotecas();
    } catch (error) {
      console.error("Error al actualizar nota:", error);
    }
  };



  return (
    <AppShellWithMenu>
      <Box display="flex" h="100%">
        <Box w={240} p="md">
          <ScrollArea h="100%">
            <Stack>
              <Button color="teal" onClick={fetchBibliotecas}>🔄 Recuperar bibliotecas</Button>
              <Button color="grape" variant="outline" onClick={() => setModalNuevaBiblio(true)}>➕ Nueva biblioteca</Button>


              {bibliotecas.map((biblio) => (
                <Button
                  key={biblio.id}
                  size="xs"
                  fullWidth
                  variant={biblio.id === bibliotecaSeleccionada?.id ? 'filled' : 'light'}
                  color="blue"
                  onClick={() => setBibliotecaSeleccionada(biblio)}
                >
                  {biblio.nombre}
                </Button>
              ))}
            </Stack>
          </ScrollArea>
        </Box>

        <Box p="md" style={{ flex: 1 }}>
          {bibliotecaSeleccionada ? (
            <Stack>
              <Title order={2}>{bibliotecaSeleccionada.nombre}</Title>
              <Group>
                <Button onClick={() => setModalAbierto(true)}>Agregar nota</Button>
              </Group>
              <Group>
                {loadingNotas ? (
                  <Loader />
                ) : (
                  bibliotecaSeleccionada.notas.map((nota) => (

                    // Cards de notas

                  <Card
                    key={nota.id}
                    shadow="sm"
                    padding="lg"
                    radius="md"
                    withBorder
                    style={{
                      width: 300,
                      height: 250, // Altura fija para asegurar la separación
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'space-between',
                    }}
                  >
                    <div>
                      <Title order={4} style={{ marginBottom: 10 }}>{nota.titulo}</Title>
                      <Text>{nota.texto}</Text>
                    </div>

                    <Box mt="md" style={{ display: 'flex', justifyContent: 'flex-end' }}>
                      <Button
                        size="xs"
                        variant="light"
                        color="blue"
                        onClick={() => abrirModalEditar(nota)}
                      >
                        Editar
                      </Button>
                    </Box>
                  </Card>

                    // Fin de notas en cards

                  ))
                )}
              </Group>
            </Stack>
          ) : (
            <Stack>
              <Text>Selecciona una biblioteca</Text>

            </Stack>
          )}
        </Box>
      </Box>

      {/* Modal para agregar */}
      <Modal opened={modalAbierto} onClose={() => setModalAbierto(false)} title="Agregar nueva nota">
        <Stack>
          <TextInput
            label="Título"
            value={tituloNota}
            onChange={(event) => setTituloNota(event.currentTarget.value)}
          />
          <Textarea
            label="Contenido"
            minRows={6}
            autosize
            value={contenidoNota}
            onChange={(event) => setContenidoNota(event.currentTarget.value)}
          />
          <Button onClick={agregarNota}>Guardar</Button>
        </Stack>
      </Modal>

      {/* Modal para editar */}
      <Modal opened={modalEditarAbierto} onClose={() => setModalEditarAbierto(false)} title="Editar nota">
        <Stack>
          <TextInput
            label="Título"
            value={notaEnEdicion?.titulo || ""}
            onChange={(e) =>
              setNotaEnEdicion((prev) => (prev ? { ...prev, titulo: e.currentTarget.value } : null))
            }
          />
          <Textarea
            label="Contenido"
            minRows={6}
            autosize
            value={notaEnEdicion?.texto || ""}
            onChange={(e) =>
              setNotaEnEdicion((prev) => (prev ? { ...prev, texto: e.currentTarget.value } : null))
            }
          />
          <Group grow>
            <Button color="blue" onClick={guardarEdicionNota}>
              💾 Guardar cambios
            </Button>
            <Button
              color="red"
              onClick={async () => {
                if (!notaEnEdicion || !bibliotecaSeleccionada) return;
                await eliminarNota(notaEnEdicion.id);
                setModalEditarAbierto(false);
                setNotaEnEdicion(null);
              }}
            >
              🗑️ Eliminar nota
            </Button>
          </Group>
        </Stack>
      </Modal>

      {/* Modal para crear una biblioteca */}
      <Modal
        opened={modalNuevaBiblio}
        onClose={() => setModalNuevaBiblio(false)}
        title="Crear nueva biblioteca"
      >
        <Stack>
          <TextInput
            label="Nombre"
            value={nombreBiblio}
            onChange={(e) => setNombreBiblio(e.currentTarget.value)}
            disabled={loadingNuevaBiblio}
          />
          <TextInput
            label="Descripción"
            value={descripcionBiblio}
            onChange={(e) => setDescripcionBiblio(e.currentTarget.value)}
            disabled={loadingNuevaBiblio}
          />
          <Button onClick={crearBiblioteca} loading={loadingNuevaBiblio}>
            Crear
          </Button>
        </Stack>
      </Modal>


    </AppShellWithMenu>
  );

}
