/**
 * Recent Activity Section Component
 * Displays recent activity feed with pagination
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Activity, RefreshCw, ArrowRight } from 'lucide-react';
import { ActivityFeedItem, ActivityData } from '@/components/dashboard/ActivityFeedItem';
import { getPageNumbers } from '../../utils/dashboardCalculations';

interface RecentActivitySectionProps {
  isAdmin: boolean;
  recentActivity: ActivityData[];
  pagination: {
    page: number;
    totalPages: number;
    totalRecords: number;
  };
  refreshing: boolean;
  onPageChange: (page: number) => void;
  onRefresh: () => void;
  onNavigate?: (path: string) => void;
  currentUserId?: string;
  currentUserDisplayName?: string;
  currentUserEmail?: string;
}

export function RecentActivitySection({
  isAdmin,
  recentActivity,
  pagination,
  refreshing,
  onPageChange,
  onRefresh,
  onNavigate,
  currentUserId,
  currentUserDisplayName,
  currentUserEmail,
}: RecentActivitySectionProps) {
  return (
    <Card
      className="lg:col-span-1 shadow-md hover:shadow-lg transition-shadow flex flex-col overflow-hidden h-full"
      data-testid="recent-activity-section"
    >
      <CardHeader className="pb-3 sm:pb-4 flex-shrink-0">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
            <div className="p-2 sm:p-3 bg-blue-100 rounded-lg">
              <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
            </div>
            <div className="min-w-0">
              <CardTitle className="text-base sm:text-lg text-gray-900">Recent Activity</CardTitle>
              <CardDescription className="text-xs sm:text-sm text-gray-600 truncate">
                {isAdmin ? 'All workflow updates' : 'My workflow updates'}
              </CardDescription>
            </div>
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="text-blue-600 hover:bg-blue-50 font-medium flex-shrink-0 h-8 sm:h-9 px-2 sm:px-3 sm:min-w-[100px]"
            onClick={onRefresh}
            disabled={refreshing}
            data-testid="activity-refresh-button"
          >
            <RefreshCw className={`w-3 h-3 sm:w-4 sm:h-4 ${refreshing ? 'animate-spin' : ''}`} />
            <span className="hidden sm:inline ml-2 sm:w-[60px] sm:text-center">
              {refreshing ? 'Refreshing...' : 'Refresh'}
            </span>
          </Button>
        </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-2 sm:space-y-3">
          {recentActivity.length === 0 ? (
            <div className="text-center py-6 sm:py-8 text-muted-foreground" data-testid="no-recent-activity">
              <Activity className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-2 text-gray-400" />
              <p className="text-sm">No recent activity</p>
              <p className="text-xs">Activity will appear here once requests are processed</p>
            </div>
          ) : (
            recentActivity.map((activity) => (
              <ActivityFeedItem
                key={activity.activityId}
                activity={activity}
                currentUserId={currentUserId}
                currentUserDisplayName={currentUserDisplayName}
                currentUserEmail={currentUserEmail}
                onNavigate={(reqNum) => onNavigate?.(`request/${reqNum}`)}
                testId="dashboard-activity"
              />
            ))
          )}
        </div>
      </CardContent>

      {/* Pagination - Outside scrollable area, compact design */}
      {pagination.totalPages > 1 && recentActivity.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="activity-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-re-green text-white hover:bg-re-green/90' : ''}`}
                  data-testid={`activity-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="activity-pagination-next"
              >
                <ArrowRight className="h-3 w-3" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
}

