thrilltrack-explorer/src/components/moderation/ItemReviewCard.tsx

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { useIsMobile } from '@/hooks/use-mobile';
import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';

interface ItemReviewCardProps {
  item: SubmissionItemWithDeps;
  onEdit: () => void;
  onStatusChange: (status: 'approved' | 'rejected') => void;
}

export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
  const isMobile = useIsMobile();
  
  const getItemIcon = () => {
    switch (item.item_type) {
      case 'park': return <MapPin className="w-4 h-4" />;
      case 'ride': return <Zap className="w-4 h-4" />;
      case 'manufacturer':
      case 'operator':
      case 'property_owner':
      case 'designer': return <Building2 className="w-4 h-4" />;
      case 'ride_model': return <Package className="w-4 h-4" />;
      case 'photo': return <Image className="w-4 h-4" />;
      default: return null;
    }
  };

  const getStatusColor = () => {
    switch (item.status) {
      case 'approved': return 'default';
      case 'rejected': return 'destructive';
      case 'pending': return 'secondary';
      default: return 'outline';
    }
  };

  const renderItemPreview = () => {
    const data = item.item_data;

    switch (item.item_type) {
      case 'park':
        return (
          <div className="space-y-2">
            <h4 className="font-semibold">{data.name}</h4>
            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
            <div className="flex gap-2 flex-wrap">
              {data.park_type && <Badge variant="outline">{data.park_type}</Badge>}
              {data.status && <Badge variant="outline">{data.status}</Badge>}
            </div>
          </div>
        );

      case 'ride':
        return (
          <div className="space-y-2">
            <h4 className="font-semibold">{data.name}</h4>
            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
            <div className="flex gap-2 flex-wrap">
              {data.category && <Badge variant="outline">{data.category}</Badge>}
              {data.status && <Badge variant="outline">{data.status}</Badge>}
            </div>
          </div>
        );

      case 'manufacturer':
      case 'operator':
      case 'property_owner':
      case 'designer':
        return (
          <div className="space-y-2">
            <h4 className="font-semibold">{data.name}</h4>
            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
            {data.founded_year && (
              <Badge variant="outline">Founded {data.founded_year}</Badge>
            )}
          </div>
        );

      case 'ride_model':
        return (
          <div className="space-y-2">
            <h4 className="font-semibold">{data.name}</h4>
            <p className="text-sm text-muted-foreground line-clamp-2">{data.description}</p>
            <div className="flex gap-2 flex-wrap">
              {data.category && <Badge variant="outline">{data.category}</Badge>}
              {data.ride_type && <Badge variant="outline">{data.ride_type}</Badge>}
            </div>
          </div>
        );

      case 'photo':
        return (
          <div className="space-y-2">
            {/* Fetch and display from photo_submission_items */}
            <PhotoSubmissionDisplay submissionId={data.submission_id} />
          </div>
        );

      default:
        return (
          <div className="text-sm text-muted-foreground">
            No preview available
          </div>
        );
    }
  };

  return (
    <Card className="w-full">
      <CardHeader className={isMobile ? "pb-3 p-4" : "pb-3"}>
        <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-start justify-between'}`}>
          <div className="flex items-center gap-2 flex-wrap">
            {getItemIcon()}
            <CardTitle className={isMobile ? "text-sm" : "text-base"}>
              {item.item_type.replace('_', ' ').toUpperCase()}
            </CardTitle>
            {item.original_data && (
              <Badge variant="outline" className="text-xs">
                Edited
              </Badge>
            )}
          </div>
          <div className="flex items-center gap-2">
            <Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
              {item.status}
            </Badge>
            {item.status === 'pending' && (
              <Button
                size={isMobile ? "default" : "sm"}
                variant="ghost"
                onClick={onEdit}
                className={isMobile ? "h-9 px-3" : ""}
              >
                <Edit className={isMobile ? "w-4 h-4" : "w-3 h-3"} />
                {isMobile && <span className="ml-2">Edit</span>}
              </Button>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent className={isMobile ? "p-4 pt-0" : ""}>
        {renderItemPreview()}
        
        {item.depends_on && (
          <div className="mt-3 pt-3 border-t">
            <p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>
              Depends on another item in this submission
            </p>
          </div>
        )}

        {item.rejection_reason && (
          <div className="mt-3 pt-3 border-t">
            <p className={`font-medium text-destructive ${isMobile ? 'text-xs' : 'text-xs'}`}>
              Rejection Reason:
            </p>
            <p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
              {item.rejection_reason}
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}