import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Calendar, RefreshCw, Settings, Award, CheckCircle } from "lucide-react";
import { toast } from "sonner";
import { useCategoryConfiguration } from "@/hooks/useCategoryConfiguration";

export default function CategoryConfiguration() {
    const {
      selectedCompany,
      config,
      commissionsConfig,
      isRecalculating,
      saveFrequency,
      recalculateNow,
    } = useCategoryConfiguration();

    const handleRecalculate = async () => {
      if (!selectedCompany) {
        return;
      }
      try {
        const data = await recalculateNow();
        if (data?.success) {
          toast.success(data.message || "Categorías recalculadas");
        }
      } catch (error) {
        toast.error("Error al recalcular categorías: " + error.message);
      }
    };

    const handleFrequencyChange = async (frequency) => {
      try {
        await saveFrequency(frequency);
        toast.success("Configuración guardada");
      } catch (error) {
        toast.error("Error al guardar configuración: " + error.message);
      }
    };

    const formatDate = (dateString) => {
        if (!dateString) return 'Nunca';
        return new Date(dateString).toLocaleString('es-CL', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    return (
        <div className="p-4 lg:p-8 space-y-8">
            <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                <div>
                    <h1 className="text-3xl font-bold text-gradient">Configuración de Categorías</h1>
                    <p className="text-gray-600 mt-1">
                        {selectedCompany?.name} • Gestión de categorías de red comercial
                    </p>
                </div>
                <Button
                    onClick={handleRecalculate}
                    disabled={!selectedCompany || isRecalculating}
                    className="bg-gradient-to-r from-amber-500 to-amber-600"
                >
                    <RefreshCw className={`w-4 h-4 mr-2 ${isRecalculating ? 'animate-spin' : ''}`} />
                    Recalcular Ahora
                </Button>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Configuración de Periodicidad */}
                <Card className="glass-card border-white/20">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Calendar className="w-5 h-5 text-blue-600" />
                            Periodicidad de Recálculo
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div>
                            <Label>Frecuencia de Actualización</Label>
                            <Select 
                                value={config?.recalculation_frequency || "monthly"}
                                onValueChange={handleFrequencyChange}
                            >
                                <SelectTrigger>
                                    <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="manual">Manual</SelectItem>
                                    <SelectItem value="monthly">Mensual</SelectItem>
                                    <SelectItem value="quarterly">Trimestral</SelectItem>
                                    <SelectItem value="yearly">Anual</SelectItem>
                                </SelectContent>
                            </Select>
                            <p className="text-xs text-gray-500 mt-2">
                                Las categorías se actualizarán automáticamente según esta frecuencia
                            </p>
                        </div>

                        <div className="pt-4 space-y-3 border-t">
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">Última actualización:</span>
                                <span className="text-sm font-medium">
                                    {formatDate(config?.last_recalculation_date)}
                                </span>
                            </div>
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">Próxima programada:</span>
                                <span className="text-sm font-medium">
                                    {formatDate(config?.next_scheduled_recalculation)}
                                </span>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Criterios de Categorización */}
                <Card className="glass-card border-white/20">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Award className="w-5 h-5 text-amber-600" />
                            Criterios de Categorización
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div className="space-y-3">
                            <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                                <div className="flex items-center gap-2">
                                    <Badge className="bg-green-100 text-green-800">Socio</Badge>
                                    <span className="text-sm">0-1 referidos</span>
                                </div>
                                <CheckCircle className="w-4 h-4 text-green-600" />
                            </div>
                            
                            <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                                <div className="flex items-center gap-2">
                                    <Badge className="bg-blue-100 text-blue-800">Aspirante</Badge>
                                    <span className="text-sm">
                                        {commissionsConfig?.min_referrals_for_aspirante || 2} - {commissionsConfig?.max_referrals_for_aspirante || 4} referidos
                                    </span>
                                </div>
                                <CheckCircle className="w-4 h-4 text-blue-600" />
                            </div>
                            
                            <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
                                <div className="flex items-center gap-2">
                                    <Badge className="bg-purple-100 text-purple-800">Supervisor</Badge>
                                    <span className="text-sm">
                                        {commissionsConfig?.min_referrals_for_supervisora || 5}+ referidos
                                    </span>
                                </div>
                                <CheckCircle className="w-4 h-4 text-purple-600" />
                            </div>
                            
                            <div className="flex items-center justify-between p-3 bg-amber-50 rounded-lg">
                                <div className="flex items-center gap-2">
                                    <Badge className="bg-amber-100 text-amber-800">Líder</Badge>
                                    <span className="text-sm">
                                        {commissionsConfig?.min_referrals_for_lider || 10}+ referidos
                                    </span>
                                </div>
                                <CheckCircle className="w-4 h-4 text-amber-600" />
                            </div>
                        </div>

                        <div className="pt-4 border-t">
                            <p className="text-xs text-gray-500">
                                Las categorías se actualizan automáticamente según la cantidad de referidos directos activos
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Información de Comisiones */}
            <Card className="glass-card border-white/20">
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Settings className="w-5 h-5 text-blue-600" />
                        Estructura de Comisiones por Categoría
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="p-4 bg-purple-50 rounded-lg space-y-2">
                            <h3 className="font-semibold text-purple-900 flex items-center gap-2">
                                <Award className="w-4 h-4" />
                                Supervisor
                            </h3>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.supervisora_group_sales_percentage || 8}% de las ventas de su grupo directo
                            </p>
                        </div>

                        <div className="p-4 bg-amber-50 rounded-lg space-y-2">
                            <h3 className="font-semibold text-amber-900 flex items-center gap-2">
                                <Award className="w-4 h-4" />
                                Líder
                            </h3>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.lider_direct_sales_min_percentage || 10}-{commissionsConfig?.lider_direct_sales_max_percentage || 20}% de ventas directas
                            </p>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.lider_tercera_generacion_percentage || 4}% tercera generación
                            </p>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.lider_supervisores_percentage || 3}% supervisores
                            </p>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.lider_asp_percentage || 2}% aspirantes
                            </p>
                            <p className="text-sm text-gray-700">
                                • {commissionsConfig?.lider_tercera_gen_simple_percentage || 1}% tercera gen simple
                            </p>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}