import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { format } from 'date-fns';
import ptBR from 'date-fns/locale/pt-BR';
import { toast } from 'react-toastify';
import { useAuth } from '../../contexts/AuthContext';

interface Calculo {
  id: string;
  titulo: string;
  status: string;
  valorBase: string;
  valorFinal: string;
  dataBase: string;
  dataCalculo: string;
  criadoEm: string;
  usuario: {
    nome: string;
  };
  processo?: {
    numero: string;
    titulo: string;
  };
  cliente?: {
    nome: string;
  };
}

export function CalculosList() {
  const { user, isAuthenticated, getToken } = useAuth();
  const navigate = useNavigate();
  const [calculos, setCalculos] = useState<Calculo[]>([]);
  const [loading, setLoading] = useState(true);
  const [filtro, setFiltro] = useState({
    titulo: '',
    status: '',
    processoId: '',
    clienteId: ''
  });
  
  useEffect(() => {
    // Verificar autenticação antes de carregar os dados
    if (isAuthenticated) {
      carregarCalculos();
    } else {
      // Redirecionar para login caso não esteja autenticado
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);
  
  const carregarCalculos = async () => {
    try {
      setLoading(true);
      
      // Construir query string baseado nos filtros
      const queryParams = new URLSearchParams();
      if (filtro.titulo) queryParams.append('titulo', filtro.titulo);
      if (filtro.status) queryParams.append('status', filtro.status);
      if (filtro.processoId) queryParams.append('processoId', filtro.processoId);
      if (filtro.clienteId) queryParams.append('clienteId', filtro.clienteId);
      
      // Obter token de autenticação usando o contexto
      const token = getToken();
      if (!token) {
        throw new Error('Usuário não autenticado. Faça login novamente.');
      }
      
      // Incluir o token no cabeçalho da requisição
      const response = await fetch(`/api/calculos?${queryParams.toString()}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      
      if (!response.ok) {
        if (response.status === 401) {
          // Se receber 401, o token pode estar expirado
          navigate('/login');
          throw new Error('Sessão expirada. Por favor, faça login novamente.');
        }
        throw new Error('Erro ao carregar cálculos');
      }
      
      const data = await response.json();
      setCalculos(data);
    } catch (error) {
      console.error('Erro ao carregar cálculos:', error);
      toast.error(`Falha ao carregar os cálculos: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };
  
  const handleFiltroChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFiltro(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmitFiltro = (e: React.FormEvent) => {
    e.preventDefault();
    carregarCalculos();
  };
  
  // Função para formatar valores monetários
  const formatarValor = (valor: string) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(parseFloat(valor));
  };
  
  // Função para formatar datas
  const formatarData = (data: string) => {
    try {
      return format(new Date(data), 'dd/MM/yyyy', { locale: ptBR });
    } catch (error) {
      return 'Data inválida';
    }
  };
  
  // Status Badge
  const StatusBadge = ({ status }: { status: string }) => {
    const getStatusColor = () => {
      switch (status) {
        case 'RASCUNHO':
          return 'bg-yellow-100 text-yellow-800';
        case 'FINALIZADO':
          return 'bg-green-100 text-green-800';
        case 'ARQUIVADO':
          return 'bg-gray-100 text-gray-800';
        default:
          return 'bg-blue-100 text-blue-800';
      }
    };
    
    return (
      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}>
        {status}
      </span>
    );
  };
  
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Cálculos Judiciais</h1>
        <div className="flex gap-3">
          <Link
            to="/calculos/novo"
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            Novo Cálculo Judicial
          </Link>
          <Link
            to="/pensao-alimenticia/novo"
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
          >
            Novo Cálculo de Pensão
          </Link>
        </div>
      </div>
      
      {/* Filtros */}
      <div className="bg-white shadow rounded-lg mb-6 p-4">
        <h2 className="text-lg font-medium text-gray-700 mb-3">Filtros</h2>
        <form onSubmit={handleSubmitFiltro} className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <label htmlFor="titulo" className="block text-sm font-medium text-gray-700">
              Título
            </label>
            <input
              type="text"
              name="titulo"
              id="titulo"
              value={filtro.titulo}
              onChange={handleFiltroChange}
              className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
            />
          </div>
          
          <div>
            <label htmlFor="status" className="block text-sm font-medium text-gray-700">
              Status
            </label>
            <select
              id="status"
              name="status"
              value={filtro.status}
              onChange={handleFiltroChange}
              className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
            >
              <option value="">Todos</option>
              <option value="RASCUNHO">Rascunho</option>
              <option value="FINALIZADO">Finalizado</option>
              <option value="ARQUIVADO">Arquivado</option>
            </select>
          </div>
          
          <div className="sm:col-span-2 flex justify-end items-end">
            <button
              type="submit"
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              Filtrar
            </button>
          </div>
        </form>
      </div>
      
      {/* Lista de Cálculos */}
      {loading ? (
        <div className="flex justify-center items-center h-64">
          <div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600" role="status">
            <span className="visually-hidden">Carregando...</span>
          </div>
        </div>
      ) : calculos.length === 0 ? (
        <div className="bg-white shadow rounded-lg p-8 text-center">
          <h3 className="text-lg font-medium text-gray-900">Nenhum cálculo encontrado</h3>
          <p className="mt-2 text-sm text-gray-500">
            Para criar um novo cálculo, clique no botão "Novo Cálculo".
          </p>
        </div>
      ) : (
        <div className="bg-white shadow overflow-hidden sm:rounded-md">
          <ul className="divide-y divide-gray-200">
            {calculos.map((calculo) => (
              <li key={calculo.id}>
                <Link to={`/calculos/${calculo.id}`} className="block hover:bg-gray-50">
                  <div className="px-4 py-4 sm:px-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <p className="text-base font-medium text-blue-600 truncate">
                          {calculo.titulo}
                        </p>
                        <StatusBadge status={calculo.status} />
                      </div>
                      <div className="ml-2 flex-shrink-0 flex">
                        <p className="px-2 inline-flex text-sm leading-5 font-medium rounded-full bg-blue-100 text-blue-800">
                          {formatarValor(calculo.valorFinal)}
                        </p>
                      </div>
                    </div>
                    <div className="mt-2 sm:flex sm:justify-between">
                      <div className="sm:flex">
                        <p className="flex items-center text-sm text-gray-500">
                          Base: {formatarValor(calculo.valorBase)}
                        </p>
                        <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                          Data Base: {formatarData(calculo.dataBase)}
                        </p>
                      </div>
                      <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                        <p>
                          Criado em: {formatarData(calculo.criadoEm)} por {calculo.usuario.nome}
                        </p>
                      </div>
                    </div>
                    {calculo.processo && (
                      <div className="mt-2">
                        <p className="text-sm text-gray-600">
                          Processo: {calculo.processo.numero} - {calculo.processo.titulo}
                        </p>
                      </div>
                    )}
                    {calculo.cliente && (
                      <div className="mt-1">
                        <p className="text-sm text-gray-600">
                          Cliente: {calculo.cliente.nome}
                        </p>
                      </div>
                    )}
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}