import { Calendar } from 'lucide-react';
import React from 'react';
import { Badge } from '@/components/ui/badge';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';

interface Day {
  id: string;
  dayNumber: number;
  date: string;
  dayName: string;
  places?: any[];
}

interface DaySelectorProps {
  days: Day[];
  activeDayId: string | null;
  onDaySelect: (dayId: string) => void;
  className?: string;
}

export const DaySelector: React.FC<DaySelectorProps> = ({
  days,
  activeDayId,
  onDaySelect,
  className,
}) => {
  if (!days || days.length === 0) {
    return (
      <div className={cn("flex flex-col items-center justify-center p-4", className)}>
        <Calendar className="h-12 w-12 mb-3 text-muted-foreground/20" />
        <p className="text-xs text-muted-foreground text-center">Gün yok</p>
      </div>
    );
  }

  return (
    <ScrollArea className={cn("h-full", className)}>
      <div className="p-2 space-y-2">
        {days.map((day) => (
          <button
            key={day.id}
            onClick={() => onDaySelect(day.id)}
            className={cn(
              "w-full p-3 rounded-xl border-2 transition-all duration-200 text-center hover:scale-105",
              activeDayId === day.id
                ? "border-primary bg-primary text-primary-foreground shadow-lg scale-105"
                : "border-border bg-card hover:border-primary/50 hover:bg-muted"
            )}
          >
            <div className="text-xs font-medium mb-1 opacity-90">Gün</div>
            <div className="text-2xl font-bold">{day.dayNumber}</div>
            <div className="text-[10px] mt-1 opacity-80 line-clamp-1">
              {new Date(day.date).toLocaleDateString('tr-TR', { 
                day: 'numeric', 
                month: 'short' 
              })}
            </div>
            <Badge 
              variant="secondary" 
              className={cn(
                "mt-2 text-[10px] px-1 py-0",
                activeDayId === day.id && "bg-primary-foreground/20 text-primary-foreground"
              )}
            >
              {day.places?.length || 0}
            </Badge>
          </button>
        ))}
      </div>
    </ScrollArea>
  );
};

// Mobile horizontal day selector
export const MobileDaySelector: React.FC<DaySelectorProps> = ({
  days,
  activeDayId,
  onDaySelect,
}) => {
  if (!days || days.length === 0) return null;

  return (
    <div className="w-full border-b bg-background">
      <ScrollArea className="w-full whitespace-nowrap">
        <div className="flex gap-2 p-2">
          {days.map((day) => (
            <button
              key={day.id}
              onClick={() => onDaySelect(day.id)}
              className={cn(
                "shrink-0 px-4 py-2 rounded-lg border-2 transition-all",
                activeDayId === day.id
                  ? "border-primary bg-primary text-primary-foreground shadow-md"
                  : "border-border bg-card hover:border-primary/50"
              )}
            >
              <div className="text-xs font-medium">Gün {day.dayNumber}</div>
              <div className="text-[10px] opacity-80">
                {day.places?.length || 0} yer
              </div>
            </button>
          ))}
        </div>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </div>
  );
};
