import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { User, Heart, Tag, Bell } from 'lucide-react';

interface UserProfile {
  id: string;
  name: string;
  email: string;
  preferences: {
    destinations: string[];
    activities: string[];
    budget: string;
    travelStyle: string;
  };
  notifications: {
    email: boolean;
    push: boolean;
    sms: boolean;
  };
  interests: string[];
}

const UserPreferences = () => {
  const [users] = useState<UserProfile[]>([
    {
      id: '1',
      name: 'María García',
      email: 'maria@example.com',
      preferences: {
        destinations: ['Europa', 'Asia'],
        activities: ['Cultura', 'Gastronomía', 'Historia'],
        budget: 'Medio-Alto',
        travelStyle: 'Cultural'
      },
      notifications: {
        email: true,
        push: true,
        sms: false
      },
      interests: ['Arte', 'Museos', 'Cocina Local', 'Arquitectura']
    },
    {
      id: '2',
      name: 'Carlos López',
      email: 'carlos@example.com',
      preferences: {
        destinations: ['Caribe', 'Mediterráneo'],
        activities: ['Playa', 'Deportes', 'Relax'],
        budget: 'Alto',
        travelStyle: 'Lujo'
      },
      notifications: {
        email: true,
        push: false,
        sms: true
      },
      interests: ['Golf', 'Spa', 'Gastronomía Gourmet', 'Vinos']
    }
  ]);

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2">
        {users.map((user) => (
          <Card key={user.id}>
            <CardContent className="p-4">
              <div className="space-y-4">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <User className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-semibold">{user.name}</h4>
                      <p className="text-xs text-muted-foreground">{user.email}</p>
                    </div>
                  </div>
                </div>

                <div className="space-y-3">
                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Heart className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm font-medium">Destinos Favoritos</span>
                    </div>
                    <div className="flex flex-wrap gap-1">
                      {user.preferences.destinations.map((dest, idx) => (
                        <Badge key={idx} variant="secondary">{dest}</Badge>
                      ))}
                    </div>
                  </div>

                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <Tag className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm font-medium">Intereses</span>
                    </div>
                    <div className="flex flex-wrap gap-1">
                      {user.interests.map((interest, idx) => (
                        <Badge key={idx} variant="outline">{interest}</Badge>
                      ))}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3 text-sm">
                    <div>
                      <span className="text-muted-foreground">Presupuesto:</span>
                      <div className="font-medium">{user.preferences.budget}</div>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Estilo:</span>
                      <div className="font-medium">{user.preferences.travelStyle}</div>
                    </div>
                  </div>

                  <div className="pt-3 border-t">
                    <div className="flex items-center gap-2 mb-3">
                      <Bell className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm font-medium">Notificaciones</span>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <Label htmlFor={`email-${user.id}`} className="text-xs">Email</Label>
                        <Switch id={`email-${user.id}`} checked={user.notifications.email} />
                      </div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor={`push-${user.id}`} className="text-xs">Push</Label>
                        <Switch id={`push-${user.id}`} checked={user.notifications.push} />
                      </div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor={`sms-${user.id}`} className="text-xs">SMS</Label>
                        <Switch id={`sms-${user.id}`} checked={user.notifications.sms} />
                      </div>
                    </div>
                  </div>
                </div>

                <Button variant="outline" className="w-full" size="sm">
                  Editar Preferencias
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default UserPreferences;
