import { Cloud, CloudDrizzle, CloudRain, CloudSnow, Sun, Wind } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

interface WeatherForecast {
  date: string;
  temp_min: number;
  temp_max: number;
  temp_day: number;
  feels_like_day: number;
  humidity: number;
  wind_speed: number;
  weather_main: string;
  weather_description: string;
  weather_icon: string;
  pop: number;
}

interface WeatherDisplayProps {
  forecasts: WeatherForecast[];
  loading?: boolean;
  error?: string;
  units?: 'metric' | 'imperial';
}

const getWeatherIcon = (weatherMain: string, iconCode: string) => {
  const isNight = iconCode.endsWith('n');
  
  switch (weatherMain.toLowerCase()) {
    case 'clear':
      return <Sun className="h-8 w-8 text-yellow-500" />;
    case 'clouds':
      return <Cloud className="h-8 w-8 text-gray-400" />;
    case 'rain':
      return <CloudRain className="h-8 w-8 text-blue-500" />;
    case 'drizzle':
      return <CloudDrizzle className="h-8 w-8 text-blue-400" />;
    case 'snow':
      return <CloudSnow className="h-8 w-8 text-blue-200" />;
    case 'wind':
      return <Wind className="h-8 w-8 text-gray-500" />;
    default:
      return <Cloud className="h-8 w-8 text-gray-400" />;
  }
};

const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  
  today.setHours(0, 0, 0, 0);
  tomorrow.setHours(0, 0, 0, 0);
  date.setHours(0, 0, 0, 0);
  
  if (date.getTime() === today.getTime()) {
    return 'Bugün';
  } else if (date.getTime() === tomorrow.getTime()) {
    return 'Yarın';
  }
  
  return date.toLocaleDateString('tr-TR', { weekday: 'short', day: 'numeric', month: 'short' });
};

export function WeatherDisplay({ forecasts, loading, error, units = 'metric' }: WeatherDisplayProps) {
  const tempUnit = units === 'metric' ? '°C' : '°F';

  if (loading) {
    return (
      <Card className="bg-muted/50">
        <CardContent className="p-4">
          <div className="flex items-center gap-2 mb-3">
            <Skeleton className="h-5 w-5 rounded" />
            <Skeleton className="h-5 w-32" />
          </div>
          <div className="flex gap-3 overflow-x-auto pb-2">
            {[1, 2, 3, 4].map((i) => (
              <Skeleton key={i} className="h-32 w-24 shrink-0 rounded-lg" />
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="bg-muted/50 border-blue-200 dark:border-blue-800">
        <CardContent className="p-4">
          <div className="flex items-start gap-2">
            <Cloud className="h-5 w-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
            <div className="flex-1">
              <p className="text-sm font-medium text-blue-900 dark:text-blue-100">Hava Durumu</p>
              <p className="text-xs text-blue-700 dark:text-blue-300 mt-1">{error}</p>
              {error.includes('8 gün') && (
                <p className="text-xs text-blue-600 dark:text-blue-400 mt-2">
                  💡 Hava durumu tahminleri sadece önümüzdeki 8 gün için mevcuttur. Seyahat tarihiniz yaklaştığında tekrar kontrol edin.
                </p>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!forecasts || forecasts.length === 0) {
    return null;
  }

  return (
    <Card className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 border-blue-200 dark:border-blue-800">
      <CardContent className="p-4">
        <div className="flex items-center gap-2 mb-3">
          <Sun className="h-5 w-5 text-blue-600 dark:text-blue-400" />
          <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100">Hava Durumu Tahmini</h3>
        </div>
        
        <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-blue-200 scrollbar-track-transparent">
          {forecasts.map((forecast, index) => (
            <div
              key={forecast.date}
              className="shrink-0 bg-white/80 dark:bg-gray-900/40 backdrop-blur-sm rounded-lg p-3 min-w-[100px] border border-blue-100 dark:border-blue-900"
            >
              <p className="text-xs font-medium text-center text-gray-700 dark:text-gray-300 mb-2">
                {formatDate(forecast.date)}
              </p>
              
              <div className="flex justify-center mb-2">
                {getWeatherIcon(forecast.weather_main, forecast.weather_icon)}
              </div>
              
              <div className="text-center">
                <p className="text-lg font-bold text-gray-900 dark:text-gray-100">
                  {Math.round(forecast.temp_day)}{tempUnit}
                </p>
                <p className="text-xs text-gray-600 dark:text-gray-400">
                  {Math.round(forecast.temp_min)}° / {Math.round(forecast.temp_max)}°
                </p>
              </div>
              
              <p className="text-xs text-center text-gray-600 dark:text-gray-400 mt-2 capitalize">
                {forecast.weather_description}
              </p>
              
              {forecast.pop > 0.3 && (
                <div className="flex items-center justify-center gap-1 mt-2">
                  <CloudRain className="h-3 w-3 text-blue-500" />
                  <span className="text-xs text-blue-600 dark:text-blue-400">
                    {Math.round(forecast.pop * 100)}%
                  </span>
                </div>
              )}
            </div>
          ))}
        </div>
        
        <p className="text-xs text-gray-600 dark:text-gray-400 mt-3 text-center">
          Tahminler OpenWeather verilerine dayanmaktadır
        </p>
      </CardContent>
    </Card>
  );
}
