// @ts-nocheck
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Users, TrendingUp } from "lucide-react";
import { useCustomerSegmentation } from "@/hooks/useCustomerSegmentation";

export default function CustomerSegmentationPage() {
    const { customers, isLoading: loading, groupedCustomers, segmentGroups } =
      useCustomerSegmentation();

    if (loading) {
        return (
            <div className="p-8">
                <div className="animate-pulse space-y-6">
                    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {[...Array(3)].map((_, i) => (
                            <div key={i} className="h-48 bg-gray-200 rounded-xl"></div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="p-4 lg:p-8 space-y-8">
            <div>
                <h1 className="text-3xl font-bold text-gradient">Segmentación de Clientes</h1>
                <p className="text-gray-600 mt-1">Clientes agrupados por segmento</p>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                {Object.entries(segmentGroups).map(([key, segment]) => {
                    const count = groupedCustomers[key]?.length || 0;
                    const percentage = customers.length > 0 
                        ? ((count / customers.length) * 100).toFixed(1) 
                        : 0;

                    return (
                        <Card key={key} className="glass-card border-white/20">
                            <CardContent className="p-4">
                                <div className="flex items-center justify-between mb-2">
                                    <span className="text-2xl">{segment.icon}</span>
                                    <TrendingUp className="w-4 h-4 text-gray-400" />
                                </div>
                                <p className="text-sm text-gray-600 mb-1">{segment.name}</p>
                                <div className="flex items-end justify-between">
                                    <p className="text-2xl font-bold">{count}</p>
                                    <p className="text-xs text-gray-500">{percentage}%</p>
                                </div>
                            </CardContent>
                        </Card>
                    );
                })}
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Object.entries(segmentGroups).map(([key, segment]) => {
                    const customersInSegment = groupedCustomers[key] || [];

                    return (
                        <Card key={key} className="glass-card border-white/20">
                            <CardHeader className="border-b border-gray-200">
                                <CardTitle className="flex items-center justify-between">
                                    <div className="flex items-center gap-2">
                                        <span className="text-2xl">{segment.icon}</span>
                                        <span>{segment.name}</span>
                                    </div>
                                    <Badge className={segment.color}>
                                        {customersInSegment.length}
                                    </Badge>
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="p-4">
                                {customersInSegment.length === 0 ? (
                                    <div className="text-center py-8 text-gray-500">
                                        <Users className="w-12 h-12 mx-auto mb-2 opacity-30" />
                                        <p className="text-sm">No hay clientes en este segmento</p>
                                    </div>
                                ) : (
                                    <div className="space-y-3 max-h-96 overflow-y-auto">
                                        {customersInSegment.map((customer) => (
                                            <div
                                                key={customer.id}
                                                className="p-3 bg-white/50 rounded-lg border border-gray-200 hover:bg-white/80 transition-colors"
                                            >
                                                <div className="flex items-start justify-between">
                                                    <div className="flex-1 min-w-0">
                                                        <p className="font-semibold truncate">{customer.name}</p>
                                                        <p className="text-xs text-gray-500 truncate">{customer.email}</p>
                                                        {customer.phone && (
                                                            <p className="text-xs text-gray-500">{customer.phone}</p>
                                                        )}
                                                    </div>
                                                    <Badge variant="outline" className={`ml-2 ${
                                                        customer.status === 'active' 
                                                            ? 'bg-green-50 text-green-700 border-green-200'
                                                            : 'bg-gray-50 text-gray-700 border-gray-200'
                                                    }`}>
                                                        {customer.status}
                                                    </Badge>
                                                </div>
                                                {customer.address_comuna && (
                                                    <p className="text-xs text-gray-500 mt-1">
                                                        📍 {customer.address_comuna}
                                                    </p>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </CardContent>
                        </Card>
                    );
                })}
            </div>
        </div>
    );
}