import { AlertTriangle, Calendar, Plus, Eye, XCircle } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { useState, useEffect } from 'react';
import { API } from '@/api/API';
import { formatDateTime } from '@/components/ui/utils';
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { User } from '@/lib/mock-data';
import { toast } from 'sonner';
import { formatTerminationStatusLabel } from '@/lib/terminationDisplay';

interface TerminationPageProps {
  currentUser: User | null;
  onViewDetails: (id: string) => void;
}

const getSeverityColor = (severity: string) => {
  switch (severity) {
    case 'Critical':
      return 'bg-red-100 text-red-700 border-red-300';
    case 'High':
      return 'bg-orange-100 text-orange-700 border-orange-300';
    case 'Medium':
      return 'bg-yellow-100 text-yellow-700 border-yellow-300';
    case 'Low':
      return 'bg-blue-100 text-blue-700 border-blue-300';
    default:
      return 'bg-slate-100 text-slate-700 border-slate-300';
  }
};

const getStatusColor = (status: string) => {
  if (status.includes('Approved') || status.includes('Terminated')) return 'bg-green-100 text-green-700 border-green-300';
  if (status.includes('Review') || status.includes('Pending')) return 'bg-yellow-100 text-yellow-700 border-yellow-300';
  if (status.includes('Rejected')) return 'bg-red-100 text-red-700 border-red-300';
  return 'bg-blue-100 text-blue-700 border-blue-300';
};

const formatStatus = formatTerminationStatusLabel;

