import { useState, useEffect } from 'react';
import {
  TextInput,
  Textarea,
  Button,
  Box,
  Center,
  Stack,
  Badge,
  Group,
} from '@mantine/core';
import { MetodoSelect } from './MetodoSelect';
import { useMantineTheme } from '@mantine/core';

export function LlamadorAPI() {
  const [direccion, setDireccion] = useState('http://localhost:8000/api/v1/ping/');
  const [metodo, setMetodo] = useState('GET');
  const [contenido, setContenido] = useState('');
  const [respuesta, setRespuesta] = useState('');
  const [codigoRespuesta, setCodigoRespuesta] = useState<number | null>(null);

  const colorCodigo = (status: number): string => {
    if (status >= 200 && status < 300) return 'green';
    if (status >= 300 && status < 400) return 'yellow';
    if (status >= 400 && status < 500) return 'orange';
    return 'red';
  };

  const theme = useMantineTheme();
  

  const llamarAPI = async () => {
    try {
      const options: RequestInit = {
        method: metodo,
        mode: 'cors',
        headers: {},
      };

      if (metodo !== 'GET') {
        options.headers = {
          'Content-Type': 'application/json',
        };
        try {
          JSON.parse(contenido);
          options.body = contenido;
        } catch (err) {
          setRespuesta('Error: El contenido no es un JSON válido');
          setCodigoRespuesta(null);
          return;
        }
      }

      const res = await fetch(direccion, options);
      setCodigoRespuesta(res.status);

      const contentType = res.headers.get('content-type');

      if (contentType?.includes('application/json')) {
        const data = await res.json();
        const formatted = JSON.stringify(data, null, 2);
        setRespuesta(formatted);
      } else {
        const text = await res.text();
        setRespuesta(text);
      }
    } catch (error: any) {
      console.error('Error en la API:', error);
      setRespuesta(`Error: ${error.message || error}`);
      setCodigoRespuesta(null);
    }
  };

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.key === 'Enter') {
        e.preventDefault();
        llamarAPI();
      }
    };

    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [metodo, direccion, contenido]);

  return (
    <Box style={{ flex: 1, padding: 40 }}>
      <Center style={{ height: '100%' }}>
        <Stack style={{ width: 600 }}>
          <TextInput
            label="Dirección"
            placeholder="http://localhost:8000/api/..."
            value={direccion}
            onChange={(e) => setDireccion(e.currentTarget.value)}
          />

          <MetodoSelect metodo={metodo} setMetodo={setMetodo} />

          <Textarea
            label="Contenido (JSON)"
            placeholder='{"contenido": "Hola"}'
            value={contenido}
            onChange={(e) => setContenido(e.currentTarget.value)}
            autosize
            minRows={3}
          />

          <Button onClick={llamarAPI} 
          variant="gradient"
          gradient={{
                  from: theme.colors.brand[7],
                  to: theme.colors.brand[4],
                }}>
            Enviar solicitud
          </Button>

          {codigoRespuesta !== null && (
            <Group>
              <Badge color={colorCodigo(codigoRespuesta)} size="lg">
                Código: {codigoRespuesta}
              </Badge>
            </Group>
          )}

          <Textarea
            label="Respuesta de la API"
            value={respuesta}
            readOnly
            autosize
            minRows={6}
          />
        </Stack>
      </Center>
    </Box>
  );
}