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';

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

export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
  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">
            <div className="grid grid-cols-3 gap-2">
              {data.photos?.slice(0, 3).map((photo: any, idx: number) => (
                <img
                  key={idx}
                  src={photo.url}
                  alt={photo.caption || 'Submission photo'}
                  className="w-full h-20 object-cover rounded"
                />
              ))}
            </div>
            {data.photos?.length > 3 && (
              <p className="text-sm text-muted-foreground">
                +{data.photos.length - 3} more photo(s)
              </p>
            )}
          </div>
        );

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

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

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