import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Brain, Star, MapPin, TrendingUp, ThumbsUp, ThumbsDown } from 'lucide-react';
import { toast } from 'sonner';

interface Recommendation {
  id: string;
  userId: string;
  userName: string;
  type: 'destination' | 'activity' | 'restaurant' | 'hotel';
  item: string;
  confidence: number;
  reason: string;
  matchScore: number;
}

const AIRecommendations = () => {
  const [recommendations] = useState<Recommendation[]>([
    {
      id: '1',
      userId: 'user_123',
      userName: 'María García',
      type: 'destination',
      item: 'Barcelona, España',
      confidence: 95,
      reason: 'Basado en historial de viajes a ciudades culturales',
      matchScore: 95
    },
    {
      id: '2',
      userId: 'user_123',
      userName: 'María García',
      type: 'activity',
      item: 'Tour Gastronómico Sagrada Familia',
      confidence: 88,
      reason: 'Usuario interesado en gastronomía y arquitectura',
      matchScore: 88
    },
    {
      id: '3',
      userId: 'user_456',
      userName: 'Carlos López',
      type: 'hotel',
      item: 'Hotel Boutique Centro Histórico',
      confidence: 92,
      reason: 'Prefiere alojamientos boutique en zonas céntricas',
      matchScore: 92
    },
    {
      id: '4',
      userId: 'user_789',
      userName: 'Ana Martínez',
      type: 'restaurant',
      item: 'Restaurante Vegetariano "Green Life"',
      confidence: 90,
      reason: 'Historial de preferencias vegetarianas y sostenibles',
      matchScore: 90
    }
  ]);

  const getTypeIcon = (type: Recommendation['type']) => {
    switch (type) {
      case 'destination': return MapPin;
      case 'activity': return Star;
      case 'restaurant': return Star;
      case 'hotel': return MapPin;
      default: return Star;
    }
  };

  const getTypeLabel = (type: Recommendation['type']) => {
    switch (type) {
      case 'destination': return 'Destino';
      case 'activity': return 'Actividad';
      case 'restaurant': return 'Restaurante';
      case 'hotel': return 'Hotel';
      default: return type;
    }
  };

  const getConfidenceColor = (confidence: number) => {
    if (confidence >= 90) return 'bg-green-500';
    if (confidence >= 75) return 'bg-yellow-500';
    return 'bg-orange-500';
  };

  const handleFeedback = (recId: string, positive: boolean) => {
    toast.success(positive ? 'Feedback positivo registrado' : 'Feedback negativo registrado');
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Brain className="h-4 w-4" />
        <span>Motor de IA analizando {recommendations.length} recomendaciones activas</span>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        {recommendations.map((rec) => {
          const Icon = getTypeIcon(rec.type);
          
          return (
            <Card key={rec.id}>
              <CardContent className="p-4">
                <div className="space-y-3">
                  <div className="flex justify-between items-start">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <Icon className="h-4 w-4 text-primary" />
                        <Badge variant="outline">{getTypeLabel(rec.type)}</Badge>
                      </div>
                      <h4 className="font-semibold">{rec.item}</h4>
                      <p className="text-xs text-muted-foreground mt-1">
                        Para: {rec.userName}
                      </p>
                    </div>
                    <div className="text-right">
                      <div className="flex items-center gap-1">
                        <div className={`w-2 h-2 rounded-full ${getConfidenceColor(rec.confidence)}`}></div>
                        <span className="text-sm font-medium">{rec.confidence}%</span>
                      </div>
                      <span className="text-xs text-muted-foreground">confianza</span>
                    </div>
                  </div>

                  <div className="p-3 bg-muted rounded-lg">
                    <div className="flex items-start gap-2">
                      <Brain className="h-4 w-4 text-primary mt-0.5" />
                      <div className="flex-1">
                        <div className="text-xs font-medium mb-1">Razón de la recomendación:</div>
                        <div className="text-xs text-muted-foreground">{rec.reason}</div>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center justify-between pt-2">
                    <div className="flex items-center gap-1">
                      <TrendingUp className="h-3 w-3 text-muted-foreground" />
                      <span className="text-xs text-muted-foreground">
                        Match Score: {rec.matchScore}%
                      </span>
                    </div>
                    <div className="flex gap-1">
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 w-7 p-0"
                        onClick={() => handleFeedback(rec.id, true)}
                      >
                        <ThumbsUp className="h-3 w-3" />
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-7 w-7 p-0"
                        onClick={() => handleFeedback(rec.id, false)}
                      >
                        <ThumbsDown className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {recommendations.length === 0 && (
        <div className="text-center py-12 text-muted-foreground">
          <Brain className="h-12 w-12 mx-auto mb-4 opacity-50" />
          <p>No hay recomendaciones activas</p>
        </div>
      )}
    </div>
  );
};

export default AIRecommendations;
