import React, { useState } from 'react';
import { useData } from '../contexts/DataContext';
import { UserApprovalStatus } from '../types';
import { CheckCircle, XCircle, Clock, Search, Filter } from 'lucide-react';
import { Button } from '../components/Button';

interface UserApprovalProps {
    onNavigate?: (page: string) => void;
}

export const UserApproval: React.FC<UserApprovalProps> = ({ onNavigate }) => {
    const { pendingUsers, approveUser, rejectUser } = useData();
    const [searchTerm, setSearchTerm] = useState('');
    const [statusFilter, setStatusFilter] = useState<'ALL' | UserApprovalStatus>('ALL');
    const [isProcessing, setIsProcessing] = useState<string | null>(null);

    const handleApprove = async (userId: string) => {
        setIsProcessing(userId);
        // Simular processamento
        setTimeout(() => {
            approveUser(userId);
            setIsProcessing(null);
        }, 800);
    };

    const handleReject = async (userId: string) => {
        setIsProcessing(userId);
        // Simular processamento
        setTimeout(() => {
            rejectUser(userId);
            setIsProcessing(null);
        }, 800);
    };

    // Filtrar usuários
    const filteredUsers = pendingUsers.filter(user => {
        const matchesSearch = 
            user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (user.registeredInstitution?.toLowerCase().includes(searchTerm.toLowerCase()) ?? false);
        
        const matchesStatus = statusFilter === 'ALL' || user.approvalStatus === statusFilter;

        return matchesSearch && matchesStatus;
    });

    const getStatusBadge = (status: UserApprovalStatus) => {
        switch (status) {
            case UserApprovalStatus.PENDING:
                return (
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                        <Clock className="w-3 h-3 mr-1" />
                        Pendente
                    </span>
                );
            case UserApprovalStatus.APPROVED:
                return (
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Aprovado
                    </span>
                );
            case UserApprovalStatus.REJECTED:
                return (
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                        <XCircle className="w-3 h-3 mr-1" />
                        Rejeitado
                    </span>
                );
        }
    };

    const pendingCount = pendingUsers.filter(u => u.approvalStatus === UserApprovalStatus.PENDING).length;
    const approvedCount = pendingUsers.filter(u => u.approvalStatus === UserApprovalStatus.APPROVED).length;
    const rejectedCount = pendingUsers.filter(u => u.approvalStatus === UserApprovalStatus.REJECTED).length;

    return (
        <div className="min-h-screen bg-gray-50 pt-20 pb-8">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                {/* Header */}
                <div className="mb-8">
                    <h1 className="text-3xl font-bold text-gray-900 mb-2">Aprovação de Cadastros</h1>
                    <p className="text-gray-600">Gerencie os cadastros pendentes de aprovação</p>
                </div>

                {/* Stats Cards */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm font-medium text-gray-600">Pendentes</p>
                                <p className="text-3xl font-bold text-yellow-600">{pendingCount}</p>
                            </div>
                            <div className="p-3 bg-yellow-100 rounded-full">
                                <Clock className="w-8 h-8 text-yellow-600" />
                            </div>
                        </div>
                    </div>

                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm font-medium text-gray-600">Aprovados</p>
                                <p className="text-3xl font-bold text-green-600">{approvedCount}</p>
                            </div>
                            <div className="p-3 bg-green-100 rounded-full">
                                <CheckCircle className="w-8 h-8 text-green-600" />
                            </div>
                        </div>
                    </div>

                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm font-medium text-gray-600">Rejeitados</p>
                                <p className="text-3xl font-bold text-red-600">{rejectedCount}</p>
                            </div>
                            <div className="p-3 bg-red-100 rounded-full">
                                <XCircle className="w-8 h-8 text-red-600" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Filters */}
                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
                    <div className="flex flex-col sm:flex-row gap-4">
                        {/* Search */}
                        <div className="flex-1 relative">
                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                            <input
                                type="text"
                                placeholder="Buscar por nome, email ou universidade..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-gold focus:border-transparent"
                            />
                        </div>

                        {/* Status Filter */}
                        <div className="flex items-center gap-2">
                            <Filter className="w-5 h-5 text-gray-400" />
                            <select
                                value={statusFilter}
                                onChange={(e) => setStatusFilter(e.target.value as any)}
                                className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-gold focus:border-transparent"
                            >
                                <option value="ALL">Todos os Status</option>
                                <option value={UserApprovalStatus.PENDING}>Pendentes</option>
                                <option value={UserApprovalStatus.APPROVED}>Aprovados</option>
                                <option value={UserApprovalStatus.REJECTED}>Rejeitados</option>
                            </select>
                        </div>
                    </div>
                </div>

                {/* Table */}
                <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div className="overflow-x-auto">
                        <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">
                                        Email
                                    </th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Telefone
                                    </th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Universidade
                                    </th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Data de Cadastro
                                    </th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Status
                                    </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">
                                {filteredUsers.length === 0 ? (
                                    <tr>
                                        <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
                                            <div className="flex flex-col items-center justify-center">
                                                <Clock className="w-12 h-12 text-gray-300 mb-3" />
                                                <p className="text-lg font-medium">Nenhum cadastro encontrado</p>
                                                <p className="text-sm">Não há cadastros que correspondam aos filtros selecionados.</p>
                                            </div>
                                        </td>
                                    </tr>
                                ) : (
                                    filteredUsers.map((user) => (
                                        <tr key={user.id} className="hover:bg-gray-50 transition-colors">
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <div className="text-sm font-medium text-gray-900">{user.name}</div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <div className="text-sm text-gray-600">{user.email}</div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <div className="text-sm text-gray-600">{user.phone || '-'}</div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <div className="text-sm text-gray-600">
                                                    {user.registeredInstitution || (
                                                        <span className="text-gray-400 italic">Não cadastrado</span>
                                                    )}
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <div className="text-sm text-gray-600">
                                                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString('pt-BR') : '-'}
                                                </div>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                {getStatusBadge(user.approvalStatus!)}
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                {user.approvalStatus === UserApprovalStatus.PENDING && (
                                                    <div className="flex gap-2">
                                                        <Button
                                                            size="sm"
                                                            onClick={() => handleApprove(user.id)}
                                                            isLoading={isProcessing === user.id}
                                                            disabled={isProcessing !== null}
                                                            className="bg-green-600 hover:bg-green-700 text-white"
                                                        >
                                                            <CheckCircle className="w-4 h-4 mr-1" />
                                                            Aprovar
                                                        </Button>
                                                        <Button
                                                            size="sm"
                                                            onClick={() => handleReject(user.id)}
                                                            isLoading={isProcessing === user.id}
                                                            disabled={isProcessing !== null}
                                                            className="bg-red-600 hover:bg-red-700 text-white"
                                                        >
                                                            <XCircle className="w-4 h-4 mr-1" />
                                                            Rejeitar
                                                        </Button>
                                                    </div>
                                                )}
                                                {user.approvalStatus === UserApprovalStatus.APPROVED && (
                                                    <span className="text-green-600 text-xs">Aprovado</span>
                                                )}
                                                {user.approvalStatus === UserApprovalStatus.REJECTED && (
                                                    <span className="text-red-600 text-xs">Rejeitado</span>
                                                )}
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
};