import React, { useEffect, useState } from 'react';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { Input } from '../../components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
} from '../../components/ui/table';
import {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '../../components/ui/pagination';
import { toast } from 'sonner';
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown } from 'lucide-react';
import PaymentActivationDialog from '../../components/PaymentActivationDialog';

const AdminApprovals = () => {
  const [pendingUsers, setPendingUsers] = useState([]);
  const [filteredUsers, setFilteredUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(null);
  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
  const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);

  // Filtering state
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  // Sorting state
  const [sortBy, setSortBy] = useState('created_at');
  const [sortOrder, setSortOrder] = useState('desc');

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

  useEffect(() => {
    filterAndSortUsers();
  }, [pendingUsers, searchQuery, statusFilter, sortBy, sortOrder]);

  useEffect(() => {
    setCurrentPage(1);
  }, [searchQuery, statusFilter]);

  const fetchPendingUsers = async () => {
    try {
      const response = await api.get('/admin/users');
      const pending = response.data.filter(user =>
        ['pending_email', 'pending_approval', 'pre_approved', 'payment_pending'].includes(user.status)
      );
      setPendingUsers(pending);
    } catch (error) {
      toast.error('Failed to fetch pending users');
    } finally {
      setLoading(false);
    }
  };

  const filterAndSortUsers = () => {
    let filtered = [...pendingUsers];

    // Apply status filter
    if (statusFilter !== 'all') {
      filtered = filtered.filter(user => user.status === statusFilter);
    }

    // Apply search query
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(user =>
        user.first_name.toLowerCase().includes(query) ||
        user.last_name.toLowerCase().includes(query) ||
        user.email.toLowerCase().includes(query) ||
        user.phone?.toLowerCase().includes(query)
      );
    }

    // Apply sorting
    filtered.sort((a, b) => {
      let aVal = a[sortBy];
      let bVal = b[sortBy];

      if (sortBy === 'created_at') {
        aVal = new Date(aVal);
        bVal = new Date(bVal);
      } else if (sortBy === 'first_name') {
        aVal = `${a.first_name} ${a.last_name}`;
        bVal = `${b.first_name} ${b.last_name}`;
      }

      if (sortOrder === 'asc') {
        return aVal > bVal ? 1 : -1;
      } else {
        return aVal < bVal ? 1 : -1;
      }
    });

    setFilteredUsers(filtered);
  };

  const handleApprove = async (userId) => {
    setActionLoading(userId);
    try {
      await api.put(`/admin/users/${userId}/approve`);
      toast.success('User validated and approved! Payment email sent.');
      fetchPendingUsers();
    } catch (error) {
      toast.error('Failed to approve user');
    } finally {
      setActionLoading(null);
    }
  };

  const handleBypassAndApprove = async (userId) => {
    if (!window.confirm(
      'This will bypass email verification and approve the user. ' +
      'Are you sure you want to proceed?'
    )) {
      return;
    }

    setActionLoading(userId);
    try {
      await api.put(`/admin/users/${userId}/approve?bypass_email_verification=true`);
      toast.success('User email verified and approved! Payment email sent.');
      fetchPendingUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to approve user');
    } finally {
      setActionLoading(null);
    }
  };

  const handleActivatePayment = (user) => {
    setSelectedUserForPayment(user);
    setPaymentDialogOpen(true);
  };

  const handlePaymentSuccess = () => {
    fetchPendingUsers(); // Refresh list
  };

  const getStatusBadge = (status) => {
    const config = {
      pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
      pending_approval: { label: 'Pending', className: 'bg-gray-200 text-gray-700' },
      pre_approved: { label: 'Pre-Approved', className: 'bg-[#81B29A] text-white' },
      payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' }
    };

    const statusConfig = config[status];
    return (
      <Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
        {statusConfig.label}
      </Badge>
    );
  };

  const handleSort = (column) => {
    if (sortBy === column) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(column);
      setSortOrder('asc');
    }
  };

  // Pagination calculations
  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
  const paginatedUsers = filteredUsers.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  const renderSortIcon = (column) => {
    if (sortBy !== column) return null;
    return sortOrder === 'asc' ?
      <ArrowUp className="h-4 w-4 inline ml-1" /> :
      <ArrowDown className="h-4 w-4 inline ml-1" />;
  };

  return (
    <>
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
          Approval Queue
        </h1>
        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Review and approve pending membership applications.
        </p>
      </div>

      {/* Stats Card */}
      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <div>
            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              {pendingUsers.length}
            </p>
          </div>
          <div>
            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              {pendingUsers.filter(u => u.status === 'pending_email').length}
            </p>
          </div>
          <div>
            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Approval</p>
            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              {pendingUsers.filter(u => u.status === 'pending_approval').length}
            </p>
          </div>
          <div>
            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Approved</p>
            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              {pendingUsers.filter(u => u.status === 'pre_approved').length}
            </p>
          </div>
          <div>
            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              {pendingUsers.filter(u => u.status === 'payment_pending').length}
            </p>
          </div>
        </div>
      </Card>

      {/* Filter Card */}
      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
        <div className="grid md:grid-cols-3 gap-4">
          <div className="relative md:col-span-2">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
            <Input
              placeholder="Search by name, email, or phone..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
            />
          </div>

          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]">
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="pending_email">Awaiting Email</SelectItem>
              <SelectItem value="pending_approval">Pending Approval</SelectItem>
              <SelectItem value="pre_approved">Pre-Approved</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </Card>

      {/* Table */}
      {loading ? (
        <div className="text-center py-20">
          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
        </div>
      ) : filteredUsers.length > 0 ? (
        <>
          <Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead
                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
                    onClick={() => handleSort('first_name')}
                  >
                    Name {renderSortIcon('first_name')}
                  </TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>Phone</TableHead>
                  <TableHead
                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
                    onClick={() => handleSort('status')}
                  >
                    Status {renderSortIcon('status')}
                  </TableHead>
                  <TableHead
                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
                    onClick={() => handleSort('created_at')}
                  >
                    Registered {renderSortIcon('created_at')}
                  </TableHead>
                  <TableHead>Referred By</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paginatedUsers.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell className="font-medium">
                      {user.first_name} {user.last_name}
                    </TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>{user.phone}</TableCell>
                    <TableCell>{getStatusBadge(user.status)}</TableCell>
                    <TableCell>
                      {new Date(user.created_at).toLocaleDateString()}
                    </TableCell>
                    <TableCell>
                      {user.referred_by_member_name || '-'}
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        {user.status === 'pending_email' ? (
                          <Button
                            onClick={() => handleBypassAndApprove(user.id)}
                            disabled={actionLoading === user.id}
                            size="sm"
                            className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
                          >
                            {actionLoading === user.id ? 'Approving...' : 'Bypass & Approve'}
                          </Button>
                        ) : user.status === 'payment_pending' ? (
                          <Button
                            onClick={() => handleActivatePayment(user)}
                            size="sm"
                            className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
                          >
                            <CheckCircle className="h-4 w-4 mr-1" />
                            Activate Payment
                          </Button>
                        ) : (
                          <Button
                            onClick={() => handleApprove(user.id)}
                            disabled={actionLoading === user.id}
                            size="sm"
                            className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
                          >
                            {actionLoading === user.id ? 'Validating...' : 'Approve'}
                          </Button>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>

          {/* Pagination Controls */}
          <div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            {/* Page size selector */}
            <div className="flex items-center gap-2">
              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
              <Select
                value={itemsPerPage.toString()}
                onValueChange={(val) => {
                  setItemsPerPage(parseInt(val));
                  setCurrentPage(1);
                }}
              >
                <SelectTrigger className="w-20">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="25">25</SelectItem>
                  <SelectItem value="50">50</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                </SelectContent>
              </Select>
              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                entries (showing {(currentPage - 1) * itemsPerPage + 1}-
                {Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
              </p>
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <Pagination>
                <PaginationContent>
                  <PaginationItem>
                    <PaginationPrevious
                      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                      className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
                    />
                  </PaginationItem>

                  {[...Array(totalPages)].map((_, i) => {
                    const showPage = i < 2 || i >= totalPages - 2 ||
                                    Math.abs(i - currentPage + 1) <= 1;

                    if (!showPage && i === 2) {
                      return (
                        <PaginationItem key={i}>
                          <PaginationEllipsis />
                        </PaginationItem>
                      );
                    }

                    if (!showPage) return null;

                    return (
                      <PaginationItem key={i}>
                        <PaginationLink
                          onClick={() => setCurrentPage(i + 1)}
                          isActive={currentPage === i + 1}
                          className="cursor-pointer"
                        >
                          {i + 1}
                        </PaginationLink>
                      </PaginationItem>
                    );
                  })}

                  <PaginationItem>
                    <PaginationNext
                      onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                      className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
                    />
                  </PaginationItem>
                </PaginationContent>
              </Pagination>
            )}
          </div>
        </>
      ) : (
        <div className="text-center py-20">
          <Clock className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
          <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            No Pending Approvals
          </h3>
          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            {searchQuery || statusFilter !== 'all'
              ? 'Try adjusting your filters'
              : 'All applications have been reviewed!'}
          </p>
        </div>
      )}

      {/* Payment Activation Dialog */}
      <PaymentActivationDialog
        open={paymentDialogOpen}
        onOpenChange={setPaymentDialogOpen}
        user={selectedUserForPayment}
        onSuccess={handlePaymentSuccess}
      />
    </>
  );
};

export default AdminApprovals;