import { memo, useCallback } from 'react';
import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { UserAvatar } from '@/components/ui/user-avatar';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { ValidationSummary } from '../ValidationSummary';
import { format } from 'date-fns';
import type { ModerationItem } from '@/types/moderation';
import type { ValidationResult } from '@/lib/entityValidationSchemas';

interface QueueItemHeaderProps {
  item: ModerationItem;
  isMobile: boolean;
  hasModeratorEdits: boolean;
  isLockedByOther: boolean;
  currentLockSubmissionId?: string;
  validationResult: ValidationResult | null;
  onValidationChange: (result: ValidationResult) => void;
}

const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
  switch (status) {
    case 'pending': return 'default';
    case 'approved': return 'secondary';
    case 'rejected': return 'destructive';
    case 'flagged': return 'destructive';
    case 'partially_approved': return 'outline';
    default: return 'outline';
  }
};

export const QueueItemHeader = memo(({
  item,
  isMobile,
  hasModeratorEdits,
  isLockedByOther,
  currentLockSubmissionId,
  validationResult,
  onValidationChange
}: QueueItemHeaderProps) => {
  const handleValidationChange = useCallback((result: ValidationResult) => {
    onValidationChange(result);
  }, [onValidationChange]);

  return (
    <>
      <div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
        <div className="flex items-center gap-2 flex-wrap">
          <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
            {item.type === 'review' ? (
              <>
                <MessageSquare className="w-3 h-3 mr-1" />
                Review
              </>
            ) : item.submission_type === 'photo' ? (
              <>
                <Image className="w-3 h-3 mr-1" />
                Photo
              </>
            ) : (
              <>
                <FileText className="w-3 h-3 mr-1" />
                Submission
              </>
            )}
          </Badge>
          <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
            {item.status === 'partially_approved' ? 'Partially Approved' : 
             item.status.charAt(0).toUpperCase() + item.status.slice(1)}
          </Badge>
          {hasModeratorEdits && (
            <Tooltip>
              <TooltipTrigger asChild>
                <Badge 
                  variant="secondary" 
                  className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 border border-blue-300 dark:border-blue-700"
                >
                  <Edit className="w-3 h-3 mr-1" />
                  Edited
                </Badge>
              </TooltipTrigger>
              <TooltipContent>
                <p>This submission has been modified by a moderator</p>
              </TooltipContent>
            </Tooltip>
          )}
          {item.status === 'partially_approved' && (
            <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
              <AlertCircle className="w-3 h-3 mr-1" />
              Needs Retry
            </Badge>
          )}
          {isLockedByOther && item.type === 'content_submission' && (
            <Badge variant="outline" className="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700">
              <Lock className="w-3 h-3 mr-1" />
              Locked by Another Moderator
            </Badge>
          )}
          {currentLockSubmissionId === item.id && item.type === 'content_submission' && (
            <Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
              <Lock className="w-3 h-3 mr-1" />
              Claimed by You
            </Badge>
          )}
          {item.submission_items && item.submission_items.length > 0 && (
            <ValidationSummary
              item={{
                item_type: item.submission_items[0].item_type,
                item_data: item.submission_items[0].item_data,
                id: item.submission_items[0].id,
              }}
              compact={true}
              onValidationChange={handleValidationChange}
            />
          )}
        </div>
        <Tooltip>
          <TooltipTrigger asChild>
            <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
              <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
              {format(new Date(item.created_at), isMobile ? 'MMM d, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
            </div>
          </TooltipTrigger>
          <TooltipContent>
            <p className="text-xs">Full timestamp:</p>
            <p className="font-mono">{item.created_at}</p>
          </TooltipContent>
        </Tooltip>
      </div>
      
      {item.user_profile && (
        <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
          <UserAvatar
            key={item.user_profile.avatar_url || `user-${item.user_id}`}
            avatarUrl={item.user_profile.avatar_url}
            fallbackText={item.user_profile.display_name || item.user_profile.username || 'U'}
            size={isMobile ? "sm" : "md"}
          />
          <div>
            <span className="font-medium">
              {item.user_profile.display_name || item.user_profile.username}
            </span>
            {item.user_profile.display_name && (
              <span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
                @{item.user_profile.username}
              </span>
            )}
          </div>
        </div>
      )}
    </>
  );
});

QueueItemHeader.displayName = 'QueueItemHeader';
