import { useState, useEffect } from 'react';
import { Plus, Trash2, Copy, Check, Eye, EyeOff, Calendar, Key, AlertCircle, BookOpen, ExternalLink } from 'lucide-react';
import api from '../lib/api';
import { toast } from './Toast';
import { ConfirmDialog } from './ConfirmDialog';

interface ApiToken {
  id: number;
  name: string;
  abilities: string[];
  last_used_at: string | null;
  expires_at: string | null;
  created_at: string;
  is_expired: boolean;
}

export function ApiTokensTab() {
  const [tokens, setTokens] = useState<ApiToken[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [newTokenName, setNewTokenName] = useState('');
  const [newTokenAbilities, setNewTokenAbilities] = useState<string[]>(['read', 'write']);
  const [newTokenExpiresAt, setNewTokenExpiresAt] = useState('');
  const [creating, setCreating] = useState(false);
  const [newToken, setNewToken] = useState<string | null>(null);
  const [showToken, setShowToken] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; tokenId: number | null }>({
    show: false,
    tokenId: null,
  });

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

  const loadTokens = async () => {
    try {
      setLoading(true);
      const { data } = await api.get('/api-tokens');
      setTokens(data.tokens || []);
    } catch (error) {
      console.error('Erro ao carregar tokens:', error);
      toast.error('Erro ao carregar tokens de API');
    } finally {
      setLoading(false);
    }
  };

  const handleCreateToken = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!newTokenName.trim()) {
      toast.error('Informe um nome para o token');
      return;
    }

    if (newTokenAbilities.length === 0) {
      toast.error('Selecione pelo menos uma permissão');
      return;
    }

    setCreating(true);
    try {
      const { data } = await api.post('/api-tokens', {
        name: newTokenName,
        abilities: newTokenAbilities,
        expires_at: newTokenExpiresAt || null,
      });

      setNewToken(data.token.token);
      setShowToken(true);
      setNewTokenName('');
      setNewTokenAbilities(['read', 'write']);
      setNewTokenExpiresAt('');
      await loadTokens();
    } catch (error: any) {
      console.error('Erro ao criar token:', error);
      const errorMessage = error.response?.data?.message || 'Erro ao criar token';
      toast.error(errorMessage);
    } finally {
      setCreating(false);
    }
  };

  const handleDeleteToken = async (tokenId: number) => {
    try {
      await api.delete(`/api-tokens/${tokenId}`);
      toast.success('Token excluído com sucesso');
      await loadTokens();
    } catch (error: any) {
      console.error('Erro ao excluir token:', error);
      const errorMessage = error.response?.data?.message || 'Erro ao excluir token';
      toast.error(errorMessage);
    }
  };

  const handleCopyToken = (token: string) => {
    navigator.clipboard.writeText(token);
    toast.success('Token copiado para a área de transferência!');
  };

  const toggleAbility = (ability: string) => {
    if (newTokenAbilities.includes(ability)) {
      setNewTokenAbilities(newTokenAbilities.filter(a => a !== ability));
    } else {
      setNewTokenAbilities([...newTokenAbilities, ability]);
    }
  };

  const formatDate = (dateString: string | null) => {
    if (!dateString) return 'Nunca';
    const date = new Date(dateString);
    return date.toLocaleString('pt-BR');
  };

  const getAbilityLabel = (ability: string) => {
    const labels: Record<string, string> = {
      read: 'Leitura',
      write: 'Escrita',
      delete: 'Exclusão',
      admin: 'Administrador',
      passwords: 'Senhas dos clientes',
    };
    return labels[ability] || ability;
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-semibold text-gray-800">Tokens de API</h3>
            <a
              href="/api/documentation"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-purple-600 hover:text-purple-700 hover:bg-purple-50 rounded-lg transition-colors"
              title="Abrir documentação da API"
            >
              <BookOpen className="w-4 h-4" />
              <span>Documentação da API</span>
              <ExternalLink className="w-3 h-3" />
            </a>
          </div>
          <p className="text-sm text-gray-600 mt-1">
            Gerencie seus tokens de acesso para usar a API e integrações
          </p>
        </div>
        <button
          onClick={() => {
            setShowCreateModal(true);
            setNewToken(null);
            setShowToken(false);
          }}
          className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
        >
          <Plus className="w-4 h-4" />
          Criar Novo Token
        </button>
      </div>

      {/* Alerta de segurança */}
      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-3">
        <AlertCircle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
        <div className="text-sm text-yellow-800">
          <p className="font-medium mb-1">Importante sobre segurança</p>
          <p>
            Os tokens de API fornecem acesso completo à sua conta. Mantenha-os seguros e não os compartilhe.
            Revogue tokens que não estão mais em uso.
          </p>
        </div>
      </div>

      {/* Lista de tokens */}
      {tokens.length === 0 ? (
        <div className="text-center py-12 bg-gray-50 rounded-lg border border-gray-200">
          <Key className="w-12 h-12 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-600">Nenhum token criado</p>
          <p className="text-sm text-gray-500 mt-1">Crie um token para começar a usar a API</p>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Nome
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Permissões
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Último Uso
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Expira em
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Ações
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {tokens.map((token) => (
                <tr key={token.id} className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{token.name}</div>
                    <div className="text-xs text-gray-500">
                      Criado em {new Date(token.created_at).toLocaleDateString('pt-BR')}
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex flex-wrap gap-1">
                      {token.abilities.map((ability) => (
                        <span
                          key={ability}
                          className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800"
                        >
                          {getAbilityLabel(ability)}
                        </span>
                      ))}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {formatDate(token.last_used_at)}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {token.expires_at ? (
                      <span className={token.is_expired ? 'text-red-600 font-medium' : ''}>
                        {formatDate(token.expires_at)}
                        {token.is_expired && ' (Expirado)'}
                      </span>
                    ) : (
                      <span className="text-gray-400">Nunca</span>
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm">
                    <button
                      onClick={() => setDeleteConfirm({ show: true, tokenId: token.id })}
                      className="text-red-600 hover:text-red-700 font-medium"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Modal de criação de token */}
      {showCreateModal && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 scroll-hidden overflow-y-auto"
          onClick={(e) => {
            if (e.target === e.currentTarget && !showToken) {
              setShowCreateModal(false);
            }
          }}
        >
          <div className="bg-white rounded-2xl w-full max-w-md shadow-2xl my-8 max-h-[90vh] flex flex-col">
            <div className="flex justify-between items-center p-6 border-b border-gray-200 flex-shrink-0">
              <h2 className="text-xl font-bold text-gray-800">
                {showToken ? 'Token Criado' : 'Criar Novo Token'}
              </h2>
              <button
                onClick={() => {
                  setShowCreateModal(false);
                  setShowToken(false);
                  setNewToken(null);
                }}
                className="text-gray-400 hover:text-gray-600 text-2xl font-bold w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
              >
                ×
              </button>
            </div>

            <div className="p-6 scroll-hidden overflow-y-auto flex-1 min-h-0">
              {showToken && newToken ? (
                <div className="space-y-4">
                  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                    <p className="text-sm text-green-800 font-medium mb-2">
                      ⚠️ Guarde este token com segurança!
                    </p>
                    <p className="text-xs text-green-700">
                      Você só verá este token uma vez. Certifique-se de copiá-lo agora.
                    </p>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Seu Token de API
                    </label>
                    <div className="flex items-center gap-2">
                      <div className="flex-1 bg-gray-50 border-2 border-gray-300 rounded-lg px-4 py-3 font-mono text-sm break-all">
                        {newToken}
                      </div>
                      <button
                        onClick={() => handleCopyToken(newToken)}
                        className="p-3 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-colors"
                        title="Copiar token"
                      >
                        <Copy className="w-5 h-5" />
                      </button>
                    </div>
                  </div>

                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <p className="text-sm text-blue-800 font-medium mb-2">Como usar:</p>
                    <code className="text-xs text-blue-700 block bg-white p-2 rounded border border-blue-200">
                      Authorization: Bearer {newToken.substring(0, 20)}...
                    </code>
                  </div>

                  <button
                    onClick={() => {
                      setShowCreateModal(false);
                      setShowToken(false);
                      setNewToken(null);
                    }}
                    className="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 font-medium"
                  >
                    Fechar
                  </button>
                </div>
              ) : (
                <form onSubmit={handleCreateToken} className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome do Token *
                    </label>
                    <input
                      type="text"
                      value={newTokenName}
                      onChange={(e) => setNewTokenName(e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      placeholder="Ex: Meu App, Integração XYZ..."
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Permissões *
                    </label>
                    <div className="space-y-2">
                      {['read', 'write', 'delete', 'admin', 'passwords'].map((ability) => (
                        <label
                          key={ability}
                          className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"
                        >
                          <input
                            type="checkbox"
                            checked={newTokenAbilities.includes(ability)}
                            onChange={() => toggleAbility(ability)}
                            className="form-checkbox h-4 w-4 text-purple-600 rounded"
                          />
                          <span className="ml-3 text-sm text-gray-700">
                            {getAbilityLabel(ability)}
                          </span>
                        </label>
                      ))}
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Data de Expiração (Opcional)
                    </label>
                    <input
                      type="datetime-local"
                      value={newTokenExpiresAt}
                      onChange={(e) => setNewTokenExpiresAt(e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    />
                    <p className="text-xs text-gray-500 mt-1">
                      Deixe em branco para token sem expiração
                    </p>
                  </div>

                  <div className="flex gap-3">
                    <button
                      type="button"
                      onClick={() => setShowCreateModal(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium"
                    >
                      Cancelar
                    </button>
                    <button
                      type="submit"
                      disabled={creating}
                      className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 font-medium"
                    >
                      {creating ? 'Criando...' : 'Criar Token'}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Confirm Dialog para exclusão */}
      <ConfirmDialog
        isOpen={deleteConfirm.show}
        title="Excluir Token"
        message="Tem certeza que deseja excluir este token? Esta ação não pode ser desfeita e qualquer aplicação usando este token perderá o acesso."
        confirmText="Excluir"
        type="danger"
        onConfirm={async () => {
          if (deleteConfirm.tokenId) {
            await handleDeleteToken(deleteConfirm.tokenId);
          }
          setDeleteConfirm({ show: false, tokenId: null });
        }}
        onClose={() => setDeleteConfirm({ show: false, tokenId: null })}
      />
    </div>
  );
}