// @ts-nocheck
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { 
    Users, 
    Search, 
    UserPlus,
    Loader2,
    Edit,
    X
} from "lucide-react";
import NetworkMemberForm from "../components/network/NetworkMemberForm";
import NetworkStats from "../components/network/NetworkStats";
import { useNetworkMembers } from "@/hooks/useNetworkMembers";
import { toast } from "sonner";

export default function NetworkMembersPage() {
    const {
      companies,
      loading,
      members,
      loadingMembers,
      showForm,
      editingMember,
      searchTerm,
      showConfigModal,
      configType,
      networkRates,
      levelRates,
      currentAffiliationCondition,
      filteredMembers,
      isSavingMember,
      isSavingAffiliation,
      setShowForm,
      setEditingMember,
      setSearchTerm,
      setShowConfigModal,
      setNetworkRates,
      setLevelRates,
      openConfig,
      saveMember,
      saveAffiliation,
      closeMemberForm,
      selectedCompany,
    } = useNetworkMembers();

    const handleEdit = (member) => {
      setEditingMember(member);
      setShowForm(true);
    };

    const getLevelBadgeColor = (level) => {
        const colors = {
            lider: "bg-amber-100 text-amber-800",
            supervisora: "bg-blue-100 text-blue-800",
            asp: "bg-indigo-100 text-indigo-800",
            tercera_generacion: "bg-purple-100 text-purple-800",
            base: "bg-gray-100 text-gray-800"
        };
        return colors[level] || colors.base;
    };

    const getLevelName = (level) => {
        const names = {
            lider: "Líder (4%)",
            supervisora: "Supervisora (3%)",
            asp: "ASP (2%)",
            tercera_generacion: "3ra Generación (1%)",
            base: "Base"
        };
        return names[level] || level;
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-screen">
                <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
            </div>
        );
    }

    if (companies.length === 0) {
        return (
            <div className="p-6">
                <Card>
                    <CardContent className="pt-6 text-center py-8">
                        <p className="text-gray-600">Primero debes crear una empresa</p>
                    </CardContent>
                </Card>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
            <div className="max-w-7xl mx-auto">
                <div className="flex justify-between items-center mb-6">
                    <div>
                        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
                            <Users className="w-8 h-8" />
                            Red Comercial
                        </h1>
                        <p className="text-gray-600">{selectedCompany?.name}</p>
                    </div>
                    <Button
                        onClick={() => setShowForm(true)}
                        className="bg-gradient-to-r from-blue-600 to-blue-700"
                    >
                        <UserPlus className="w-4 h-4 mr-2" />
                        Nuevo Miembro
                    </Button>
                </div>

                <NetworkStats members={members} />

                <div className="grid md:grid-cols-3 gap-4 mb-6">
                    <Card className="border-purple-200 bg-purple-50/50">
                        <CardContent className="pt-4">
                            <div className="flex justify-between items-start mb-3">
                                <p className="font-semibold text-purple-900">🎫 Condiciones de Afiliación</p>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => openConfig("affiliation")}
                                    className="h-8 px-2"
                                >
                                    <Edit className="w-4 h-4" />
                                </Button>
                            </div>
                            <div className="space-y-1 text-sm text-purple-800">
                                <p>• Compra mínima: <strong>${(currentAffiliationCondition?.min_first_purchase_amount || 0).toLocaleString()}</strong></p>
                                <p>• SKUs mínimos: <strong>{currentAffiliationCondition?.min_sku_count || 0}</strong></p>
                            </div>
                        </CardContent>
                    </Card>

                    <Card className="border-blue-200 bg-blue-50/50">
                        <CardContent className="pt-4">
                            <div className="flex justify-between items-start mb-3">
                                <p className="font-semibold text-blue-900">💰 Comisiones por Red</p>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => openConfig("network")}
                                    className="h-8 px-2"
                                >
                                    <Edit className="w-4 h-4" />
                                </Button>
                            </div>
                            <ul className="space-y-1 text-sm text-blue-800">
                                {networkRates.map((rate, idx) => (
                                    <li key={idx}>• <strong>{rate.commission_rate}%</strong>: {rate.min_members} socios + ${rate.min_monthly_sales.toLocaleString()}/mes</li>
                                ))}
                            </ul>
                        </CardContent>
                    </Card>

                    <Card className="border-green-200 bg-green-50/50">
                        <CardContent className="pt-4">
                            <div className="flex justify-between items-start mb-3">
                                <p className="font-semibold text-green-900">🎯 Comisiones por Nivel</p>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => openConfig("level")}
                                    className="h-8 px-2"
                                >
                                    <Edit className="w-4 h-4" />
                                </Button>
                            </div>
                            <ul className="space-y-1 text-sm text-green-800">
                                {levelRates.map((rate) => (
                                    <li key={rate.level}>• <strong>{rate.name}:</strong> {rate.commission_rate}%</li>
                                ))}
                            </ul>
                        </CardContent>
                    </Card>
                </div>

                <div className="mb-6">
                    <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                        <Input
                            placeholder="Buscar por nombre, código o email..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="pl-10"
                        />
                    </div>
                </div>

                {showForm && (
                    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
                        <Card className="max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                            <CardHeader>
                                <div className="flex justify-between items-center">
                                    <CardTitle>
                                        {editingMember ? "Editar Miembro" : "Nuevo Miembro"}
                                    </CardTitle>
                                    <Button variant="ghost" size="icon" onClick={closeMemberForm}>
                                        <X className="w-5 h-5" />
                                    </Button>
                                </div>
                            </CardHeader>
                            <CardContent>
                                <NetworkMemberForm
                                    member={editingMember}
                                    members={members}
                                    onSubmit={saveMember}
                                    onCancel={closeMemberForm}
                                    isLoading={isSavingMember}
                                />
                            </CardContent>
                        </Card>
                    </div>
                )}

                {showConfigModal && (
                    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
                        <Card className="max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                            <CardHeader>
                                <div className="flex justify-between items-center">
                                    <CardTitle>
                                        {configType === "affiliation" && "Configurar Condiciones de Afiliación"}
                                        {configType === "network" && "Configurar Comisiones por Red"}
                                        {configType === "level" && "Configurar Comisiones por Nivel"}
                                    </CardTitle>
                                    <Button variant="ghost" size="icon" onClick={() => setShowConfigModal(false)}>
                                        <X className="w-5 h-5" />
                                    </Button>
                                </div>
                            </CardHeader>
                            <CardContent>
                                {configType === "affiliation" && (
                                    <div className="space-y-4">
                                        <div>
                                            <Label>Monto Mínimo de Primera Compra</Label>
                                            <Input
                                                type="number"
                                                defaultValue={currentAffiliationCondition?.min_first_purchase_amount || 0}
                                                id="min_purchase"
                                                placeholder="0"
                                            />
                                        </div>
                                        <div>
                                            <Label>Cantidad Mínima de SKUs</Label>
                                            <Input
                                                type="number"
                                                defaultValue={currentAffiliationCondition?.min_sku_count || 0}
                                                id="min_sku"
                                                placeholder="0"
                                            />
                                        </div>
                                        <Button
                                            onClick={() => {
                                                const minPurchase = parseFloat(document.getElementById("min_purchase").value) || 0;
                                                const minSku = parseInt(document.getElementById("min_sku").value) || 0;
                                                saveAffiliation({
                                                    min_first_purchase_amount: minPurchase,
                                                    min_sku_count: minSku,
                                                    is_active: true,
                                                });
                                            }}
                                            className="w-full"
                                            disabled={isSavingAffiliation}
                                        >
                                            {isSavingAffiliation ? <Loader2 className="w-4 h-4 animate-spin" /> : "Guardar"}
                                        </Button>
                                    </div>
                                )}

                                {configType === "network" && (
                                    <div className="space-y-4">
                                        <p className="text-sm text-gray-600 mb-4">
                                            Define las comisiones que se otorgan según el tamaño y ventas de la red.
                                        </p>
                                        {networkRates.map((rate, idx) => (
                                            <Card key={idx} className="p-4">
                                                <div className="grid grid-cols-3 gap-3">
                                                    <div>
                                                        <Label className="text-xs">Comisión (%)</Label>
                                                        <Input
                                                            type="number"
                                                            defaultValue={rate.commission_rate}
                                                            onChange={(e) => {
                                                                const updated = [...networkRates];
                                                                updated[idx].commission_rate = parseFloat(e.target.value) || 0;
                                                                setNetworkRates(updated);
                                                            }}
                                                        />
                                                    </div>
                                                    <div>
                                                        <Label className="text-xs">Mín. Socios</Label>
                                                        <Input
                                                            type="number"
                                                            defaultValue={rate.min_members}
                                                            onChange={(e) => {
                                                                const updated = [...networkRates];
                                                                updated[idx].min_members = parseInt(e.target.value) || 0;
                                                                setNetworkRates(updated);
                                                            }}
                                                        />
                                                    </div>
                                                    <div>
                                                        <Label className="text-xs">Ventas/Mes</Label>
                                                        <Input
                                                            type="number"
                                                            defaultValue={rate.min_monthly_sales}
                                                            onChange={(e) => {
                                                                const updated = [...networkRates];
                                                                updated[idx].min_monthly_sales = parseFloat(e.target.value) || 0;
                                                                setNetworkRates(updated);
                                                            }}
                                                        />
                                                    </div>
                                                </div>
                                            </Card>
                                        ))}
                                        <Button
                                            onClick={() => {
                                                setShowConfigModal(false);
                                                toast.success("Configuración de red guardada");
                                            }}
                                            className="w-full"
                                        >
                                            Guardar Configuración
                                        </Button>
                                    </div>
                                )}

                                {configType === "level" && (
                                    <div className="space-y-4">
                                        <p className="text-sm text-gray-600 mb-4">
                                            Define las comisiones que recibe cada nivel en la red.
                                        </p>
                                        {levelRates.map((rate) => (
                                            <div key={rate.level} className="flex items-center gap-4 p-3 border rounded-lg">
                                                <div className="flex-1">
                                                    <Label className="font-medium">{rate.name}</Label>
                                                </div>
                                                <div className="w-32">
                                                    <Label className="text-xs">Comisión (%)</Label>
                                                    <Input
                                                        type="number"
                                                        defaultValue={rate.commission_rate}
                                                        onChange={(e) => {
                                                            const updated = levelRates.map((r) =>
                                                                r.level === rate.level
                                                                    ? { ...r, commission_rate: parseFloat(e.target.value) || 0 }
                                                                    : r
                                                            );
                                                            setLevelRates(updated);
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        ))}
                                        <Button
                                            onClick={() => {
                                                setShowConfigModal(false);
                                                toast.success("Configuración de niveles guardada");
                                            }}
                                            className="w-full"
                                        >
                                            Guardar Configuración
                                        </Button>
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    </div>
                )}

                <Card>
                    <CardHeader>
                        <CardTitle>
                            Miembros de la Red ({filteredMembers.length})
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        {loadingMembers ? (
                            <div className="text-center py-8">
                                <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-600" />
                            </div>
                        ) : filteredMembers.length === 0 ? (
                            <div className="text-center py-8 text-gray-500">
                                <Users className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                                <p>No hay miembros en la red</p>
                            </div>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="w-full">
                                    <thead className="bg-gray-50 border-b">
                                        <tr>
                                            <th className="text-left p-3 text-sm font-semibold">Código</th>
                                            <th className="text-left p-3 text-sm font-semibold">Nombre</th>
                                            <th className="text-left p-3 text-sm font-semibold">Nivel</th>
                                            <th className="text-left p-3 text-sm font-semibold">Patrocinador</th>
                                            <th className="text-left p-3 text-sm font-semibold">Equipo</th>
                                            <th className="text-left p-3 text-sm font-semibold">Ventas</th>
                                            <th className="text-left p-3 text-sm font-semibold">Estado</th>
                                            <th className="text-left p-3 text-sm font-semibold">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {filteredMembers.map((member) => {
                                            const sponsor = members.find((m) => String(m.id) === String(member.sponsor_id || member.idsponsor || ""));
                                            return (
                                                <tr key={member.id} className="border-b hover:bg-gray-50">
                                                    <td className="p-3 text-sm font-mono">{member.member_code}</td>
                                                    <td className="p-3">
                                                        <div>
                                                            <p className="font-semibold">{member.full_name}</p>
                                                            <p className="text-xs text-gray-500">{member.email}</p>
                                                        </div>
                                                    </td>
                                                    <td className="p-3">
                                                        <Badge className={getLevelBadgeColor(member.network_level)}>
                                                            {getLevelName(member.network_level)}
                                                        </Badge>
                                                    </td>
                                                    <td className="p-3 text-sm">
                                                        {sponsor ? sponsor.full_name : "-"}
                                                    </td>
                                                    <td className="p-3 text-sm">
                                                        {member.active_members_count || 0} miembros
                                                    </td>
                                                    <td className="p-3 text-sm font-semibold">
                                                        ${(member.monthly_team_sales || 0).toLocaleString()}
                                                    </td>
                                                    <td className="p-3">
                                                        <Badge className={member.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}>
                                                            {member.is_active ? "Activo" : "Inactivo"}
                                                        </Badge>
                                                    </td>
                                                    <td className="p-3">
                                                        <Button
                                                            variant="ghost"
                                                            size="sm"
                                                            onClick={() => handleEdit(member)}
                                                        >
                                                            <Edit className="w-4 h-4" />
                                                        </Button>
                                                    </td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}