import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { TrendingUp, Eye, MousePointer, Clock, MapPin } from 'lucide-react';

const BehaviorAnalytics = () => {
  const behaviorData = {
    topDestinations: [
      { name: 'Barcelona', views: 1250, bookings: 85 },
      { name: 'Madrid', views: 1120, bookings: 72 },
      { name: 'Valencia', views: 890, bookings: 58 },
      { name: 'Sevilla', views: 780, bookings: 45 }
    ],
    userJourney: [
      { step: 'Landing Page', users: 1000, dropoff: 0 },
      { step: 'Búsqueda', users: 850, dropoff: 15 },
      { step: 'Detalle', users: 680, dropoff: 20 },
      { step: 'Reserva', users: 425, dropoff: 37.5 },
      { step: 'Pago', users: 340, dropoff: 20 }
    ],
    peakHours: [
      { hour: '09:00', activity: 45 },
      { hour: '12:00', activity: 78 },
      { hour: '15:00', activity: 65 },
      { hour: '18:00', activity: 92 },
      { hour: '21:00', activity: 58 }
    ]
  };

  return (
    <div className="space-y-6">
      <div className="grid gap-6 md:grid-cols-2">
        {/* Top Destinations */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <MapPin className="h-5 w-5" />
              Destinos Más Vistos
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {behaviorData.topDestinations.map((dest, idx) => (
                <div key={idx} className="space-y-1">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">{dest.name}</span>
                    <Badge variant="secondary">{dest.views} vistas</Badge>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-primary"
                        style={{ width: `${(dest.bookings / dest.views) * 100}%` }}
                      ></div>
                    </div>
                    <span className="text-xs text-muted-foreground">
                      {dest.bookings} reservas
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* User Journey Funnel */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <TrendingUp className="h-5 w-5" />
              Embudo de Conversión
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {behaviorData.userJourney.map((step, idx) => (
                <div key={idx} className="space-y-1">
                  <div className="flex justify-between items-center">
                    <span className="text-sm font-medium">{step.step}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-sm">{step.users} usuarios</span>
                      {step.dropoff > 0 && (
                        <Badge variant="outline" className="text-xs">
                          -{step.dropoff}%
                        </Badge>
                      )}
                    </div>
                  </div>
                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-gradient-to-r from-green-500 to-blue-500"
                      style={{ width: `${(step.users / 1000) * 100}%` }}
                    ></div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Peak Activity Hours */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-lg">
            <Clock className="h-5 w-5" />
            Horas de Mayor Actividad
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex justify-between items-end h-40 gap-4">
            {behaviorData.peakHours.map((hour, idx) => (
              <div key={idx} className="flex-1 flex flex-col items-center gap-2">
                <div className="w-full flex items-end justify-center h-32">
                  <div 
                    className="w-full bg-primary rounded-t-lg transition-all hover:bg-primary/80"
                    style={{ height: `${hour.activity}%` }}
                  ></div>
                </div>
                <div className="text-xs text-muted-foreground">{hour.hour}</div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Quick Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Eye className="h-8 w-8 text-blue-500" />
              <div>
                <div className="text-2xl font-bold">4,890</div>
                <div className="text-xs text-muted-foreground">Páginas vistas</div>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <MousePointer className="h-8 w-8 text-green-500" />
              <div>
                <div className="text-2xl font-bold">68%</div>
                <div className="text-xs text-muted-foreground">Click-through rate</div>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Clock className="h-8 w-8 text-purple-500" />
              <div>
                <div className="text-2xl font-bold">4:32</div>
                <div className="text-xs text-muted-foreground">Tiempo promedio</div>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <TrendingUp className="h-8 w-8 text-orange-500" />
              <div>
                <div className="text-2xl font-bold">34%</div>
                <div className="text-xs text-muted-foreground">Tasa conversión</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default BehaviorAnalytics;