export function TerminationPage({ currentUser, onViewDetails }: TerminationPageProps) {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dealers, setDealers] = useState<any[]>([]);
  const [selectedDealerId, setSelectedDealerId] = useState('');
  const [dialogDataLoading, setDialogDataLoading] = useState(false);
  const [dealerCode, setDealerCode] = useState('');
  const [autoFilledData, setAutoFilledData] = useState<any>(null);
  const [terminations, setTerminations] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [paginationMeta, setPaginationMeta] = useState<any>(null);
  const [activeTab, setActiveTab] = useState('all');
  const itemsPerPage = 10;
  const [formData, setFormData] = useState({
    terminationCategory: '',
    reason: '',
    proposedLwd: '',
    comments: '',
    document: null as File | null
  });

  const fetchTerminations = async () => {
    setLoading(true);
    try {
      const response = await API.getTerminations({
        page: currentPage,
        limit: itemsPerPage,
        status: activeTab === 'all' ? undefined : activeTab
      });
      const data = response.data as any;
      if (data?.success) {
        setTerminations(data.terminations);
        setPaginationMeta(data.meta);
      }
    } catch (error) {
      console.error('Error fetching terminations:', error);
      toast.error('Failed to fetch termination requests');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchTerminations();
  }, [currentPage, activeTab]);

  const handleTabChange = (val: string) => {
    setActiveTab(val);
    setCurrentPage(1);
  };

  useEffect(() => {
    if (!isDialogOpen || !canCreateTermination) return;
    let cancelled = false;

    (async () => {
      try {
        setDialogDataLoading(true);
        const response = await API.getDealers({ onboarded: 'true', activeOnly: 'true' });
        const data = response.data as any;
        if (!cancelled && data?.success) {
          const activeDealers = (Array.isArray(data.data) ? data.data : []).filter((dealer: any) => {
            const dealerStatus = String(dealer?.status || '').toLowerCase();
            const userStatus = String(dealer?.user?.status || '').toLowerCase();
            return dealerStatus === 'active' && dealer?.user?.isActive && userStatus === 'active';
          });
          setDealers(activeDealers);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Error fetching dealers:', error);
          toast.error('Failed to load dealer list');
        }
      } finally {
        if (!cancelled) {
          setDialogDataLoading(false);
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [isDialogOpen]);

  const mapDealerToFormData = (dealer: any) => ({
    id: dealer.id,
    dealerId: dealer.id,
    dealerCode: dealer.dealerCode?.dealerCode || '',
    legalName: dealer.legalName || 'N/A',
    businessName: dealer.businessName || 'N/A',
    gstNumber: dealer.gstNumber || 'N/A',
    address: dealer.registeredAddress || dealer.application?.preferredLocation || 'N/A',
    city: dealer.application?.city || 'N/A',
    state: dealer.application?.state || 'N/A',
    email: dealer.user?.email || 'N/A',
    phoneNumber: dealer.user?.mobileNumber || 'N/A'
  });

  const handleDealerSelect = (dealerId: string) => {
    setSelectedDealerId(dealerId);
    const dealer = dealers.find((row: any) => String(row.id) === String(dealerId));
    if (!dealer) {
      setDealerCode('');
      setAutoFilledData(null);
      return;
    }

    const mappedDealer = mapDealerToFormData(dealer);
    setDealerCode(mappedDealer.dealerCode);
    setAutoFilledData(mappedDealer);
  };

  const handleDealerCodeChange = (code: string) => {
    setDealerCode(code);
    const normalizedCode = code.trim().toLowerCase();

    if (!normalizedCode) {
      setSelectedDealerId('');
      setAutoFilledData(null);
      return;
    }

    const matchedDealer = dealers.find((dealer: any) =>
      String(dealer.dealerCode?.dealerCode || '').toLowerCase() === normalizedCode
    );

    if (!matchedDealer) {
      setSelectedDealerId('');
      setAutoFilledData(null);
      return;
    }

    setSelectedDealerId(String(matchedDealer.id));
    setAutoFilledData(mapDealerToFormData(matchedDealer));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!autoFilledData) {
      toast.error('Please select a dealer');
      return;
    }

    try {
      const payload = {
        dealerId: autoFilledData.dealerId || autoFilledData.id,
        category: formData.terminationCategory,
        reason: formData.reason,
        proposedLwd: formData.proposedLwd,
        comments: formData.comments
      };

      if (!payload.dealerId) {
        toast.error('Dealer record not found for the selected dealer');
        return;
      }

      const response = await API.createTermination(payload);
      const data = response.data as any;
      if (data?.success) {
        // Use termination.id which is the UUID
        const newId = data.termination?.id;
        
        // Upload document if selected
        if (newId && formData.document) {
          const docFormData = new FormData();
          docFormData.append('file', formData.document);
          docFormData.append('documentType', 'Termination Recommendation'); 
          docFormData.append('stage', 'Submitted');
          
          try {
            await API.uploadTerminationDocument(newId, docFormData);
            toast.success('Termination request and supporting document submitted');
          } catch (docErr) {
            console.error('Error uploading supporting document:', docErr);
            toast.warning('Termination created, but document upload failed. You can upload it from the details page.');
          }
        } else {
          toast.success('Termination request submitted successfully');
        }

        setIsDialogOpen(false);
        fetchTerminations();
        // Reset form
        setSelectedDealerId('');
        setDealerCode('');
        setDealers([]);
        setAutoFilledData(null);
        setFormData({
          terminationCategory: '',
          reason: '',
          proposedLwd: '',
          comments: '',
          document: null
        });
      }
    } catch (error: any) {
      console.error('Error submitting termination:', error);
      toast.error(error.response?.data?.message || 'Failed to submit termination request');
    }
  };

  const allowedRoles = ['DD Lead', 'ASM', 'DD Admin', 'DD AM', 'Super Admin'];
  const canCreateTermination = currentUser?.role && allowedRoles.includes(currentUser.role);

  // Map terminations to tab-specific views (already filtered by backend, but need variables for render)
  const openRequests = activeTab === 'open' || activeTab === 'all' ? terminations : [];
  const completedRequests = activeTab === 'completed' || activeTab === 'all' ? terminations : [];

  return (
    <div className="space-y-6">
      {/* Warning Alert */}
      <Alert className="border-red-200 bg-red-50">
        <AlertTriangle className="h-4 w-4 text-red-600" />
        <AlertTitle className="text-red-900">Restricted Access</AlertTitle>
        <AlertDescription className="text-red-700">
          This section contains sensitive information. All termination actions are logged and require proper authorization.
        </AlertDescription>
      </Alert>

      {/* Header Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>All Cases</CardDescription>
            <CardTitle className="text-3xl">{paginationMeta?.total || 0}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-slate-600">Total Cases</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Open</CardDescription>
            <CardTitle className="text-3xl text-orange-600">{activeTab === 'open' ? paginationMeta?.total || 0 : '...'}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-slate-600">Requires Your Action</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Completed</CardDescription>
            <CardTitle className="text-3xl text-green-600">{activeTab === 'completed' ? paginationMeta?.total || 0 : '...'}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-slate-600">Finalized</p>
          </CardContent>
        </Card>
      </div>

      {/* Main Content */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Termination Requests</CardTitle>
              <CardDescription>
                Manage dealer termination proceedings and legal compliance
              </CardDescription>
            </div>
            {canCreateTermination && (
              <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                <DialogTrigger asChild>
                  <Button className="bg-red-600 hover:bg-red-700">
                    <Plus className="w-4 h-4 mr-2" />
                    Create Termination Request
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
                  <DialogHeader>
                    <DialogTitle>Create Termination Request</DialogTitle>
                    <DialogDescription>
                      Fill in the details to create a new termination request
                    </DialogDescription>
                  </DialogHeader>
                  <form onSubmit={handleSubmit} className="space-y-6">
                    {/* Dealer selection */}
                    <div className="space-y-2">
                      <Label>Select Dealer *</Label>
                      <Select value={selectedDealerId} onValueChange={handleDealerSelect} disabled={dialogDataLoading}>
                        <SelectTrigger>
                          <SelectValue placeholder={dialogDataLoading ? 'Loading dealers...' : 'Select dealer'} />
                        </SelectTrigger>
                        <SelectContent>
                          {dealers.map((dealer: any) => (
                            <SelectItem key={dealer.id} value={String(dealer.id)}>
                              {dealer.legalName || dealer.businessName || 'Unnamed Dealer'} - {dealer.dealerCode?.dealerCode || 'No Code'}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* Optional dealer code lookup */}
                    <div className="space-y-2">
                      <Label htmlFor="dealerCode">Dealer Code *</Label>
                      <Input
                        id="dealerCode"
                        value={dealerCode}
                        onChange={(e) => handleDealerCodeChange(e.target.value)}
                        placeholder="Type dealer code to auto-select"
                        required
                      />
                    </div>

                    {/* Auto-filled data */}
                    {autoFilledData && (
                      <div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
                        <div>
                          <Label className="text-slate-600">Dealer Name (Legal)</Label>
                          <p>{autoFilledData.legalName || 'N/A'}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">Business Name</Label>
                          <p>{autoFilledData.businessName || 'N/A'}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">GST</Label>
                          <p>{autoFilledData.gstNumber || 'N/A'}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">Address</Label>
                          <p>{autoFilledData.address}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">City/State</Label>
                          <p>{autoFilledData.city}, {autoFilledData.state}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">Dealer Code</Label>
                          <p>{autoFilledData.dealerCode || 'N/A'}</p>
                        </div>
                        <div>
                          <Label className="text-slate-600">Contact</Label>
                          <p>{autoFilledData.email} / {autoFilledData.phoneNumber}</p>
                        </div>
                      </div>
                    )}
                    {/* Date fields */}
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label>Termination Category *</Label>
                        <Select value={formData.terminationCategory} onValueChange={(value) => setFormData({...formData, terminationCategory: value})}>
                          <SelectTrigger>
                            <SelectValue placeholder="Select termination category" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Working Capital">Working Capital</SelectItem>
                            <SelectItem value="Performance Issues">Performance Issues</SelectItem>
                            <SelectItem value="Unethical Practice">Unethical Practice</SelectItem>
                            <SelectItem value="Unforeseen Circumstances">Unforeseen Circumstances</SelectItem>
                            <SelectItem value="Others">Others</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Proposed LWD *</Label>
                        <Input
                          type="date"
                          value={formData.proposedLwd}
                          onChange={(e) => setFormData({...formData, proposedLwd: e.target.value})}
                          required
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="reason">Termination Reason *</Label>
                      <Input
                        id="reason"
                        value={formData.reason}
                        onChange={(e) => setFormData({...formData, reason: e.target.value})}
                        placeholder="Primary reason for termination"
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="comments">Additional Comments *</Label>
                      <Textarea
                        id="comments"
                        value={formData.comments}
                        onChange={(e) => setFormData({...formData, comments: e.target.value})}
                        placeholder="Detailed observations and justification"
                        rows={4}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="document">Upload Supporting Document</Label>
                      <Input
                        id="document"
                        type="file"
                        onChange={(e) => setFormData({...formData, document: e.target.files?.[0] || null})}
                      />
                    </div>

                    <DialogFooter>
                      <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                        Cancel
                      </Button>
                      <Button type="submit" className="bg-red-600 hover:bg-red-700">
                        Submit Request
                      </Button>
                    </DialogFooter>
                  </form>
                </DialogContent>
              </Dialog>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
            <TabsList>
              <TabsTrigger value="all">All Cases</TabsTrigger>
              <TabsTrigger value="open">Open</TabsTrigger>
              <TabsTrigger value="completed">Completed</TabsTrigger>
            </TabsList>
            
            <TabsContent value="all" className="mt-6">
              <div className="space-y-4">
                {loading ? (
                  <div className="text-center py-12">Loading requests...</div>
                ) : terminations.length > 0 ? (
                  terminations.map((request: any) => (
                    <Card key={request.id} className="border-slate-200">
                      <CardContent className="pt-6">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start gap-4 flex-1">
                            <div className="p-3 bg-red-100 rounded-lg">
                              <XCircle className="w-6 h-6 text-red-600" />
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-3 mb-2">
                                <h3 className="text-lg font-bold">{request.requestId || (request.dealer?.dealerCode?.code || 'N/A')}</h3>
                                
                                <Badge className={getSeverityColor(request.severity || 'Medium')}>
                                  {request.severity || 'Normal'}
                                </Badge>
                                <Badge className={getStatusColor(request.status)}>
                                  {formatStatus(request.status)}
                                </Badge>
                              </div>
                              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                <div>
                                  <p className="text-slate-600">Dealer Name</p>
                                  <p>{request.dealer?.businessName || 'N/A'}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Location</p>
                                  <p>{request.dealer?.registeredAddress || 'N/A'}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Category</p>
                                  <p>{request.category}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Current Stage</p>
                                  <p>{formatStatus(request.currentStage)}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Proposed LWD</p>
                                  <div className="flex items-center gap-1">
                                    <Calendar className="w-4 h-4 text-slate-500" />
                                    <p>{request.proposedLwd}</p>
                                  </div>
                                </div>
                                <div>
                                  <p className="text-slate-600">Submitted On</p>
                                  <p>{formatDateTime(request.createdAt)}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <Button 
                            size="sm" 
                            variant="outline"
                            onClick={() => onViewDetails(request.id)}
                            className="ml-4"
                          >
                            <Eye className="w-4 h-4 mr-2" />
                            View Details
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <div className="text-center py-12 text-slate-500">
                    <p>No termination requests found</p>
                  </div>
                )}
              </div>
            </TabsContent>
            
            {/* Open Tab */}
            <TabsContent value="open" className="mt-6">
              <div className="space-y-4">
                {openRequests.length > 0 ? (
                  openRequests.map((request: any) => (
                    <Card key={request.id} className="border-slate-200">
                      <CardContent className="pt-6">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start gap-4 flex-1">
                            <div className="p-3 bg-orange-100 rounded-lg">
                              <AlertTriangle className="w-6 h-6 text-orange-600" />
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-3 mb-2">
                                <h3 className="text-lg font-bold">{request.requestId || (request.dealer?.dealerCode?.code || 'N/A')}</h3>
                                
                                <Badge className={getStatusColor(request.status)}>
                                  {formatStatus(request.status)}
                                </Badge>
                              </div>
                              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                <div>
                                  <p className="text-slate-600">Dealer Name</p>
                                  <p>{request.dealer?.businessName}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Reason</p>
                                  <p className="truncate">{request.reason}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Current Stage</p>
                                  <p>{formatStatus(request.currentStage)}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Submitted On</p>
                                  <p>{formatDateTime(request.createdAt)}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <Button 
                            size="sm" 
                            variant="outline"
                            onClick={() => onViewDetails(request.id)}
                            className="ml-4"
                          >
                            <Eye className="w-4 h-4 mr-2" />
                            View Details
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <div className="text-center py-12 text-slate-500">
                    <XCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
                    <p>No requests requiring your action</p>
                  </div>
                )}
              </div>
            </TabsContent>
            
            {/* Completed Tab */}
            <TabsContent value="completed" className="mt-6">
              <div className="space-y-4">
                {completedRequests.length > 0 ? (
                  completedRequests.map((request: any) => (
                    <Card key={request.id} className="border-slate-200">
                      <CardContent className="pt-6">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start gap-4 flex-1">
                            <div className="p-3 bg-green-100 rounded-lg">
                              <XCircle className="w-6 h-6 text-green-600" />
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-3 mb-2">
                                <h3 className="text-lg font-bold">{request.requestId || (request.dealer?.dealerCode?.code || 'N/A')}</h3>
                                
                                <Badge className={getStatusColor(request.status)}>
                                  {formatStatus(request.status)}
                                </Badge>
                              </div>
                              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                <div>
                                  <p className="text-slate-600">Dealer Name</p>
                                  <p>{request.dealer?.businessName}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Closed On</p>
                                  <p>{formatDateTime(request.updatedAt)}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">Termination Category</p>
                                  <p>{request.category}</p>
                                </div>
                                <div>
                                  <p className="text-slate-600">LWD</p>
                                  <p>{request.proposedLwd}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <Button 
                            size="sm" 
                            variant="outline"
                            onClick={() => onViewDetails(request.id)}
                            className="ml-4"
                          >
                            <Eye className="w-4 h-4 mr-2" />
                            View Details
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <div className="text-center py-12 text-slate-500">
                    <XCircle className="w-12 h-12 mx-auto mb-4 text-slate-400" />
                    <p>No completed terminations to display</p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>

          {paginationMeta && paginationMeta.totalPages > 1 && (
            <div className="py-4 border-t flex justify-center bg-white rounded-b-lg">
              <Pagination>
                <PaginationContent>
                  <PaginationItem>
                    <PaginationPrevious 
                      onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                      className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
                    />
                  </PaginationItem>
                  
                  {[...Array(paginationMeta.totalPages)].map((_, i) => {
                    const pageNum = i + 1;
                    if (
                      pageNum === 1 || 
                      pageNum === paginationMeta.totalPages || 
                      (pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
                    ) {
                      return (
                        <PaginationItem key={pageNum}>
                          <PaginationLink 
                            isActive={currentPage === pageNum}
                            onClick={() => setCurrentPage(pageNum)}
                            className="cursor-pointer"
                          >
                            {pageNum}
                          </PaginationLink>
                        </PaginationItem>
                      );
                    }
                    if (
                      (pageNum === 2 && currentPage > 3) || 
                      (pageNum === paginationMeta.totalPages - 1 && currentPage < paginationMeta.totalPages - 2)
                    ) {
                      return <PaginationItem key={pageNum}><PaginationEllipsis /></PaginationItem>;
                    }
                    return null;
                  })}

                  <PaginationItem>
                    <PaginationNext 
                      onClick={() => setCurrentPage(prev => Math.min(paginationMeta.totalPages, prev + 1))}
                      className={currentPage === paginationMeta.totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
                    />
                  </PaginationItem>
                </PaginationContent>
              </Pagination>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
