import React from 'react';

import { Award, Car, Clock, MapPin, Sparkles, TrendingUp, Users, X, Zap } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import type { AITourAnalysis } from '@/types';
import { getServiceTypeMetadata } from '@/types/service-types';

interface AITourRecommendationProps {
  analysis: AITourAnalysis;
  travelers: number;
  onViewTours: () => void;
  onDismiss: () => void;
}

export default function AITourRecommendation({
  analysis,
  travelers,
  onViewTours,
  onDismiss,
}: AITourRecommendationProps) {
  if (!analysis.recommend) {
    return null;
  }

  // Get service type metadata from the shared enum
  const serviceTypeMetadata = getServiceTypeMetadata(analysis.recommended_type);
  
  // Use AI-provided display metadata if available, otherwise fall back to enum metadata
  const displayLabel = analysis.display_metadata?.service_type_label || serviceTypeMetadata?.label || analysis.recommended_type || 'Recommended Service';
  const displayIcon = analysis.display_metadata?.service_type_icon || serviceTypeMetadata?.icon || '✨';
  const segmentMessage = analysis.display_metadata?.segment_message || 
    'It might be more logical to get professional support instead of traveling individually this day.';

  const [showDetails, setShowDetails] = React.useState(false);

  return (
    <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-secondary/5 relative overflow-hidden shadow-sm hover:shadow-md transition-all duration-300">
      <div className="absolute top-0 right-0 p-1">
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7 opacity-50 hover:opacity-100"
          onClick={onDismiss}
        >
          <X className="h-3.5 w-3.5" />
        </Button>
      </div>

      <div className="p-4">
        {/* Compact Header */}
        <div className="flex items-center gap-3 mb-3">
          <div className="h-10 w-10 shrink-0 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
            <Sparkles className="h-5 w-5 text-primary animate-pulse" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <span className="font-bold text-sm text-foreground">Akıllı Tur Önerisi</span>
              <Badge variant="outline" className="text-[10px] py-0 h-4 border-primary/30 text-primary bg-primary/5 font-medium">
                %{Math.round(analysis.confidence * 100)} Doğruluk
              </Badge>
            </div>
            <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
              {analysis.reason || segmentMessage}
            </p>
          </div>
        </div>

        {/* Highlight Metrics - Compact Row */}
        {(analysis.comparison_metrics?.distance_saved_km || analysis.comparison_metrics?.time_saved_hours) && (
          <div className="flex gap-2 mb-3">
            {Number(analysis.comparison_metrics.distance_saved_km) > 0 && (
              <div className="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-background/60 border border-primary/10">
                <Car className="h-3.5 w-3.5 text-primary" />
                <span className="text-[11px] font-semibold text-primary">-{analysis.comparison_metrics.distance_saved_km}km</span>
              </div>
            )}
            {Number(analysis.comparison_metrics.time_saved_hours) > 0 && (
              <div className="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-background/60 border border-primary/10">
                <Zap className="h-3.5 w-3.5 text-primary" />
                <span className="text-[11px] font-semibold text-primary">-{analysis.comparison_metrics.time_saved_hours}sa</span>
              </div>
            )}
          </div>
        )}

        {/* Quick Details Chips */}
        <div className="flex flex-wrap gap-1.5 mb-3">
          <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted/50 border text-[10px] text-muted-foreground">
            <Clock className="h-3 w-3" />
            {analysis.ideal_duration}
          </div>
          <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-muted/50 border text-[10px] text-muted-foreground">
            <Users className="h-3 w-3" />
            {travelers} Kişi
          </div>
          <div className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 border border-primary/20 text-[10px] text-primary font-medium uppercase tracking-wider">
            {displayIcon} {displayLabel}
          </div>
        </div>

        {/* Collapsible Details */}
        {showDetails && (
          <div className="space-y-3 mb-4 pt-3 border-t border-primary/10 animate-in fade-in slide-in-from-top-2 duration-300">
            {/* Why Better List */}
            {analysis.why_better_than_self && analysis.why_better_than_self.length > 0 && (
              <div className="space-y-1.5">
                <p className="text-[11px] font-bold text-foreground/80 uppercase tracking-tight">Avantajlar</p>
                <div className="grid grid-cols-1 gap-1">
                  {analysis.why_better_than_self.slice(0, 3).map((reason, idx) => (
                    <div key={`reason-${idx}`} className="text-[11px] text-muted-foreground flex items-center gap-2 bg-background/30 p-1 px-2 rounded">
                      <div className="w-1 h-1 rounded-full bg-primary shrink-0" />
                      <span className="truncate">{reason}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Expert Values */}
            {analysis.comparison_metrics?.expert_value && analysis.comparison_metrics.expert_value.length > 0 && (
              <div className="flex flex-wrap gap-1">
                {analysis.comparison_metrics.expert_value.map((item, idx) => (
                  <Badge key={`expert-${idx}`} variant="secondary" className="text-[9px] px-1.5 py-0 bg-secondary/30 text-secondary-foreground border-none">
                    ⭐ {item}
                  </Badge>
                ))}
              </div>
            )}
          </div>
        )}

        {/* Footer Actions */}
        <div className="flex gap-2">
          <Button 
            variant="ghost" 
            size="sm" 
            className="text-[11px] h-8 text-muted-foreground hover:text-primary px-2"
            onClick={() => setShowDetails(!showDetails)}
          >
            {showDetails ? 'Daha Az' : 'Neden Bu Öneri?'}
          </Button>
          <Button 
            onClick={onViewTours} 
            className="flex-1 h-8 text-[11px] font-bold shadow-lg shadow-primary/20"
            size="sm"
          >
            <Sparkles className="h-3.5 w-3.5 mr-1.5" />
            Seçenekleri İncele
          </Button>
        </div>
      </div>
    </Card>
  );
}
