import React, { useState } from "react";
import { useData } from "../contexts/DataContext";
import { UserApprovalStatus } from "../types";
import {
  CheckCircle,
  XCircle,
  Clock,
  Search,
  Filter,
  Users,
  Briefcase,
} 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 [activeTab, setActiveTab] = useState<"normal" | "professional">(
    "normal"
  );
  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);
  };

  // Separar usuários normais e profissionais (profissionais têm role PHOTOGRAPHER)
  const normalUsers = pendingUsers.filter(
    (user) => user.role !== "PHOTOGRAPHER"
  );
  const professionalUsers = pendingUsers.filter(
    (user) => user.role === "PHOTOGRAPHER"
  );

  // Filtrar usuários baseado na aba ativa
  const currentUsers = activeTab === "normal" ? normalUsers : professionalUsers;

  const filteredUsers = currentUsers.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 = currentUsers.filter(
    (u) => u.approvalStatus === UserApprovalStatus.PENDING
  ).length;
  const approvedCount = currentUsers.filter(
    (u) => u.approvalStatus === UserApprovalStatus.APPROVED
  ).length;
  const rejectedCount = currentUsers.filter(
    (u) => u.approvalStatus === UserApprovalStatus.REJECTED
  ).length;

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

        {/* Tabs */}
        <div className="mb-6 border-b border-gray-200">
          <nav className="-mb-px flex space-x-8">
            <button
              onClick={() => setActiveTab("normal")}
              className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors ${
                activeTab === "normal"
                  ? "border-[#B9CF33] text-[#B9CF33]"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              <Users className="w-5 h-5" />
              Cadastros Normais
              <span
                className={`ml-2 py-0.5 px-2.5 rounded-full text-xs ${
                  activeTab === "normal"
                    ? "bg-[#B9CF33] text-white"
                    : "bg-gray-200 text-gray-600"
                }`}
              >
                {normalUsers.length}
              </span>
            </button>
            <button
              onClick={() => setActiveTab("professional")}
              className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors ${
                activeTab === "professional"
                  ? "border-[#B9CF33] text-[#B9CF33]"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              <Briefcase className="w-5 h-5" />
              Cadastros Profissionais
              <span
                className={`ml-2 py-0.5 px-2.5 rounded-full text-xs ${
                  activeTab === "professional"
                    ? "bg-[#B9CF33] text-white"
                    : "bg-gray-200 text-gray-600"
                }`}
              >
                {professionalUsers.length}
              </span>
            </button>
          </nav>
        </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">
            {activeTab === "normal" ? (
              // Tabela de Cadastros Normais
              <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">
                      Empresa
                    </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>
            ) : (
              // Tabela de Cadastros Profissionais
              <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">
                      Função Profissional
                    </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">
                          <Briefcase className="w-12 h-12 text-gray-300 mb-3" />
                          <p className="text-lg font-medium">
                            Nenhum cadastro profissional encontrado
                          </p>
                          <p className="text-sm">
                            Não há cadastros profissionais 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 as any).funcao || (
                              <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>
  );
};