import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Users, Plus, Target, TrendingUp } from 'lucide-react';
import { toast } from 'sonner';

interface Segment {
  id: string;
  name: string;
  description: string;
  userCount: number;
  criteria: string[];
  conversionRate: number;
  avgSpending: number;
}

const SegmentManagement = () => {
  const [segments] = useState<Segment[]>([
    {
      id: '1',
      name: 'Viajeros Culturales',
      description: 'Usuarios interesados en historia, arte y cultura',
      userCount: 450,
      criteria: ['Visita museos', 'Busca tours culturales', 'Presupuesto medio-alto'],
      conversionRate: 42,
      avgSpending: 850
    },
    {
      id: '2',
      name: 'Amantes de la Playa',
      description: 'Prefieren destinos costeros y actividades acuáticas',
      userCount: 380,
      criteria: ['Busca playas', 'Reserva resorts', 'Temporada verano'],
      conversionRate: 38,
      avgSpending: 720
    },
    {
      id: '3',
      name: 'Aventureros',
      description: 'Buscan experiencias de aventura y naturaleza',
      userCount: 290,
      criteria: ['Actividades outdoor', 'Deportes extremos', 'Ecoturismo'],
      conversionRate: 45,
      avgSpending: 950
    },
    {
      id: '4',
      name: 'Gastronómicos',
      description: 'Viajeros enfocados en experiencias culinarias',
      userCount: 320,
      criteria: ['Tours gastronómicos', 'Restaurantes gourmet', 'Cocina local'],
      conversionRate: 48,
      avgSpending: 1100
    }
  ]);

  const createSegment = () => {
    toast.success('Segmento creado correctamente');
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h3 className="text-lg font-semibold">Segmentos Activos</h3>
          <p className="text-sm text-muted-foreground">
            {segments.length} segmentos de usuarios configurados
          </p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button className="gap-2">
              <Plus className="h-4 w-4" />
              Nuevo Segmento
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Crear Nuevo Segmento</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="segment-name">Nombre del Segmento</Label>
                <Input id="segment-name" placeholder="Ej: Viajeros de Lujo" />
              </div>
              <div>
                <Label htmlFor="segment-desc">Descripción</Label>
                <Input id="segment-desc" placeholder="Descripción del segmento" />
              </div>
              <div>
                <Label htmlFor="segment-criteria">Criterios (separados por coma)</Label>
                <Input 
                  id="segment-criteria" 
                  placeholder="Alta capacidad de gasto, Hoteles 5 estrellas, ..." 
                />
              </div>
              <Button onClick={createSegment} className="w-full">
                Crear Segmento
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        {segments.map((segment) => (
          <Card key={segment.id}>
            <CardHeader>
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <CardTitle className="flex items-center gap-2 text-lg">
                    <Target className="h-5 w-5 text-primary" />
                    {segment.name}
                  </CardTitle>
                  <p className="text-sm text-muted-foreground mt-1">
                    {segment.description}
                  </p>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm font-medium">Usuarios</span>
                </div>
                <span className="text-2xl font-bold">{segment.userCount}</span>
              </div>

              <div className="space-y-2">
                <div className="text-sm font-medium">Criterios de segmentación:</div>
                <div className="flex flex-wrap gap-1">
                  {segment.criteria.map((criterion, idx) => (
                    <Badge key={idx} variant="outline">{criterion}</Badge>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className="p-3 bg-green-50 rounded-lg">
                  <div className="flex items-center gap-1 mb-1">
                    <TrendingUp className="h-3 w-3 text-green-600" />
                    <span className="text-xs text-green-600">Conversión</span>
                  </div>
                  <div className="text-xl font-bold text-green-700">
                    {segment.conversionRate}%
                  </div>
                </div>
                <div className="p-3 bg-blue-50 rounded-lg">
                  <div className="flex items-center gap-1 mb-1">
                    <span className="text-xs text-blue-600">Gasto Promedio</span>
                  </div>
                  <div className="text-xl font-bold text-blue-700">
                    €{segment.avgSpending}
                  </div>
                </div>
              </div>

              <div className="flex gap-2 pt-2">
                <Button variant="outline" size="sm" className="flex-1">
                  Ver Usuarios
                </Button>
                <Button variant="outline" size="sm" className="flex-1">
                  Editar
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default SegmentManagement;
