import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { Clock, MapPin, Plus, Sparkles } from 'lucide-react';
import React from 'react';
import { FreeTimeGap, TimeBlockSection } from '@/components/planner/TimeBlockSection';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { getTimeBlockLabel as getBlockLabel } from '@/lib/time-blocks';
import { TimelinePlace } from './TimelinePlace';

interface DayTimelineProps {
  loading: boolean;
  activeDay: any;
  activeDayPlaces: any[];
  activeDayTimelineBlocks: any;
  hoveredPlaceId: string | null;
  selectedPlaceId: string | null;
  highlightedPlaceId: string | null;
  onPlaceClick: (id: string) => void;
  onPlaceHover: (id: string | null) => void;
  onRemovePlace: (id: string, name: string, type?: string) => void;
  onAddPlaceClick: () => void;
  onGetAISuggestions: () => void;
  isLoadingAISuggestions: boolean;
  placeRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
}

export const DayTimeline: React.FC<DayTimelineProps> = ({
  loading,
  activeDay,
  activeDayPlaces,
  activeDayTimelineBlocks,
  hoveredPlaceId,
  selectedPlaceId,
  highlightedPlaceId,
  onPlaceClick,
  onPlaceHover,
  onRemovePlace,
  onAddPlaceClick,
  onGetAISuggestions,
  isLoadingAISuggestions,
  placeRefs,
}) => {
  if (loading) {
    return (
      <div className="space-y-4 p-4">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-32 w-full rounded-xl" />
        ))}
      </div>
    );
  }

  if (!activeDay) return null;

  return (
    <div className="space-y-6 pb-20">
      {/* Day Header Info */}
      <div className="flex items-center justify-between px-2">
        <div>
          <h3 className="text-lg font-bold flex items-center gap-2">
            <MapPin className="h-5 w-5 text-primary" />
            {activeDayPlaces.length} Durak
          </h3>
          <p className="text-sm text-muted-foreground">
            {activeDay.date} için planınız
          </p>
        </div>
        <Button 
          variant="outline" 
          size="sm" 
          className="rounded-full gap-2 border-primary/20 hover:border-primary/50 text-primary"
          onClick={onGetAISuggestions}
          disabled={isLoadingAISuggestions}
        >
          <Sparkles className="h-4 w-4" />
          {isLoadingAISuggestions ? 'Öneriler Alınıyor...' : 'AI Önerisi Al'}
        </Button>
      </div>

      <SortableContext 
        items={activeDayPlaces.map(p => p.tripPlaceId)} 
        strategy={verticalListSortingStrategy}
      >
        <div className="space-y-8 relative before:absolute before:left-5 sm:before:left-7 before:top-4 before:bottom-4 before:w-0.5 before:bg-gradient-to-b before:from-primary/20 before:via-primary/10 before:to-transparent">
          {activeDayTimelineBlocks.map((block: any, blockIndex: number) => (
            <TimeBlockSection 
              key={block.timeBlock} 
              label={getBlockLabel(block.timeBlock)}
            >
              <div className="space-y-4">
                {block.places.map((place: any, idx: number) => (
                  <React.Fragment key={place.tripPlaceId}>
                    <TimelinePlace
                      place={place}
                      isHovered={hoveredPlaceId === place.tripPlaceId}
                      isSelected={selectedPlaceId === place.tripPlaceId}
                      isHighlighted={highlightedPlaceId === place.tripPlaceId}
                      onPlaceClick={onPlaceClick}
                      onPlaceHover={onPlaceHover}
                      onRemove={onRemovePlace}
                      placeRefs={placeRefs}
                      orderNumber={activeDayPlaces.findIndex(p => p.id === place.id) + 1}
                    />
                    {place.gapToNext && (
                      <FreeTimeGap 
                        startTime={place.endTime || "00:00"}
                        endTime={place.nextStartTime || "00:00"}
                        onAddPlace={onAddPlaceClick}
                      />
                    )}
                  </React.Fragment>
                ))}
                
                {block.places.length === 0 && (
                  <Card className="border-dashed bg-muted/30">
                    <CardContent className="py-8 flex flex-col items-center justify-center text-center">
                      <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center mb-3">
                        <Plus className="h-6 w-6 text-muted-foreground/40" />
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {getBlockLabel(block.type)} için henüz bir yer eklemediniz.
                      </p>
                      <Button 
                        variant="ghost" 
                        size="sm" 
                        className="mt-2 text-primary hover:text-primary hover:bg-primary/5"
                        onClick={onAddPlaceClick}
                      >
                        Yer Ekle
                      </Button>
                    </CardContent>
                  </Card>
                )}
              </div>
            </TimeBlockSection>
          ))}
        </div>
      </SortableContext>
    </div>
  );
};
