import { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Target, Brain, TrendingUp, Users } from 'lucide-react';
import UserPreferences from '@/components/personalization/UserPreferences';
import AIRecommendations from '@/components/personalization/AIRecommendations';
import BehaviorAnalytics from '@/components/personalization/BehaviorAnalytics';
import SegmentManagement from '@/components/personalization/SegmentManagement';

const Personalization = () => {
  const [totalUsers] = useState(1250);
  const [activeSegments] = useState(8);
  const [recommendationAccuracy] = useState(87);
  const [engagement] = useState(72);

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold flex items-center gap-2">
            <Target className="h-8 w-8 text-primary" />
            Personalización con IA
          </h1>
          <p className="text-muted-foreground mt-1">
            Recomendaciones inteligentes y segmentación de usuarios
          </p>
        </div>
      </div>

      {/* Stats Overview */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Usuarios Activos</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalUsers.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">perfiles analizados</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Segmentos</CardTitle>
            <Target className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{activeSegments}</div>
            <p className="text-xs text-muted-foreground">grupos activos</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Precisión IA</CardTitle>
            <Brain className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{recommendationAccuracy}%</div>
            <p className="text-xs text-muted-foreground">accuracy de recomendaciones</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Engagement</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{engagement}%</div>
            <p className="text-xs text-muted-foreground">tasa de interacción</p>
          </CardContent>
        </Card>
      </div>

      {/* Main Content */}
      <Tabs defaultValue="recommendations" className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="recommendations">Recomendaciones</TabsTrigger>
          <TabsTrigger value="preferences">Preferencias</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
          <TabsTrigger value="segments">Segmentos</TabsTrigger>
        </TabsList>

        <TabsContent value="recommendations" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Recomendaciones con IA</CardTitle>
              <CardDescription>
                Sistema de recomendaciones personalizadas basado en comportamiento
              </CardDescription>
            </CardHeader>
            <CardContent>
              <AIRecommendations />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="preferences" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Preferencias de Usuario</CardTitle>
              <CardDescription>
                Gestiona las preferencias y configuraciones de personalización
              </CardDescription>
            </CardHeader>
            <CardContent>
              <UserPreferences />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="analytics" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Análisis de Comportamiento</CardTitle>
              <CardDescription>
                Insights sobre patrones de uso y preferencias de usuarios
              </CardDescription>
            </CardHeader>
            <CardContent>
              <BehaviorAnalytics />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="segments" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Gestión de Segmentos</CardTitle>
              <CardDescription>
                Crea y gestiona segmentos de usuarios para campañas dirigidas
              </CardDescription>
            </CardHeader>
            <CardContent>
              <SegmentManagement />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default Personalization;
