import React, { useEffect, useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import api from '../../utils/api';
import { Card } from '../../components/ui/card';
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, X, FileText, XCircle } from 'lucide-react';
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
import ConfirmationDialog from '../../components/ConfirmationDialog';
import RejectionDialog from '../../components/RejectionDialog';
import StatusBadge from '@/components/StatusBadge';
import { StatCard } from '@/components/StatCard';
import { Button } from '@/components/ui/button';
import ViewRegistrationDialog from '@/components/ViewRegistrationDialog';

const AdminValidations = () => {
  const { hasPermission } = useAuth();
  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);
  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
  const [pendingAction, setPendingAction] = useState(null);
  const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
  const [userToReject, setUserToReject] = useState(null);
  const [viewRegistrationDialogOpen, setViewRegistrationDialogOpen] = useState(false);
  const [selectedUserForView, setSelectedUserForView] = 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');

  // Resend email state
  const [resendLoading, setResendLoading] = useState(null);

  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_validation', 'pre_validated', 'payment_pending', 'rejected'].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 handleValidateRequest = (user) => {
    setPendingAction({ type: 'validate', user });
    setConfirmDialogOpen(true);
  };

  const handleBypassAndValidateRequest = (user) => {
    setPendingAction({ type: 'bypass_and_validate', user });
    setConfirmDialogOpen(true);
  };

  const confirmAction = async () => {
    if (!pendingAction) return;

    const { type, user } = pendingAction;
    setActionLoading(user.id);
    setConfirmDialogOpen(false);

    try {
      if (type === 'validate') {
        await api.put(`/admin/users/${user.id}/validate`);
        toast.success('User validated! Payment email sent.');
      } else if (type === 'bypass_and_validate') {
        await api.put(`/admin/users/${user.id}/validate?bypass_email_verification=true`);
        toast.success('User email verified and validated! Payment email sent.');
      }
      fetchPendingUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to validate user');
    } finally {
      setActionLoading(null);
      setPendingAction(null);
    }
  };

  const getActionMessage = () => {
    if (!pendingAction) return {};

    const { type, user } = pendingAction;
    const userName = `${user.first_name} ${user.last_name}`;

    if (type === 'validate') {
      return {
        title: 'Validate User?',
        description: `This will validate ${userName} and send them a payment link email. They will be able to complete payment and become an active member.`,
        variant: 'success',
        confirmText: 'Yes, Validate User',
      };
    }

    if (type === 'bypass_and_validate') {
      return {
        title: 'Bypass Email & Validate User?',
        description: `This will bypass email verification for ${userName} and validate them immediately. A payment link email will be sent. Use this only if you've confirmed their email through other means.`,
        variant: 'warning',
        confirmText: 'Yes, Bypass & Validate',
      };
    }

    return {};
  };

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

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

  const handleRejectUser = (user) => {
    setUserToReject(user);
    setRejectionDialogOpen(true);
  };

  const confirmRejection = async (reason) => {
    if (!userToReject) return;

    setActionLoading(userToReject.id);
    try {
      await api.post(`/admin/users/${userToReject.id}/reject`, { reason });
      toast.success(`${userToReject.first_name} ${userToReject.last_name} has been rejected`);
      fetchPendingUsers();
      setRejectionDialogOpen(false);
      setUserToReject(null);
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to reject user');
    } finally {
      setActionLoading(null);
    }
  };

  const handleReactivateUser = async (user) => {
    setActionLoading(user.id);
    try {
      await api.put(`/admin/users/${user.id}/status`, {
        status: 'pending_validation'
      });
      toast.success(`${user.first_name} ${user.last_name} has been reactivated and moved to pending validation`);
      fetchPendingUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to reactivate user');
    } finally {
      setActionLoading(null);
    }
  };

  const handleRegistrationDialog = (user) => {
    setSelectedUserForView(user);
    setViewRegistrationDialogOpen(true);
  };

  // Resend Email Handler
  const handleResendVerification = async (user) => {
    setResendLoading(user.id);
    try {
      await api.post(`/admin/users/${user.id}/resend-verification`);
      toast.success(`Verification email sent to ${user.email}`);
      fetchPendingUsers();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to send verification email');
    } finally {
      setResendLoading(null);
    }
  };


  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" />;
  };

  const formatPhoneNumber = (phone) => {
    if (!phone) return '-';
    const cleaned = phone.replace(/\D/g, '');
    if (cleaned.length === 10) {
      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} - ${cleaned.slice(6)}`;
    }
    return phone;
  };

  const handleActionSelect = (user, action) => {
    switch (action) {
      case 'validate':
        handleValidateRequest(user);
        break;
      case 'bypass_validate':
        handleBypassAndValidateRequest(user);
        break;
      case 'resend_email':
        handleResendVerification(user);
        break;
      case 'activate_payment':
        handleActivatePayment(user);
        break;
      case 'reactivate':
        handleReactivateUser(user);
        break;
      default:
        break;
    }
  };

  return (
    <>
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
          Validation Queue
        </h1>
        <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          Review and validate pending membership applications.
        </p>
      </div>


      {/* Stats Card */}
      <Card className="rounded-3xl bg-brand-lavender/10 p-8 mb-8">
        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
          Quick Overview
        </div>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <StatCard
            title="Total Pending"
            value={loading ? '-' : pendingUsers.length}
            icon={CheckCircle}
            iconBgClass="text-brand-purple"
            dataTestId="stat-total-users"
          />

          <StatCard
            title="Awaiting Email"
            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
            icon={CheckCircle}
            iconBgClass="text-brand-purple"
            dataTestId="stat-total-users"
          />

          <StatCard
            title="Pending Validation"
            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
            icon={CheckCircle}
            iconBgClass="text-brand-purple"
            dataTestId="stat-pending-validation"
          />

          <StatCard
            title="Payment Pending"
            value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
            icon={CheckCircle}
            iconBgClass="text-brand-purple"
            dataTestId="stat-payment-pending"
          />

          <StatCard
            title="Rejected"
            value={loading ? '-' : pendingUsers.filter(u => u.status === 'rejected').length}
            icon={XCircle}
            iconBgClass="text-red-600"
            dataTestId="stat-rejected"
          />


        </div>
      </Card>

      {/* Filter Card */}
      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] 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-brand-purple " />
            <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-[var(--neutral-800)] focus:border-brand-purple "
            />
          </div>

          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent className="">
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="pending_email" >Awaiting Email</SelectItem>
              <SelectItem value="pending_validation" >Pending Validation</SelectItem>
              <SelectItem value="payment_pending" >Payment Pending</SelectItem>
              <SelectItem value="rejected" >Rejected</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </Card>

      {/* Table */}
      {loading ? (
        <div className="text-center py-20">
          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
        </div>
      ) : filteredUsers.length > 0 ? (
        <>
          <Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead
                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                    onClick={() => handleSort('first_name')}
                  >
                    Member {renderSortIcon('first_name')}
                  </TableHead>
                  <TableHead>Phone</TableHead>
                  <TableHead
                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                    onClick={() => handleSort('status')}
                  >
                    Status {renderSortIcon('status')}
                  </TableHead>
                  <TableHead
                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                    onClick={() => handleSort('created_at')}
                  >
                    Registered {renderSortIcon('created_at')}
                  </TableHead>
                  <TableHead
                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                    onClick={() => handleSort('email_verification_expires_at')}
                  >
                    {/* TODO: change ' ' */}
                    Validation Expiry {renderSortIcon('email_verification_expires_at')}
                  </TableHead>
                  <TableHead>Referred By</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paginatedUsers.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell className=" ">
                      <div className='font-semibold'>

                        {user.first_name} {user.last_name}
                      </div>
                      <div className='text-brand-purple'>
                      {user.email}
                      </div>

                    </TableCell>
                    <TableCell>{formatPhoneNumber(user.phone)}</TableCell>
                    <TableCell><StatusBadge status={user.status} /></TableCell>
                    <TableCell>
                      {new Date(user.created_at).toLocaleDateString()}
                    </TableCell>
                    <TableCell>
                      {user.email_verification_expires_at
                        ? new Date(user.email_verification_expires_at).toLocaleString()
                        : '—'}
                    </TableCell>
                    <TableCell>
                      {user.referred_by_member_name || '-'}
                    </TableCell>
                    <TableCell>
                      <div className='flex gap-2 justify-between'>

                        <Select
                          value=""
                          onValueChange={(action) => handleActionSelect(user, action)}
                          disabled={actionLoading === user.id || resendLoading === user.id}
                        >
                          <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
                            <SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Select Action'} />
                          </SelectTrigger>
                          <SelectContent>
                            {user.status === 'rejected' ? (
                              <SelectItem value="reactivate">Reactivate</SelectItem>
                            ) : user.status === 'pending_email' ? (
                              <>
                                {hasPermission('users.approve') && (
                                  <SelectItem value="bypass_validate">Bypass & Validate</SelectItem>
                                )}
                                {hasPermission('users.approve') && (
                                  <SelectItem value="resend_email">Resend Email</SelectItem>
                                )}
                                {/* {hasPermission('users.approve') && (
                                  <SelectItem value="reject">Reject</SelectItem>
                                )} */}
                              </>
                            ) : user.status === 'payment_pending' ? (
                              <>
                                {hasPermission('subscriptions.activate') && (
                                  <SelectItem value="activate_payment">Activate Payment</SelectItem>
                                )}
                                {/* {hasPermission('users.approve') && (
                                  <SelectItem value="reject">Reject</SelectItem>
                                )} */}
                              </>
                            ) : (
                              <>
                                {hasPermission('users.approve') && (
                                  <SelectItem value="validate">Validate</SelectItem>
                                )}
                                {/* {hasPermission('users.approve') && (
                                  <SelectItem value="reject">Reject</SelectItem>
                                )} */}
                              </>
                            )}
                          </SelectContent>
                        </Select>
                        {/* view registration */}
                        <Button
                          onClick={() => handleRegistrationDialog(user)}
                          disabled={actionLoading === user.id}
                          size="sm"
                          variant="outline"
                          className="border-2 border-primary text-primary hover:bg-red-50 dark:hover:bg-red-500/10"
                        >
                          <FileText className="size-4" />
                        </Button>

                        {/* reject */}
                        {hasPermission('users.approve') && (
                          <Button
                            onClick={() => handleRejectUser(user)}
                            disabled={actionLoading === user.id}
                            size="sm"
                            variant="outline"
                            className="border-2 mr-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                          >
                            X
                          </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-brand-purple " 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-brand-purple " 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-[var(--neutral-800)] mx-auto mb-6" />
          <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            No Pending Validations
          </h3>
          <p className="text-brand-purple " 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}
      />

      {/* Validation Confirmation Dialog */}
      <ConfirmationDialog
        open={confirmDialogOpen}
        onOpenChange={setConfirmDialogOpen}
        onConfirm={confirmAction}
        loading={actionLoading !== null}
        {...getActionMessage()}
      />

      {/* Rejection Dialog */}
      <RejectionDialog
        open={rejectionDialogOpen}
        onOpenChange={setRejectionDialogOpen}
        onConfirm={confirmRejection}
        user={userToReject}
        loading={actionLoading !== null}
      />

      {/* View Registration Dialog */}
      <ViewRegistrationDialog
        open={viewRegistrationDialogOpen}
        onOpenChange={setViewRegistrationDialogOpen}
        user={selectedUserForView}
      />
    </>
  );
};

export default AdminValidations;