import { memo } from 'react';
import { formatDistanceToNow } from 'date-fns';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { CheckCircle2, User } from 'lucide-react';
import type { SubmissionItem } from '@/types/moderation';

interface ItemLevelApprovalHistoryProps {
  items: SubmissionItem[];
  reviewerProfile?: {
    user_id: string;
    username: string;
    display_name?: string | null;
    avatar_url?: string | null;
  } | null;
}

export const ItemLevelApprovalHistory = memo(({
  items,
  reviewerProfile,
}: ItemLevelApprovalHistoryProps) => {
  // Filter to only approved items with timestamps
  const approvedItems = items.filter(
    item => item.status === 'approved' && (item as any).approved_at
  );

  if (approvedItems.length === 0) {
    return null;
  }

  // Sort by approval time (newest first)
  const sortedItems = [...approvedItems].sort((a, b) => {
    const timeA = new Date((a as any).approved_at).getTime();
    const timeB = new Date((b as any).approved_at).getTime();
    return timeB - timeA;
  });

  // Helper to get item display name
  const getItemName = (item: SubmissionItem): string => {
    const entityData = item.entity_data || item.item_data;
    if (entityData && typeof entityData === 'object' && 'name' in entityData) {
      return String(entityData.name);
    }
    return `${item.item_type} #${item.order_index}`;
  };

  // Helper to get action label
  const getActionLabel = (actionType: string): string => {
    switch (actionType) {
      case 'create': return 'Created';
      case 'edit': return 'Edited';
      case 'delete': return 'Deleted';
      default: return 'Modified';
    }
  };

  return (
    <div className="space-y-2">
      <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2">
        <CheckCircle2 className="h-3.5 w-3.5" />
        Item Approvals
      </div>
      
      <div className="space-y-2">
        {sortedItems.map((item) => {
          const approvedAt = (item as any).approved_at;
          const itemName = getItemName(item);
          const actionLabel = getActionLabel(item.action_type);
          
          return (
            <div
              key={item.id}
              className="flex items-start gap-3 text-sm bg-success/5 border border-success/20 rounded-md p-3"
            >
              {/* Approval Icon */}
              <div className="flex-shrink-0 mt-0.5">
                <CheckCircle2 className="h-4 w-4 text-success" />
              </div>
              
              {/* Item Info */}
              <div className="flex-1 min-w-0 space-y-1">
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-medium text-foreground truncate">
                      {itemName}
                    </span>
                    <Badge variant="outline" className="text-xs">
                      {actionLabel}
                    </Badge>
                    <Badge variant="secondary" className="text-xs font-mono">
                      {item.item_type}
                    </Badge>
                  </div>
                  <span className="text-xs text-muted-foreground whitespace-nowrap">
                    {formatDistanceToNow(new Date(approvedAt), { addSuffix: true })}
                  </span>
                </div>
                
                {/* Reviewer Info */}
                {reviewerProfile && (
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Avatar className="h-5 w-5">
                      <AvatarImage src={reviewerProfile.avatar_url ?? undefined} />
                      <AvatarFallback className="text-[10px]">
                        <User className="h-3 w-3" />
                      </AvatarFallback>
                    </Avatar>
                    <span>
                      Approved by{' '}
                      <span className="font-medium text-foreground">
                        {reviewerProfile.display_name || reviewerProfile.username}
                      </span>
                    </span>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
});

ItemLevelApprovalHistory.displayName = 'ItemLevelApprovalHistory';