import { Lock, Clock, Unlock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

interface LockState {
  submissionId: string;
  expiresAt: Date;
}

interface QueueStats {
  pendingCount: number;
  assignedToMe: number;
  avgWaitHours: number;
}

interface LockStatusDisplayProps {
  currentLock: LockState | null;
  queueStats: QueueStats | null;
  isLoading: boolean;
  onExtendLock: (submissionId: string) => Promise<boolean>;
  onReleaseLock: (submissionId: string) => Promise<boolean>;
  getTimeRemaining: () => number | null;
  getLockProgress: () => number;
}

/**
 * LockStatusDisplay Component
 * 
 * Displays lock timer, progress bar, and lock management controls.
 * Shows "Claim Next" button when no lock is active, or lock controls when locked.
 */
export const LockStatusDisplay = ({
  currentLock,
  queueStats,
  isLoading,
  onExtendLock,
  onReleaseLock,
  getTimeRemaining,
  getLockProgress,
}: LockStatusDisplayProps) => {
  // Format milliseconds as MM:SS
  const formatLockTimer = (ms: number): string => {
    const minutes = Math.floor(ms / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  const timeRemaining = getTimeRemaining();
  const showExtendButton = timeRemaining !== null && timeRemaining < 5 * 60 * 1000;

  // If no active lock, show simple info message
  if (!currentLock) {
    return (
      <div className="flex flex-col gap-2 min-w-[200px]">
        <div className="text-sm text-muted-foreground">
          No submission currently claimed. Claim a submission below to start reviewing.
        </div>
      </div>
    );
  }

  // Active lock - show timer and controls
  return (
    <div className="flex flex-col gap-2 min-w-[200px]">
      {/* Lock Timer */}
      <div className="flex items-center gap-2 text-sm">
        <Lock className="w-4 h-4 text-amber-500" />
        <span className="font-medium">
          Lock: {formatLockTimer(timeRemaining || 0)}
        </span>
      </div>

      {/* Progress Bar */}
      <Progress 
        value={getLockProgress()} 
        className="h-2"
      />

      {/* Extend Lock Button (show when < 5 min left) */}
      {showExtendButton && (
        <Button
          size="sm"
          variant="outline"
          onClick={() => onExtendLock(currentLock.submissionId)}
          disabled={isLoading}
          className="w-full"
        >
          <Clock className="w-4 h-4 mr-2" />
          Extend Lock
        </Button>
      )}

      {/* Release Lock Button */}
      <Button
        size="sm"
        variant="outline"
        onClick={() => onReleaseLock(currentLock.submissionId)}
        disabled={isLoading}
        className="w-full"
      >
        <Unlock className="w-4 h-4 mr-2" />
        Release Lock
      </Button>
    </div>
  );
};