import { CheckCircle2, Clock, MapPin, Star, TrendingUp, Users, XCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { LazyImage } from '@/components/ui/lazy-image';
import type { Tour } from '@/types';
import { getServiceTypeLabel } from '@/types/service-types';

interface TourCardProps {
  tour: Tour & { relevance_score?: number };
  onSelect: (tour: Tour) => void;
  isRecommended?: boolean;
}

export default function TourCard({ tour, onSelect, isRecommended = false }: TourCardProps) {
  // Get label from shared service type enum
  const typeLabel = getServiceTypeLabel(tour.type);

  return (
    <Card className="overflow-hidden hover:shadow-lg transition-shadow">
      {/* Image */}
      {tour.image_url && (
        <div className="relative h-48 overflow-hidden">
          <LazyImage
            src={tour.image_url}
            alt={tour.name}
            className="w-full h-full object-cover"
          />
          {isRecommended && (
            <Badge className="absolute top-2 right-2 bg-primary text-primary-foreground">
              Bu plan için öneriliyor
            </Badge>
          )}
        </div>
      )}

      <CardHeader>
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1">
            <CardTitle className="text-lg line-clamp-2">{tour.name}</CardTitle>
            <CardDescription className="mt-1">
              <Badge variant="outline" className="text-xs">
                {typeLabel}
              </Badge>
            </CardDescription>
          </div>
          {tour.rating && tour.rating > 0 && (
            <div className="flex items-center gap-1 text-sm">
              <Star className="h-4 w-4 fill-primary text-primary" />
              <span className="font-medium">{tour.rating.toFixed(1)}</span>
              {tour.review_count && tour.review_count > 0 && (
                <span className="text-muted-foreground">({tour.review_count})</span>
              )}
            </div>
          )}
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Description */}
        {tour.description && (
          <p className="text-sm text-muted-foreground line-clamp-2">{tour.description}</p>
        )}

        {/* Details */}
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div className="flex items-center gap-2">
            <Clock className="h-4 w-4 text-muted-foreground" />
            <span>{tour.duration_hours} saat</span>
          </div>
          <div className="flex items-center gap-2">
            <Users className="h-4 w-4 text-muted-foreground" />
            <span>
              {tour.min_participants || 1}-{tour.max_participants || '∞'} kişi
            </span>
          </div>
          {tour.meeting_point && (
            <div className="flex items-center gap-2 col-span-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <span className="text-muted-foreground truncate">{tour.meeting_point}</span>
            </div>
          )}
        </div>

        {/* Includes */}
        {tour.includes && tour.includes.length > 0 && (
          <div>
            <p className="text-xs font-medium mb-2 flex items-center gap-1">
              <CheckCircle2 className="h-3 w-3 text-primary" />
              Neler Dahil
            </p>
            <ul className="space-y-1">
              {tour.includes.slice(0, 3).map((item, idx) => (
                <li key={idx} className="text-xs text-muted-foreground flex items-start gap-1">
                  <span className="text-primary">✓</span>
                  <span>{item}</span>
                </li>
              ))}
              {tour.includes.length > 3 && (
                <li className="text-xs text-muted-foreground">
                  +{tour.includes.length - 3} daha fazla
                </li>
              )}
            </ul>
          </div>
        )}

        {/* Excludes */}
        {tour.excludes && tour.excludes.length > 0 && (
          <div>
            <p className="text-xs font-medium mb-2 flex items-center gap-1">
              <XCircle className="h-3 w-3 text-muted-foreground" />
              Dahil Değil
            </p>
            <ul className="space-y-1">
              {tour.excludes.slice(0, 2).map((item, idx) => (
                <li key={idx} className="text-xs text-muted-foreground flex items-start gap-1">
                  <span>✗</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Commission Badge (for internal tracking) */}
        {tour.commission_rate > 0 && (
          <Badge variant="secondary" className="text-xs">
            <TrendingUp className="h-3 w-3 mr-1" />
            %{Math.round(tour.commission_rate * 100)} Komisyon
          </Badge>
        )}
      </CardContent>

      <CardFooter className="flex items-center justify-between">
        <div>
          {tour.price_from && tour.price_from > 0 ? (
            <>
              <p className="text-2xl font-bold text-primary">
                {tour.price_from.toLocaleString('tr-TR')} {tour.price_currency || 'TRY'}
              </p>
              <p className="text-xs text-muted-foreground">Kişi başı başlangıç fiyatı</p>
            </>
          ) : (
            <p className="text-sm text-muted-foreground">Fiyat için teklif alın</p>
          )}
        </div>
        <Button onClick={() => onSelect(tour)}>Teklif Al</Button>
      </CardFooter>
    </Card>
  );
}
