import { closestCenter, DndContext, DragOverlay, SensorDescriptor, DragStartEvent, DragEndEvent } from '@dnd-kit/core';
import React from 'react';
import { AISuggestions } from '@/components/planner/AISuggestions';
import AITourRecommendation from '@/components/planner/AITourRecommendation';
import { DaySelector, MobileDaySelector } from '@/components/planner/DaySelector';
import { StartPointCard } from '@/components/planner/StartPointCard';
import { ScrollArea } from "@/components/ui/scroll-area";
import { DayTimeline } from './components/DayTimeline';
import { TimelinePlace } from './components/TimelinePlace';
import type { Trip, TripDay, TripPlace, TimelineBlock } from '@/types/trip-ui';
import type { AISuggestion, TourRecommendation } from '@/types';

interface TimelineViewProps {
  trip: Trip;
  loading: boolean;
  activeDayId: string | null;
  setActiveDayId: (id: string) => void;
  activeDay: TripDay | null;
  activeDayPlaces: TripPlace[];
  activeDayTimelineBlocks: TimelineBlock[];
  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;
  aiSuggestions: AISuggestion[];
  showAISuggestions: boolean;
  setShowAISuggestions: (show: boolean) => void;
  onAddAISuggestion: (id: string, timeBlock: string) => void;
  placeRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
  timelineScrollRef: React.RefObject<HTMLDivElement | null>;
  sensors: SensorDescriptor<any>[];
  handleDragStart: (event: DragStartEvent) => void;
  handleDragEnd: (event: DragEndEvent) => void;
  activeId: string | null;
  showTourRecommendation?: boolean;
  tourRecommendation?: any;
  onViewTours?: () => void;
  onDismissTourRecommendation?: () => void;
  hideSelectors?: boolean;
}

export const TimelineView: React.FC<TimelineViewProps> = (props) => {
  const {
    trip,
    loading,
    activeDayId,
    setActiveDayId,
    activeDay,
    activeDayPlaces,
    activeDayTimelineBlocks,
    hoveredPlaceId,
    selectedPlaceId,
    highlightedPlaceId,
    onPlaceClick,
    onPlaceHover,
    onRemovePlace,
    onAddPlaceClick,
    onGetAISuggestions,
    isLoadingAISuggestions,
    aiSuggestions,
    showAISuggestions,
    setShowAISuggestions,
    onAddAISuggestion,
    placeRefs,
    timelineScrollRef,
    sensors,
    handleDragStart,
    handleDragEnd,
    activeId,
    showTourRecommendation,
    tourRecommendation,
    onViewTours,
    onDismissTourRecommendation,
    hideSelectors = false,
  } = props;

  const activeDragPlace = activeDayPlaces.find(p => p.tripPlaceId === activeId);

  return (
    <div className="h-full flex flex-col">
      {/* Sidebar Header/Selectors */}
      {!hideSelectors && (
        <div className="p-4 sm:p-6 border-b border-border/50 bg-background/80 shrink-0">
          <div className="space-y-4">
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <span className="font-bold text-lg">Gün {activeDay?.dayNumber}</span>
                {activeDay?.suggested_tour_slug && (
                  <span className="text-[10px] bg-primary/10 text-primary px-2 py-0.5 rounded-full font-medium">
                    ✨ {activeDay.suggested_tour_slug === 'red_tour' ? 'Red Tour' : 
                        activeDay.suggested_tour_slug === 'green_tour' ? 'Green Tour' :
                        activeDay.suggested_tour_slug === 'blue_tour' ? 'Blue Tour' : 'Tur Önerisi'}
                  </span>
                )}
              </div>
            </div>
            <div className="hidden sm:block lg:hidden">
              <DaySelector 
                days={trip?.days || []} 
                activeDayId={activeDayId} 
                onDaySelect={setActiveDayId} 
              />
            </div>
            <div className="sm:hidden">
              <MobileDaySelector 
                days={trip?.days || []} 
                activeDayId={activeDayId} 
                onDaySelect={setActiveDayId} 
              />
            </div>

            <div className="sm:hidden text-[10px] text-muted-foreground flex items-center justify-center gap-1 opacity-70">
              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
              Sıralamak için basılı tutun ve sürükleyin
            </div>
            
            <StartPointCard 
              trip={trip} 
            />
          </div>
        </div>
      )}

      <div ref={timelineScrollRef} className="flex-1 min-h-0">
        <ScrollArea className="h-full">
          <div className="p-4 sm:p-6 pb-28 md:pb-6">
          {/* AI Tour Recommendation Banner */}
          {showTourRecommendation && tourRecommendation && onViewTours && onDismissTourRecommendation && (
            <div className="mb-6">
              <AITourRecommendation
                analysis={tourRecommendation}
                travelers={trip?.travelers || 2}
                onViewTours={onViewTours}
                onDismiss={onDismissTourRecommendation}
              />
            </div>
          )}

          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
          >
            <DayTimeline
              loading={loading}
              activeDay={activeDay}
              activeDayPlaces={activeDayPlaces}
              activeDayTimelineBlocks={activeDayTimelineBlocks}
              hoveredPlaceId={hoveredPlaceId}
              selectedPlaceId={selectedPlaceId}
              highlightedPlaceId={highlightedPlaceId}
              onPlaceClick={onPlaceClick}
              onPlaceHover={onPlaceHover}
              onRemovePlace={onRemovePlace}
              onAddPlaceClick={onAddPlaceClick}
              onGetAISuggestions={onGetAISuggestions}
              isLoadingAISuggestions={isLoadingAISuggestions}
              placeRefs={placeRefs}
            />

            <DragOverlay>
              {activeId && activeDragPlace ? (
                <div className="w-[calc(100vw-32px)] sm:w-[400px]">
                  <TimelinePlace
                    place={activeDragPlace}
                    isHovered={true}
                    isSelected={false}
                    isDragging={true}
                    onPlaceClick={() => {}}
                    onPlaceHover={() => {}}
                    onRemove={() => {}}
                    placeRefs={placeRefs}
                    orderNumber={activeDayPlaces.findIndex(p => p.tripPlaceId === activeDragPlace.tripPlaceId) + 1}
                  />
                </div>
              ) : null}
            </DragOverlay>
          </DndContext>

          {showAISuggestions && (
            <div className="mt-6">
              <AISuggestions
                suggestions={aiSuggestions}
                onAddSuggestion={onAddAISuggestion}
                dayNumber={activeDay?.dayNumber || 1}
              />
            </div>
          )}
        </div>
      </ScrollArea>
    </div>
    </div>
  );
};
