import { memo, useCallback } from 'react';
import { MessageSquare, Image, FileText, Calendar, Edit, Lock, AlertCircle, Code2 } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { UserAvatar } from '@/components/ui/user-avatar';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { ValidationSummary } from '../ValidationSummary';
import { TransactionStatusIndicator, type TransactionStatus } from '../TransactionStatusIndicator';
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;
  transactionStatus?: TransactionStatus;
  transactionMessage?: string;
  onValidationChange: (result: ValidationResult) => void;
  onViewRawData?: () => 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,
  transactionStatus = 'idle',
  transactionMessage,
  onValidationChange,
  onViewRawData
}: 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 flex-1">
          <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>
          )}
          <TransactionStatusIndicator
            status={transactionStatus}
            message={transactionMessage}
            showLabel={!isMobile}
          />
          {item.submission_items && item.submission_items.length > 0 && item.submission_items[0].item_data && (
            <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>
        
        <div className="flex items-center gap-2">
          {onViewRawData && (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={onViewRawData}
                  className="h-8"
                >
                  <Code2 className="h-4 w-4" />
                  {!isMobile && <span className="ml-2">Raw Data</span>}
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>View complete JSON data</p>
              </TooltipContent>
            </Tooltip>
          )}
          
          <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>
      </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';