import { Home, Hotel, Lock, MapPinned } from 'lucide-react';
import React from 'react';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import type { Trip } from '@/types';

interface StartPointCardProps {
  trip: Trip;
  departureTime?: string; // HH:MM formatında
  hasBalloonFlight?: boolean; // Balon uçuşu var mı?
  className?: string;
}

export const StartPointCard: React.FC<StartPointCardProps> = ({
  trip,
  departureTime = '08:30',
  hasBalloonFlight = false,
  className,
}) => {
  // Başlangıç noktası türüne göre icon seç
  const getIcon = () => {
    switch (trip.start_location_type) {
      case 'hotel':
        return <Hotel className="h-5 w-5" />;
      case 'custom':
        return <Home className="h-5 w-5" />;
      case 'city_center':
        return <MapPinned className="h-5 w-5" />;
      default:
        return <MapPinned className="h-5 w-5" />;
    }
  };

  // Başlangıç noktası adını al
  const getLocationName = () => {
    if (trip.start_location_name) {
      return trip.start_location_name;
    }
    
    switch (trip.start_location_type) {
      case 'hotel':
        return 'Otel';
      case 'custom':
        return 'Konaklama Noktası';
      case 'city_center':
        return 'Göreme Merkez';
      default:
        return 'Başlangıç Noktası';
    }
  };

  return (
    <div className="space-y-3">
      <div
        className={cn(
          "flex gap-3 p-4 rounded-xl bg-muted/50 border-2 border-dashed border-muted-foreground/30 relative",
          className
        )}
      >
        {/* Başlangıç Badge */}
        <div className="absolute -left-3 -top-3 px-3 py-1 rounded-full bg-muted text-muted-foreground border-2 border-background flex items-center gap-1.5 text-xs font-semibold shadow-sm">
          <Lock className="h-3 w-3" />
          Başlangıç
        </div>

        {/* Icon */}
        <div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center text-muted-foreground shrink-0 mt-2">
          {getIcon()}
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0 mt-2">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-lg font-semibold text-foreground">
              {departureTime}
            </span>
            <span className="text-sm text-muted-foreground">–</span>
            <span className="text-sm font-medium text-muted-foreground">
              Otelden Çıkış
            </span>
          </div>
          
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground truncate">
              {getLocationName()}
            </span>
            {trip.start_lat && trip.start_lng && (
              <Badge variant="outline" className="text-xs shrink-0">
                {trip.start_lat.toFixed(4)}, {trip.start_lng.toFixed(4)}
              </Badge>
            )}
          </div>
        </div>

        {/* Lock Icon */}
        <div className="flex items-center justify-center text-muted-foreground/50 mt-2">
          <Lock className="h-4 w-4" />
        </div>
      </div>

      {/* Balon Bilgi Notu */}
      {hasBalloonFlight && (
        <div className="flex items-start gap-2 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-sm">
          <span className="text-lg shrink-0">🎈</span>
          <p className="text-amber-900 dark:text-amber-100">
            <strong>Balon uçuşları için</strong> otelden erken saatlerde (05:00-05:30) alınacaksınız. 
            Kesin saat hava durumuna göre değişebilir.
          </p>
        </div>
      )}
    </div>
  );
};
