/**
 * Critical Alerts Section Component
 * Displays critical alerts with pagination
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Flame, CheckCircle, ArrowRight } from 'lucide-react';
import { CriticalAlertCard } from '@/components/dashboard/CriticalAlertCard';
import { CriticalRequest } from '@/services/dashboard.service';
import type { CriticalAlertData } from '@/components/dashboard/CriticalAlertCard';
import { getPageNumbers } from '../../utils/dashboardCalculations';

interface CriticalAlertsSectionProps {
  isAdmin: boolean;
  breachedRequests: (CriticalRequest | CriticalAlertData)[];
  pagination: {
    page: number;
    totalPages: number;
    totalRecords: number;
  };
  onPageChange: (page: number) => void;
  onNavigate?: (path: string) => void;
}

export function CriticalAlertsSection({
  isAdmin,
  breachedRequests,
  pagination,
  onPageChange,
  onNavigate,
}: CriticalAlertsSectionProps) {
  return (
    <Card
      className="lg:col-span-2 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
      data-testid="critical-alerts-section"
    >
      <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 sm:gap-3">
            <div className="p-2 sm:p-3 bg-red-100 rounded-lg">
              <Flame className="h-4 w-4 sm:h-5 sm:w-5 text-red-600" />
            </div>
            <div>
              <CardTitle className="text-base sm:text-lg text-gray-900">Critical Alerts</CardTitle>
              <CardDescription className="text-xs sm:text-sm text-gray-600">
                {isAdmin ? 'Organization-wide' : 'My requests'}
              </CardDescription>
            </div>
          </div>
          <Badge
            variant="destructive"
            className={`font-semibold text-xs sm:text-sm ${pagination.totalRecords > 0 ? 'animate-pulse' : ''}`}
            data-testid="critical-count-badge"
          >
            {pagination.totalRecords}
          </Badge>
        </div>
      </CardHeader>
      <CardContent
        className={`overflow-y-auto flex-1 p-4 ${pagination.totalPages > 1 ? 'max-h-[calc(100%-140px)]' : 'max-h-[calc(100%-80px)]'}`}
      >
        <div className="space-y-3 sm:space-y-4">
          {breachedRequests.length === 0 ? (
            <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-critical-alerts">
              <CheckCircle className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-green-500" />
              <p className="text-sm">No critical alerts</p>
              <p className="text-xs">All requests are within TAT</p>
            </div>
          ) : (
            breachedRequests.map((request) => (
              <CriticalAlertCard
                key={request.requestId}
                alert={request}
                onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
                testId="dashboard-critical-alert"
              />
            ))
          )}
        </div>
      </CardContent>

      {/* Pagination - Outside scrollable area, compact design */}
      {pagination.totalPages > 1 && breachedRequests.length > 0 && (
        <div className="border-t bg-gray-50 px-4 py-2 flex-shrink-0">
          <div className="flex flex-col gap-2">
            <div className="text-xs text-muted-foreground text-center">
              Page {pagination.page} of {pagination.totalPages} ({pagination.totalRecords} total)
            </div>
            <div className="flex items-center justify-center gap-1 flex-wrap">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onPageChange(pagination.page - 1)}
                disabled={pagination.page === 1}
                className="h-7 w-7 p-0"
                data-testid="critical-pagination-prev"
              >
                <ArrowRight className="h-3 w-3 rotate-180" />
              </Button>

              {getPageNumbers(pagination.page, pagination.totalPages, 3).map((pageNum) => (
                <Button
                  key={pageNum}
                  variant={pageNum === pagination.page ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => onPageChange(pageNum)}
                  className={`h-7 w-7 p-0 text-xs ${pageNum === pagination.page ? 'bg-red-600 text-white hover:bg-red-700' : ''}`}
                  data-testid={`critical-pagination-page-${pageNum}`}
                >
                  {pageNum}
                </Button>
              ))}

              <Button
                variant="outline"
                size="sm"
                onClick={() => onPageChange(pagination.page + 1)}
                disabled={pagination.page === pagination.totalPages}
                className="h-7 w-7 p-0"
                data-testid="critical-pagination-next"
              >
                <ArrowRight className="h-3 w-3" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
}

