import React, { useState } from 'react';
import { Settings, Cog, Database, Wifi, Shield, Server, Key, Users, Activity, RefreshCw, TestTube, Edit, Save, X, CreditCard, Eye, EyeOff, Brain } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useSystemConfig } from '@/hooks/useSystemConfig';
import ThreatDetection from '@/components/security/ThreatDetection';
import AccessControl from '@/components/security/AccessControl';
import AuditLogs from '@/components/security/AuditLogs';
import ComplianceMonitor from '@/components/security/ComplianceMonitor';
import AIRecommendations from '@/components/personalization/AIRecommendations';
import UserPreferences from '@/components/personalization/UserPreferences';
import BehaviorAnalytics from '@/components/personalization/BehaviorAnalytics';
import SegmentManagement from '@/components/personalization/SegmentManagement';

interface ConfigTabProps {
  isAdmin: boolean;
  isSuperAdmin: boolean;
}

const ConfigTab: React.FC<ConfigTabProps> = ({ isSuperAdmin }) => {
  const [editingApi, setEditingApi] = useState<string | null>(null);
  const [editingParam, setEditingParam] = useState<string | null>(null);
  const [editingPayment, setEditingPayment] = useState<string | null>(null);
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
  const {
    apiConfigs,
    systemParameters,
    integrations,
    securityConfig,
    auditLogs,
    paymentConfigs,
    loading,
    updateApiConfig,
    testApiConnection,
    updateSystemParameter,
    syncIntegration,
    updateSecurityConfig,
    updatePaymentConfig,
    testPaymentConnection,
  } = useSystemConfig();

  if (!isSuperAdmin) {
    return (
      <div className="bg-white rounded-lg shadow p-8 text-center">
        <Shield className="w-16 h-16 text-red-400 mx-auto mb-4" />
        <h3 className="text-lg font-semibold text-gray-900 mb-2">Acceso Restringido</h3>
        <p className="text-gray-600">Solo los Super Administradores pueden acceder a la configuración del sistema.</p>
      </div>
    );
  }

  const handleApiEdit = (id: string, field: string, value: string) => {
    const config = apiConfigs.find(c => c.id === id);
    if (config) {
      updateApiConfig({ ...config, [field]: value });
      setEditingApi(null);
    }
  };

  const handleParamEdit = (id: string, value: string) => {
    const param = systemParameters.find(p => p.id === id);
    if (param) {
      updateSystemParameter({ ...param, value });
      setEditingParam(null);
    }
  };

  const handlePaymentEdit = (id: string, field: string, value: string | boolean) => {
    const config = paymentConfigs.find(c => c.id === id);
    if (config) {
      if (field === 'enabled' || field === 'testMode') {
        updatePaymentConfig({ ...config, [field]: value });
      } else {
        updatePaymentConfig({
          ...config,
          credentials: { ...config.credentials, [field]: value as string }
        });
      }
      setEditingPayment(null);
    }
  };

  const toggleSecretVisibility = (key: string) => {
    setShowSecrets(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-gray-900">Configuración del Sistema</h2>
      
      <Tabs defaultValue="apis" className="w-full">
        <TabsList className="grid w-full grid-cols-8 lg:grid-cols-8">
          <TabsTrigger value="apis" className="flex items-center gap-2">
            <Server className="w-4 h-4" />
            APIs
          </TabsTrigger>
          <TabsTrigger value="payments" className="flex items-center gap-2">
            <CreditCard className="w-4 h-4" />
            Pagos
          </TabsTrigger>
          <TabsTrigger value="parameters" className="flex items-center gap-2">
            <Settings className="w-4 h-4" />
            Parámetros
          </TabsTrigger>
          <TabsTrigger value="integrations" className="flex items-center gap-2">
            <Wifi className="w-4 h-4" />
            Integraciones
          </TabsTrigger>
          <TabsTrigger value="system-security" className="flex items-center gap-2">
            <Shield className="w-4 h-4" />
            Seguridad Sistema
          </TabsTrigger>
          <TabsTrigger value="audit" className="flex items-center gap-2">
            <Activity className="w-4 h-4" />
            Auditoría
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center gap-2">
            <Shield className="w-4 h-4" />
            Security Center
          </TabsTrigger>
          <TabsTrigger value="personalization" className="flex items-center gap-2">
            <Brain className="w-4 h-4" />
            Personalización
          </TabsTrigger>
        </TabsList>

        <TabsContent value="apis" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Server className="w-5 h-5" />
                Configuración de APIs
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : (
                <div className="space-y-4">
                  {apiConfigs.map((config) => (
                    <div key={config.id} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="font-medium">{config.name}</h4>
                        <div className="flex items-center gap-2">
                          <Badge variant={config.status === 'active' ? 'default' : 'secondary'}>
                            {config.status}
                          </Badge>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => testApiConnection(config.id)}
                          >
                            <TestTube className="w-4 h-4 mr-1" />
                            Probar
                          </Button>
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <label className="font-medium">Endpoint:</label>
                          {editingApi === config.id + '-endpoint' ? (
                            <div className="flex gap-2 mt-1">
                              <Input
                                defaultValue={config.endpoint}
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') {
                                    handleApiEdit(config.id, 'endpoint', e.currentTarget.value);
                                  }
                                }}
                              />
                              <Button size="sm" onClick={() => setEditingApi(null)}>
                                <X className="w-4 h-4" />
                              </Button>
                            </div>
                          ) : (
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-gray-600">{config.endpoint}</span>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => setEditingApi(config.id + '-endpoint')}
                              >
                                <Edit className="w-4 h-4" />
                              </Button>
                            </div>
                          )}
                        </div>
                        <div>
                          <label className="font-medium">Timeout:</label>
                          <span className="text-gray-600 ml-2">{config.timeout}ms</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="payments" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CreditCard className="w-5 h-5" />
                Configuración de Medios de Pago
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : paymentConfigs.length === 0 ? (
                <div className="text-center p-8 bg-gray-50 rounded-lg">
                  <CreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
                    No hay configuraciones de pago
                  </h3>
                  <p className="text-gray-600 mb-4">
                    Tu backend necesita implementar el endpoint de configuración de pagos
                  </p>
                  <div className="text-left bg-white p-4 rounded border max-w-2xl mx-auto">
                    <p className="font-mono text-sm mb-2">
                      <strong>Backend Required Endpoints:</strong>
                    </p>
                    <ul className="font-mono text-xs space-y-1 text-gray-700">
                      <li>GET /config/payments - Lista de configs</li>
                      <li>PUT /config/payments/:id - Actualizar config</li>
                      <li>POST /config/payments/:id/test - Probar conexión</li>
                    </ul>
                  </div>
                </div>
              ) : (
                <div className="space-y-6">
                  {paymentConfigs.map((config) => (
                    <div key={config.id} className="border rounded-lg p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h4 className="text-lg font-semibold">{config.name}</h4>
                          <p className="text-sm text-gray-600">{config.provider.toUpperCase()}</p>
                        </div>
                        <div className="flex items-center gap-2">
                          <Badge variant={config.status === 'active' ? 'default' : 'secondary'}>
                            {config.status}
                          </Badge>
                          <Badge variant={config.testMode ? 'outline' : 'default'}>
                            {config.testMode ? 'Test' : 'Producción'}
                          </Badge>
                          <Switch
                            checked={config.enabled}
                            onCheckedChange={(checked) => 
                              handlePaymentEdit(config.id, 'enabled', checked)
                            }
                          />
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => testPaymentConnection(config.id)}
                          >
                            <TestTube className="w-4 h-4 mr-1" />
                            Probar
                          </Button>
                        </div>
                      </div>

                      <div className="space-y-4">
                        {config.provider === 'stripe' && (
                          <>
                            <div className="grid grid-cols-2 gap-4">
                              <div>
                                <label className="text-sm font-medium">Publishable Key:</label>
                                {editingPayment === config.id + '-publishableKey' ? (
                                  <div className="flex gap-2 mt-1">
                                    <Input
                                      defaultValue={config.credentials.publishableKey || ''}
                                      placeholder="pk_test_..."
                                      onKeyDown={(e) => {
                                        if (e.key === 'Enter') {
                                          handlePaymentEdit(config.id, 'publishableKey', e.currentTarget.value);
                                        }
                                      }}
                                    />
                                    <Button size="sm" onClick={() => setEditingPayment(null)}>
                                      <X className="w-4 h-4" />
                                    </Button>
                                  </div>
                                ) : (
                                  <div className="flex items-center gap-2 mt-1">
                                    <span className="text-sm text-gray-600 truncate">
                                      {config.credentials.publishableKey || 'No configurado'}
                                    </span>
                                    <Button
                                      size="sm"
                                      variant="ghost"
                                      onClick={() => setEditingPayment(config.id + '-publishableKey')}
                                    >
                                      <Edit className="w-4 h-4" />
                                    </Button>
                                  </div>
                                )}
                              </div>

                              <div>
                                <label className="text-sm font-medium">Secret Key:</label>
                                {editingPayment === config.id + '-secretKey' ? (
                                  <div className="flex gap-2 mt-1">
                                    <Input
                                      type={showSecrets[config.id + '-secretKey'] ? 'text' : 'password'}
                                      defaultValue={config.credentials.secretKey || ''}
                                      placeholder="sk_test_..."
                                      onKeyDown={(e) => {
                                        if (e.key === 'Enter') {
                                          handlePaymentEdit(config.id, 'secretKey', e.currentTarget.value);
                                        }
                                      }}
                                    />
                                    <Button 
                                      size="sm" 
                                      variant="ghost"
                                      onClick={() => toggleSecretVisibility(config.id + '-secretKey')}
                                    >
                                      {showSecrets[config.id + '-secretKey'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                                    </Button>
                                    <Button size="sm" onClick={() => setEditingPayment(null)}>
                                      <X className="w-4 h-4" />
                                    </Button>
                                  </div>
                                ) : (
                                  <div className="flex items-center gap-2 mt-1">
                                    <span className="text-sm text-gray-600">
                                      {config.credentials.secretKey ? '••••••••••••' : 'No configurado'}
                                    </span>
                                    <Button
                                      size="sm"
                                      variant="ghost"
                                      onClick={() => setEditingPayment(config.id + '-secretKey')}
                                    >
                                      <Edit className="w-4 h-4" />
                                    </Button>
                                  </div>
                                )}
                              </div>

                              <div>
                                <label className="text-sm font-medium">Webhook Secret:</label>
                                {editingPayment === config.id + '-webhookSecret' ? (
                                  <div className="flex gap-2 mt-1">
                                    <Input
                                      type={showSecrets[config.id + '-webhookSecret'] ? 'text' : 'password'}
                                      defaultValue={config.credentials.webhookSecret || ''}
                                      placeholder="whsec_..."
                                      onKeyDown={(e) => {
                                        if (e.key === 'Enter') {
                                          handlePaymentEdit(config.id, 'webhookSecret', e.currentTarget.value);
                                        }
                                      }}
                                    />
                                    <Button 
                                      size="sm" 
                                      variant="ghost"
                                      onClick={() => toggleSecretVisibility(config.id + '-webhookSecret')}
                                    >
                                      {showSecrets[config.id + '-webhookSecret'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                                    </Button>
                                    <Button size="sm" onClick={() => setEditingPayment(null)}>
                                      <X className="w-4 h-4" />
                                    </Button>
                                  </div>
                                ) : (
                                  <div className="flex items-center gap-2 mt-1">
                                    <span className="text-sm text-gray-600">
                                      {config.credentials.webhookSecret ? '••••••••••••' : 'No configurado'}
                                    </span>
                                    <Button
                                      size="sm"
                                      variant="ghost"
                                      onClick={() => setEditingPayment(config.id + '-webhookSecret')}
                                    >
                                      <Edit className="w-4 h-4" />
                                    </Button>
                                  </div>
                                )}
                              </div>

                              <div className="flex items-center gap-2">
                                <Switch
                                  checked={config.testMode}
                                  onCheckedChange={(checked) => 
                                    handlePaymentEdit(config.id, 'testMode', checked)
                                  }
                                />
                                <span className="text-sm font-medium">Modo Test</span>
                              </div>
                            </div>
                          </>
                        )}

                        {config.provider === 'paypal' && (
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <label className="text-sm font-medium">Client ID:</label>
                              <Input
                                defaultValue={config.credentials.clientId || ''}
                                placeholder="Client ID de PayPal"
                                onBlur={(e) => handlePaymentEdit(config.id, 'clientId', e.target.value)}
                              />
                            </div>
                            <div>
                              <label className="text-sm font-medium">Client Secret:</label>
                              <Input
                                type="password"
                                defaultValue={config.credentials.clientSecret || ''}
                                placeholder="Client Secret de PayPal"
                                onBlur={(e) => handlePaymentEdit(config.id, 'clientSecret', e.target.value)}
                              />
                            </div>
                          </div>
                        )}

                        {config.lastTested && (
                          <p className="text-xs text-gray-500">
                            Última prueba: {new Date(config.lastTested).toLocaleString()}
                          </p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="parameters" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5" />
                Parámetros del Sistema
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : systemParameters.length === 0 ? (
                <div className="text-center p-8 bg-gray-50 rounded-lg">
                  <Settings className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
                    No hay parámetros configurados
                  </h3>
                  <p className="text-sm text-gray-600">
                    Endpoint requerido: GET /config/parameters
                  </p>
                </div>
              ) : (
                <div className="space-y-4">
                  {systemParameters.map((param) => (
                    <div key={param.id} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <h4 className="font-medium">{param.key}</h4>
                          <p className="text-sm text-gray-600">{param.description}</p>
                        </div>
                        <Badge variant="outline">{param.category}</Badge>
                      </div>
                      <div className="flex items-center gap-2">
                        <label className="font-medium text-sm">Valor:</label>
                        {editingParam === param.id ? (
                          <div className="flex gap-2 flex-1">
                            <Input
                              type={param.type === 'number' ? 'number' : 'text'}
                              defaultValue={param.value}
                              onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                  handleParamEdit(param.id, e.currentTarget.value);
                                }
                              }}
                            />
                            <Button size="sm" onClick={() => setEditingParam(null)}>
                              <X className="w-4 h-4" />
                            </Button>
                          </div>
                        ) : (
                          <div className="flex items-center gap-2 flex-1">
                            <span className="text-gray-600">{param.value}</span>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => setEditingParam(param.id)}
                            >
                              <Edit className="w-4 h-4" />
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="integrations" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Wifi className="w-5 h-5" />
                Gestión de Integraciones
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : (
                <div className="space-y-4">
                  {integrations.map((integration) => (
                    <div key={integration.id} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <h4 className="font-medium">{integration.name}</h4>
                          <p className="text-sm text-gray-600">{integration.type}</p>
                        </div>
                        <div className="flex items-center gap-2">
                          <Badge 
                            variant={
                              integration.status === 'connected' ? 'default' : 
                              integration.status === 'error' ? 'destructive' : 'secondary'
                            }
                          >
                            {integration.status}
                          </Badge>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => syncIntegration(integration.id)}
                          >
                            <RefreshCw className="w-4 h-4 mr-1" />
                            Sincronizar
                          </Button>
                        </div>
                      </div>
                      {integration.lastSync && (
                        <p className="text-xs text-gray-500">
                          Última sincronización: {new Date(integration.lastSync).toLocaleString()}
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="system-security" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="w-5 h-5" />
                Configuración de Seguridad del Sistema
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : (
                <div className="space-y-4">
                  {securityConfig.map((config) => (
                    <div key={config.id} className="border rounded-lg p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h4 className="font-medium">{config.setting}</h4>
                          <p className="text-sm text-gray-600">{config.description}</p>
                          <Badge variant="outline" className="mt-1">{config.category}</Badge>
                        </div>
                        <div className="flex items-center gap-2">
                          {typeof config.value === 'boolean' ? (
                            <Switch
                              checked={config.value}
                              onCheckedChange={(checked) => 
                                updateSecurityConfig({ ...config, value: checked })
                              }
                            />
                          ) : (
                            <span className="text-gray-600">{config.value}</span>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="audit" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Activity className="w-5 h-5" />
                Logs de Auditoría
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex items-center justify-center p-8">
                  <RefreshCw className="w-6 h-6 animate-spin" />
                </div>
              ) : (
                <div className="space-y-2">
                  {auditLogs.map((log) => (
                    <div key={log.id} className="border rounded-lg p-3">
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <Badge variant={log.status === 'success' ? 'default' : 'destructive'}>
                            {log.status}
                          </Badge>
                          <span className="font-medium">{log.action}</span>
                        </div>
                        <span className="text-sm text-gray-500">
                          {new Date(log.timestamp).toLocaleString()}
                        </span>
                      </div>
                      <div className="text-sm text-gray-600">
                        <p>Usuario: {log.user}</p>
                        <p>IP: {log.ip}</p>
                        <p>Detalles: {log.details}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="security" className="space-y-6">
          <div className="space-y-6">
            <div className="flex items-center gap-3">
              <Shield className="w-8 h-8 text-orange-600" />
              <div>
                <h3 className="text-2xl font-bold text-gray-900">Security Center</h3>
                <p className="text-gray-600">Monitor y gestión de seguridad del sistema</p>
              </div>
            </div>

            <Tabs defaultValue="threats" className="space-y-6">
              <TabsList className="grid w-full grid-cols-4 lg:w-auto">
                <TabsTrigger value="threats">Threat Detection</TabsTrigger>
                <TabsTrigger value="access">Access Control</TabsTrigger>
                <TabsTrigger value="audit-logs">Audit Logs</TabsTrigger>
                <TabsTrigger value="compliance">Compliance</TabsTrigger>
              </TabsList>

              <TabsContent value="threats">
                <ThreatDetection />
              </TabsContent>

              <TabsContent value="access">
                <AccessControl />
              </TabsContent>

              <TabsContent value="audit-logs">
                <AuditLogs />
              </TabsContent>

              <TabsContent value="compliance">
                <ComplianceMonitor />
              </TabsContent>
            </Tabs>
          </div>
        </TabsContent>

        <TabsContent value="personalization" className="space-y-6">
          <div className="space-y-6">
            <div className="flex items-center gap-3">
              <Brain className="w-8 h-8 text-orange-600" />
              <div>
                <h3 className="text-2xl font-bold text-gray-900">Personalización con IA</h3>
                <p className="text-gray-600">Gestión de recomendaciones y segmentación de usuarios</p>
              </div>
            </div>

            <Tabs defaultValue="recommendations" className="space-y-6">
              <TabsList className="grid w-full grid-cols-4 lg:w-auto">
                <TabsTrigger value="recommendations">Recomendaciones</TabsTrigger>
                <TabsTrigger value="preferences">Preferencias</TabsTrigger>
                <TabsTrigger value="analytics-behavior">Analytics</TabsTrigger>
                <TabsTrigger value="segments">Segmentos</TabsTrigger>
              </TabsList>

              <TabsContent value="recommendations">
                <Card>
                  <CardHeader>
                    <CardTitle>Recomendaciones IA</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <AIRecommendations />
                  </CardContent>
                </Card>
              </TabsContent>

              <TabsContent value="preferences">
                <Card>
                  <CardHeader>
                    <CardTitle>Preferencias de Usuario</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <UserPreferences />
                  </CardContent>
                </Card>
              </TabsContent>

              <TabsContent value="analytics-behavior">
                <Card>
                  <CardHeader>
                    <CardTitle>Analytics de Comportamiento</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <BehaviorAnalytics />
                  </CardContent>
                </Card>
              </TabsContent>

              <TabsContent value="segments">
                <Card>
                  <CardHeader>
                    <CardTitle>Gestión de Segmentos</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <SegmentManagement />
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default ConfigTab;