import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { GripVertical, Trash2, Clock, MapPin, Car } from 'lucide-react';

interface SortablePlaceItemProps {
  place: any;
  index: number;
  isActiveDay: boolean;
  onRemove: (id: string, name: string) => void;
  onHover: (id: string | null) => void;
  onClick: (id: string) => void;
  setRef: (id: string, el: HTMLDivElement | null) => void;
}

export function SortablePlaceItem({
  place,
  index,
  isActiveDay,
  onRemove,
  onHover,
  onClick,
  setRef
}: SortablePlaceItemProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({ id: place.tripPlaceId });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    zIndex: isDragging ? 50 : 'auto',
    position: isDragging ? 'relative' as const : undefined,
  };

  const setRefs = (el: HTMLDivElement | null) => {
    setNodeRef(el);
    setRef(place.tripPlaceId, el);
  };

  return (
    <div
      ref={setRefs}
      style={style}
      className={cn(
        "group p-3 rounded-lg border transition-all bg-card hover:shadow-md",
        isActiveDay
          ? "border-primary/50 shadow-sm"
          : "border-border hover:border-primary/20",
        isDragging && "opacity-50 ring-2 ring-primary rotate-2"
      )}
      onMouseEnter={() => onHover(place.tripPlaceId)}
      onMouseLeave={() => onHover(null)}
      onClick={() => onClick(place.tripPlaceId)}
    >
      <div className="flex items-start gap-3">
        {/* Drag Handle */}
        <div 
          {...attributes} 
          {...listeners}
          className="mt-1 cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground p-1 rounded hover:bg-muted shrink-0"
        >
          <GripVertical className="h-4 w-4" />
        </div>

        {/* Place Image */}
        {(place.img || place.image_url) ? (
          <div className="h-16 w-16 rounded-md overflow-hidden shrink-0 border bg-muted relative">
            <img 
              src={place.img || place.image_url} 
              alt={place.name} 
              className="h-full w-full object-cover"
              loading="lazy"
            />
            <div className="absolute top-0 left-0 bg-primary/80 text-primary-foreground text-[10px] font-bold px-1 rounded-br">
              {index + 1}
            </div>
          </div>
        ) : (
          /* Order Number Fallback if no image */
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary text-xs font-bold mt-1 shrink-0">
            {index + 1}
          </div>
        )}

        {/* Content */}
        <div className="flex-1 min-w-0 space-y-1">
          <div className="flex items-start justify-between gap-2">
            <h4 className="font-medium text-sm truncate pr-2">{place.name}</h4>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6 -mr-2 text-destructive/50 hover:text-destructive hover:bg-destructive/10 opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={(e) => {
                e.stopPropagation();
                onRemove(place.tripPlaceId, place.name);
              }}
            >
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>

          <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
            {place.type && (
              <span className="capitalize">{place.type}</span>
            )}
            
            {place.duration && (
              <span className="flex items-center gap-1">
                <Clock className="h-3 w-3" />
                {place.duration}
              </span>
            )}
            
            {place.distance && (
              <span className="flex items-center gap-1">
                <Car className="h-3 w-3" />
                {place.distance} km
              </span>
            )}
          </div>

          {/* Time Slot Display if available */}
          {(place.startTime || place.endTime) && (
            <div className="text-xs font-medium text-primary/80 pt-1">
              {place.startTime} - {place.endTime}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
