/**
 * Quick Actions Sidebar Component
 */

import { useEffect, useMemo, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { UserPlus, Eye, CheckCircle, XCircle, Share2, Pause, Play, AlertCircle } from 'lucide-react';
import { getSharedRecipients, type SharedRecipient } from '@/services/summaryApi';
import { useAuth } from '@/contexts/AuthContext';
import notificationApi, { type Notification } from '@/services/notificationApi';
import { ProcessDetailsCard } from './claim-cards';
import { isClaimManagementRequest } from '@/utils/claimRequestUtils';
import { determineUserRole, getRoleBasedVisibility, mapToClaimManagementRequest } from '@/utils/claimDataMapper';

interface QuickActionsSidebarProps {
  request: any;
  isInitiator: boolean;
  isSpectator: boolean;
  currentApprovalLevel: any;
  onAddApprover: () => void;
  onAddSpectator: () => void;
  onApprove: () => void;
  onReject: () => void;
  onPause?: () => void;
  onResume?: () => void;
  onRetrigger?: () => void;
  summaryId?: string | null;
  refreshTrigger?: number; // Trigger to refresh shared recipients list
  pausedByUserId?: string; // User ID of the approver who paused (kept for backwards compatibility)
  currentUserId?: string; // Current user's ID (kept for backwards compatibility)
  apiRequest?: any;
  onEditClaimAmount?: () => void;
}

export function QuickActionsSidebar({
  request,
  isInitiator,
  isSpectator,
  currentApprovalLevel,
  onAddApprover,
  onAddSpectator,
  onApprove,
  onReject,
  onPause,
  onResume,
  onRetrigger,
  summaryId,
  refreshTrigger,
  pausedByUserId: pausedByUserIdProp,
  currentUserId: currentUserIdProp,
  apiRequest,
  onEditClaimAmount,
}: QuickActionsSidebarProps) {
  const { user } = useAuth();
  const [sharedRecipients, setSharedRecipients] = useState<SharedRecipient[]>([]);
  const [loadingRecipients, setLoadingRecipients] = useState(false);
  const [hasRetriggerNotification, setHasRetriggerNotification] = useState(false);
  const isClosed = request?.status === 'closed';
  const isPaused = request?.pauseInfo?.isPaused || false;
  const pausedByUserId = pausedByUserIdProp || request?.pauseInfo?.pausedBy?.userId;
  const currentUserId = currentUserIdProp || (user as any)?.userId || '';
  
  // Both approver AND initiator can pause (when not already paused and not closed)
  const canPause = !isPaused && !isClosed && (currentApprovalLevel || isInitiator);
  
  // Resume: Can be done by the person who paused OR by both initiator and approver
  const canResume = isPaused && onResume && (currentApprovalLevel || isInitiator);
  
  // Retrigger: Only for initiator when approver paused (initiator asks approver to resume)
  const canRetrigger = isPaused && isInitiator && pausedByUserId && pausedByUserId !== currentUserId && onRetrigger;
  
  // Check for retrigger notification (initiator requested resume)
  // ONLY check when: 1) Request is paused, 2) Current user is an approver
  // This avoids unnecessary API calls for non-paused requests or initiators
  useEffect(() => {
    // Skip check if request is not paused or user is not an approver
    if (!isPaused || !currentApprovalLevel || !request?.requestId) {
      setHasRetriggerNotification(false);
      return;
    }
    
    const checkRetriggerNotification = async () => {
      try {
        const response = await notificationApi.list({ page: 1, limit: 50, unreadOnly: true }); // Only unread
        const notifications: Notification[] = response.data?.notifications || [];
        
        // Check if there's an UNREAD pause_retrigger_request notification for this request
        const hasRetrigger = notifications.some(
          (notif: Notification) => 
            notif.requestId === request.requestId && 
            notif.notificationType === 'pause_retrigger_request'
        );
        
        setHasRetriggerNotification(hasRetrigger);
      } catch (error) {
        console.error('Failed to check retrigger notifications:', error);
        setHasRetriggerNotification(false);
      }
    };
    
    checkRetriggerNotification();
  }, [isPaused, currentApprovalLevel, request?.requestId, refreshTrigger]); // Only when paused state or approver status changes

  // Fetch shared recipients when request is closed and summaryId is available
  useEffect(() => {
    const fetchSharedRecipients = async () => {
      if (!isClosed || !summaryId || !isInitiator) {
        setSharedRecipients([]);
        return;
      }

      try {
        setLoadingRecipients(true);
        const recipients = await getSharedRecipients(summaryId);
        setSharedRecipients(recipients);
      } catch (error) {
        console.error('Failed to fetch shared recipients:', error);
        setSharedRecipients([]);
      } finally {
        setLoadingRecipients(false);
      }
    };

    fetchSharedRecipients();
  }, [isClosed, summaryId, isInitiator, refreshTrigger]);

  // Claim details for sidebar (only for claim management requests)
  const claimSidebarData = useMemo(() => {
    if (!apiRequest || !isClaimManagementRequest(apiRequest)) return null;
    const claimRequest = mapToClaimManagementRequest(apiRequest, currentUserId);
    if (!claimRequest) return null;
    const userRole = determineUserRole(apiRequest, currentUserId);
    const visibility = getRoleBasedVisibility(userRole);
    return { claimRequest, visibility };
  }, [apiRequest, currentUserId]);

  return (
    <div className="space-y-4 sm:space-y-6">
      {/* Quick Actions Card - Hide entire card for spectators and closed requests */}
      {!isSpectator && request.status !== 'closed' && (
        <Card data-testid="quick-actions-card">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm sm:text-base">Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {/* Add Approver */}
            {isInitiator && request.status !== 'closed' && (
              <Button
                variant="outline"
                className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
                onClick={onAddApprover}
                data-testid="add-approver-button"
              >
                <UserPlus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                Add Approver
              </Button>
            )}

            {/* Add Spectator */}
            {request.status !== 'closed' && (
              <Button
                variant="outline"
                className="w-full justify-start gap-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:text-gray-900 h-9 sm:h-10 text-xs sm:text-sm"
                onClick={onAddSpectator}
                data-testid="add-spectator-button"
              >
                <Eye className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                Add Spectator
              </Button>
            )}

            {/* Pause/Resume Button */}
            {canPause && onPause && (
              <Button
                variant="outline"
                className="w-full justify-start gap-2 bg-white text-orange-700 border-orange-300 hover:bg-orange-50 hover:text-orange-900 h-9 sm:h-10 text-xs sm:text-sm"
                onClick={onPause}
                data-testid="pause-workflow-button"
              >
                <Pause className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                Pause Workflow
              </Button>
            )}

            {canResume && (
              <Button
                variant="outline"
                className="w-full justify-start gap-2 bg-white text-green-700 border-green-300 hover:bg-green-50 hover:text-green-900 h-9 sm:h-10 text-xs sm:text-sm"
                onClick={onResume}
                data-testid="resume-workflow-button"
              >
                <Play className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                Resume Workflow
              </Button>
            )}

            {canRetrigger && (
              <Button
                variant="outline"
                className="w-full justify-start gap-2 bg-white text-orange-700 border-orange-300 hover:bg-orange-50 hover:text-orange-900 h-9 sm:h-10 text-xs sm:text-sm"
                onClick={onRetrigger}
                data-testid="request-resume-button"
              >
                <AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                Request Resume
              </Button>
            )}

            {/* Approve/Reject Buttons */}
            <div className="pt-3 sm:pt-4 space-y-2">
              {currentApprovalLevel && !isPaused && (
                <>
                  <Button
                    className="w-full bg-green-600 hover:bg-green-700 text-white h-9 sm:h-10 text-xs sm:text-sm"
                    onClick={onApprove}
                    data-testid="approve-request-button"
                  >
                    <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
                    Approve Request
                  </Button>
                  <Button
                    variant="destructive"
                    className="w-full h-9 sm:h-10 text-xs sm:text-sm"
                    onClick={onReject}
                    data-testid="reject-request-button"
                  >
                    <XCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" />
                    Reject Request
                  </Button>
                </>
              )}
              {isPaused && (
                <div className="bg-orange-50 border border-orange-200 rounded-lg p-3 text-center">
                  {/* Different messages based on who paused, who is viewing, and if retrigger was sent */}
                  {pausedByUserId === currentUserId ? (
                    // User viewing is the one who paused
                    <>
                      <p className="text-xs text-orange-800 font-medium flex items-center justify-center gap-1.5">
                        {hasRetriggerNotification && <AlertCircle className="w-3.5 h-3.5" />}
                        {hasRetriggerNotification ? 'Initiator has requested you to resume' : 'You paused this workflow'}
                      </p>
                      <p className="text-xs text-orange-600 mt-1">
                        {hasRetriggerNotification ? 'Please review and resume if appropriate' : 'Click "Resume Workflow" to continue'}
                      </p>
                    </>
                  ) : currentApprovalLevel && pausedByUserId !== currentUserId && hasRetriggerNotification ? (
                    // Approver viewing, and initiator sent retrigger
                    <>
                      <p className="text-xs text-orange-800 font-medium flex items-center justify-center gap-1.5">
                        <AlertCircle className="w-3.5 h-3.5" />
                        Initiator has requested resume
                      </p>
                      <p className="text-xs text-orange-600 mt-1">Please review and resume if appropriate</p>
                    </>
                  ) : currentApprovalLevel && pausedByUserId !== currentUserId ? (
                    // Approver viewing but someone else paused (initiator or another approver)
                    <>
                      <p className="text-xs text-orange-800 font-medium">Workflow is paused</p>
                      <p className="text-xs text-orange-600 mt-1">You can resume to continue approval</p>
                    </>
                  ) : isInitiator && pausedByUserId && pausedByUserId !== currentUserId ? (
                    // Initiator viewing, approver paused
                    <>
                      <p className="text-xs text-orange-800 font-medium">Approver has paused this workflow</p>
                      <p className="text-xs text-orange-600 mt-1">
                        {canRetrigger ? 'Click "Request Resume" to notify approver' : 'Resume request sent - Waiting for approver'}
                      </p>
                    </>
                  ) : (
                    // Default message
                    <>
                      <p className="text-xs text-orange-800 font-medium">Workflow is paused</p>
                      <p className="text-xs text-orange-600 mt-1">Actions are disabled until resumed</p>
                    </>
                  )}
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Spectators Card */}
      <Card data-testid="spectators-card">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm sm:text-base">Spectators</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {request.spectators && request.spectators.length > 0 ? (
            request.spectators.map((spectator: any, index: number) => (
              <div key={index} className="flex items-center gap-3" data-testid={`spectator-${index}`}>
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="bg-blue-100 text-blue-800 text-xs font-semibold">
                    {spectator.avatar}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-gray-900">{spectator.name}</p>
                  <p className="text-xs text-gray-500 truncate">{spectator.role}</p>
                </div>
              </div>
            ))
          ) : (
            <div className="py-4 text-center">
              <p className="text-sm text-gray-500">No spectators added</p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Shared Recipients Card - Only for closed requests */}
      {isClosed && isInitiator && (
        <Card data-testid="shared-recipients-card">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm sm:text-base flex items-center gap-2">
              <Share2 className="w-4 h-4" />
              Summary Shared With
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {loadingRecipients ? (
              <div className="py-4 text-center">
                <p className="text-sm text-gray-500">Loading...</p>
              </div>
            ) : sharedRecipients.length > 0 ? (
              sharedRecipients.map((recipient, index) => {
                const avatar = (recipient.displayName || 'NA')
                  .split(' ')
                  .map((s: string) => s[0])
                  .join('')
                  .slice(0, 2)
                  .toUpperCase();
                
                return (
                  <div key={recipient.userId || index} className="flex items-center gap-3" data-testid={`shared-recipient-${index}`}>
                    <Avatar className="h-8 w-8">
                      <AvatarFallback className="bg-green-100 text-green-800 text-xs font-semibold">
                        {avatar}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-gray-900">{recipient.displayName}</p>
                      <p className="text-xs text-gray-500 truncate">{recipient.email}</p>
                      {recipient.isRead && (
                        <p className="text-xs text-green-600 mt-0.5">Viewed</p>
                      )}
                    </div>
                  </div>
                );
              })
            ) : (
              <div className="py-4 text-center">
                <p className="text-sm text-gray-500">Summary not shared yet</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Process details anchored at the bottom of the action sidebar for claim workflows */}
      {claimSidebarData && (
        <ProcessDetailsCard
          ioDetails={claimSidebarData.claimRequest.ioDetails}
          dmsDetails={claimSidebarData.claimRequest.dmsDetails}
          claimAmount={{
            amount: claimSidebarData.claimRequest.claimAmount.closed || claimSidebarData.claimRequest.claimAmount.estimated || 0,
          }}
          estimatedBudgetBreakdown={claimSidebarData.claimRequest.proposalDetails?.costBreakup}
          closedExpensesBreakdown={claimSidebarData.claimRequest.activityInfo?.closedExpensesBreakdown}
          visibility={claimSidebarData.visibility}
          onEditClaimAmount={onEditClaimAmount}
        />
      )}
    </div>
  );
}