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

import { RichTextEditor } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import '@mantine/tiptap/styles.css';

import TurndownService from 'turndown';
import { marked } from 'marked';

import './Editor_biblioteca.css';

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

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

const turndownService = new TurndownService({
  headingStyle: 'atx',
  bulletListMarker: '-',
  codeBlockStyle: 'fenced',
  emDelimiter: '*',
  strongDelimiter: '**',
});

export function Biblioteca() {
  const [bibliotecas, setBibliotecas] = useState<Biblioteca[]>([]);
  const [bibliotecaSeleccionada, setBibliotecaSeleccionada] = useState<Biblioteca | null>(null);
  const [notaSeleccionada, setNotaSeleccionada] = useState<Nota | null>(null);
  const [modalNuevaBiblio, setModalNuevaBiblio] = useState(false);
  const [nombreBiblio, setNombreBiblio] = useState('');
  const [descripcionBiblio, setDescripcionBiblio] = useState('');
  const [loadingNuevaBiblio, setLoadingNuevaBiblio] = useState(false);


  const editor = useEditor({
    extensions: [StarterKit],
    content: '',
onUpdate: ({ editor }) => {
  const html = editor.getHTML();
  const markdown = turndownService.turndown(html);
  setNotaSeleccionada((prev) =>
    prev ? { ...prev, texto: markdown } : null
  );
}

});

  useEffect(() => {
    console.log('🟡 editor:', editor);
    console.log('🟠 isDestroyed:', editor?.isDestroyed);
    console.log('🟢 isEditable:', editor?.isEditable);
  }, [editor]);

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

  useEffect(() => {
    if (!editor || !notaSeleccionada || editor.isDestroyed) return;

    (async () => {
      try {
        const markdown = notaSeleccionada.texto;
        const html = await marked.parse(markdown);
        editor.commands.setContent(html);
        setTimeout(() => editor.commands.focus(), 100);
      } catch (err) {
        console.error('❌ Error al hacer setContent:', err);
      }
    })();
  }, [notaSeleccionada?.id, editor]);

  const fetchBibliotecas = async () => {
    try {
      const res = await axios.get('/api/v1/text_manager/list');
      if (!Array.isArray(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);
    try {
      await axios.post('/api/v1/text_manager/biblioteca', {
        nombre_biblioteca: nombreBiblio,
        descripcion: descripcionBiblio,
      });
      setNombreBiblio('');
      setDescripcionBiblio('');
      setModalNuevaBiblio(false);
      await fetchBibliotecas();
    } catch (error) {
      console.error('❌ Error al crear biblioteca:', error);
    } finally {
      setLoadingNuevaBiblio(false);
    }
  };

  const guardarEdicionNota = async () => {
    if (!notaSeleccionada || !bibliotecaSeleccionada) return;
    try {
      await axios.put(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaSeleccionada.id}`, {
        titulo: notaSeleccionada.titulo,
        texto: notaSeleccionada.texto,
        tags: [],
        conexiones: [],
        resumen: ""
      });
      await fetchBibliotecas();
    } catch (error) {
      console.error("Error al actualizar nota:", error);
    }
  };

  const eliminarNota = async (notaId: string) => {
    if (!bibliotecaSeleccionada) return;
    try {
      await axios.delete(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}/${notaId}`);
      await fetchBibliotecas();
      setNotaSeleccionada(null);
    } catch (error) {
      console.error("Error al eliminar nota:", error);
    }
  };

  return (
    <AppShellWithMenu>
      <Box display="flex" h="100%" style={{ overflow: 'hidden' }}>
        <Box w={240} p="md">
          <ScrollArea h="100%">
            <Stack gap="md">
              <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);
                    setNotaSeleccionada(null);
                  }}
                >
                  {biblio.nombre}
                </Button>
              ))}
            </Stack>
          </ScrollArea>
        </Box>

        <Box w={240} p="md">
          <ScrollArea h="100%">
            <Stack gap="md">
              <Title order={4}>Notas</Title>
              <Button
                color="green"
                variant="outline"
                fullWidth
                onClick={async () => {
                  if (!bibliotecaSeleccionada) return;
                  try {
                    const res = await axios.post(`/api/v1/text_manager/nota/${bibliotecaSeleccionada.id}`, {
                      titulo: 'Nueva nota',
                      texto: '',
                      tags: [],
                      conexiones: [],
                      resumen: ''
                    });
                    const nuevaNota: Nota = res.data;
                    await fetchBibliotecas();
                    setNotaSeleccionada(nuevaNota);
                  } catch (error) {
                    console.error('Error al crear nota:', error);
                  }
                }}
              >
                ➕ Nueva nota
              </Button>
              {bibliotecaSeleccionada?.notas.map((nota) => (
                <Button
                  key={nota.id}
                  fullWidth
                  variant={notaSeleccionada?.id === nota.id ? 'filled' : 'light'}
                  color="gray"
                  onClick={() => setNotaSeleccionada(nota)}
                >
                  {nota.titulo}
                </Button>
              ))}
            </Stack>
          </ScrollArea>
        </Box>

        <Box p="md" style={{ flex: 1, overflow: 'hidden', minWidth: 0 }}>
          {notaSeleccionada ? (
            <Stack gap="sm">
              <TextInput
                label="Título"
                size="lg"
                styles={{ input: { fontSize: 20, fontWeight: 600 } }}
                value={notaSeleccionada.titulo}
                onChange={(e) =>
                  setNotaSeleccionada((prev) => prev ? { ...prev, titulo: e.currentTarget.value } : null)
                }
              />
              {editor && !editor.isDestroyed && (
                <RichTextEditor
                  editor={editor}
                  miw={0}
                  style={{ fontSize: 14, minHeight: 200 }}
                  classNames={{ content: 'tiptap' }}
                >
                  <RichTextEditor.Toolbar sticky stickyOffset={0}>
                    <RichTextEditor.ControlsGroup>
                      <RichTextEditor.Bold />
                      <RichTextEditor.Italic />
                      <RichTextEditor.Strikethrough />
                      <RichTextEditor.ClearFormatting />
                      <RichTextEditor.H1 />
                      <RichTextEditor.H2 />
                      <RichTextEditor.Blockquote />
                      <RichTextEditor.CodeBlock />
                    </RichTextEditor.ControlsGroup>
                  </RichTextEditor.Toolbar>
                  {/* tabIndex removido */}
                  <RichTextEditor.Content className="tiptap" />
                </RichTextEditor>
              )}
              <Group mt="sm">
                <Button color="blue" onClick={guardarEdicionNota}>💾 Guardar</Button>
                <Button color="red" onClick={() => eliminarNota(notaSeleccionada.id)}>🗑️ Eliminar</Button>
              </Group>
            </Stack>
          ) : (
            <Text>Selecciona una nota para editar</Text>
          )}
        </Box>
      </Box>

      <Modal opened={modalNuevaBiblio} onClose={() => setModalNuevaBiblio(false)} title="Crear nueva biblioteca">
        <Stack gap="md">
          <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>
  );
}
