import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, Link } from '@inertiajs/react';
import { Edit, Plus, Trash2, Eye, Users, Mail, Building, CheckCircle, XCircle } from 'lucide-react';
import { useCrudOperations } from '@/hooks/use-crud-operations';
import { ServerDataTable, PaginatedData } from '@/components/ui/server-data-table';
import { ColumnDef } from '@tanstack/react-table';
import { ArrowUpDown } from 'lucide-react';

interface User {
    id: number;
    name: string;
    email: string;
    avatar?: string;
    profile_photo_url: string;
    institution?: {
        id: number;
        name: string;
    };
    departamento?: {
        id: number;
        name: string;
    };
    municipio?: {
        id: number;
        name: string;
    };
    profile_completed: boolean;
    is_researcher: boolean;
    email_verified_at?: string;
    created_at: string;
    updated_at: string;
}

interface Props {
    users: PaginatedData<User>;
    filters: {
        search?: string;
    };
}

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
    { title: 'Usuarios', href: '/users' },
];

export default function UsersIndex({ users, filters }: Props) {
    const { handleDelete } = useCrudOperations({
        entityName: 'Usuario',
        entityNamePlural: 'Usuarios',
        basePath: '/users'
    });

    const columns: ColumnDef<User>[] = [
        {
            accessorKey: "id",
            header: ({ column }) => {
                return (
                    <Button
                        variant="ghost"
                        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                        className="h-auto p-0 font-medium"
                    >
                        ID
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                    </Button>
                )
            },
            cell: ({ row }) => <div className="font-mono text-xs">{row.getValue("id")}</div>,
        },
        {
            accessorKey: "name",
            header: ({ column }) => {
                return (
                    <Button
                        variant="ghost"
                        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                        className="h-auto p-0 font-medium"
                    >
                        Usuario
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                    </Button>
                )
            },
            cell: ({ row }) => {
                const user = row.original;
                return (
                    <div className="flex items-center gap-3">
                        <Avatar className="h-8 w-8">
                            <AvatarImage src={user.profile_photo_url} alt={user.name} />
                            <AvatarFallback className="text-xs">
                                {user.name?.split(' ').map(n => n[0]).join('').toUpperCase()}
                            </AvatarFallback>
                        </Avatar>
                        <div>
                            <div className="font-medium">{user.name}</div>
                            <div className="text-sm text-muted-foreground flex items-center gap-1">
                                <Mail className="w-3 h-3" />
                                {user.email}
                            </div>
                        </div>
                    </div>
                );
            },
        },
        {
            accessorKey: "institution",
            header: "Institución",
            cell: ({ row }) => {
                const institution = row.original.institution;
                return (
                    <div className="flex items-center gap-2">
                        {institution ? (
                            <>
                                <Building className="w-4 h-4 text-muted-foreground" />
                                <span className="text-sm">{institution.name}</span>
                            </>
                        ) : (
                            <span className="text-sm text-muted-foreground">Sin institución</span>
                        )}
                    </div>
                );
            },
        },
        {
            accessorKey: "departamento",
            header: "Departamento",
            cell: ({ row }) => {
                const departamento = row.original.departamento;
                return (
                    <div className="flex items-center gap-2">
                        {departamento ? (
                            <span className="text-sm">{departamento.name}</span>
                        ) : (
                            <span className="text-sm text-muted-foreground">Sin departamento</span>
                        )}
                    </div>
                );
            },
        },
        {
            accessorKey: "municipio",
            header: "Municipio",
            cell: ({ row }) => {
                const municipio = row.original.municipio;
                return (
                    <div className="flex items-center gap-2">
                        {municipio ? (
                            <span className="text-sm">{municipio.name}</span>
                        ) : (
                            <span className="text-sm text-muted-foreground">Sin municipio</span>
                        )}
                    </div>
                );
            },
        },
        {
            accessorKey: "email_verified_at",
            header: "Estado",
            cell: ({ row }) => {
                const user = row.original;
                const isVerified = !!user.email_verified_at;
                const isProfileCompleted = user.profile_completed;

                return (
                    <div className="flex flex-col gap-1">
                        <Badge variant={isVerified ? "default" : "secondary"} className="w-fit">
                            {isVerified ? (
                                <>
                                    <CheckCircle className="w-3 h-3 mr-1" />
                                    Verificado
                                </>
                            ) : (
                                <>
                                    <XCircle className="w-3 h-3 mr-1" />
                                    Sin verificar
                                </>
                            )}
                        </Badge>
                        <Badge variant={isProfileCompleted ? "outline" : "destructive"} className="w-fit">
                            {isProfileCompleted ? "Perfil completo" : "Perfil incompleto"}
                        </Badge>
                    </div>
                );
            },
        },
        {
            accessorKey: "created_at",
            header: ({ column }) => {
                return (
                    <Button
                        variant="ghost"
                        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                        className="h-auto p-0 font-medium"
                    >
                        Fecha de Registro
                        <ArrowUpDown className="ml-2 h-4 w-4" />
                    </Button>
                )
            },
            cell: ({ row }) => {
                const date = new Date(row.getValue("created_at"));
                return <div className="text-sm">{date.toLocaleDateString('es-ES')}</div>;
            },
        },
        {
            id: "actions",
            header: "Acciones",
            cell: ({ row }) => {
                const user = row.original;

                return (
                    <div className="flex items-center gap-2">
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/users/${user.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/users/${user.id}/edit`}>
                                <Edit className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(user.id, user.name)}
                            className="hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20"
                        >
                            <Trash2 className="w-4 h-4" />
                        </Button>
                    </div>
                );
            },
        },
    ];

    const renderMobileCard = (user: User) => (
        <Card className="hover:shadow-md transition-shadow">
            <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                    <div className="flex items-start gap-3 flex-1">
                        <Avatar className="h-12 w-12 flex-shrink-0">
                            <AvatarImage src={user.profile_photo_url} alt={user.name} />
                            <AvatarFallback>
                                {user.name?.split(' ').map(n => n[0]).join('').toUpperCase()}
                            </AvatarFallback>
                        </Avatar>
                        <div className="min-w-0 flex-1">
                            <CardTitle className="text-lg">{user.name}</CardTitle>
                            <CardDescription className="flex items-center gap-1 mt-1">
                                <Mail className="w-3 h-3" />
                                {user.email}
                            </CardDescription>
                            {user.institution && (
                                <CardDescription className="flex items-center gap-1 mt-1">
                                    <Building className="w-3 h-3" />
                                    {user.institution.name}
                                </CardDescription>
                            )}
                            {user.departamento && (
                                <CardDescription className="flex items-center gap-1 mt-1">
                                    {user.departamento.name}
                                </CardDescription>
                            )}
                            {user.municipio && (
                                <CardDescription className="flex items-center gap-1 mt-1">
                                    {user.municipio.name}
                                </CardDescription>
                            )}
                        </div>
                    </div>
                </div>
            </CardHeader>
            <CardContent className="pt-0">
                <div className="flex items-center justify-between mb-3">
                    <div className="flex flex-wrap gap-1">
                        <Badge variant={user.email_verified_at ? "default" : "secondary"} className="text-xs">
                            {user.email_verified_at ? (
                                <>
                                    <CheckCircle className="w-3 h-3 mr-1" />
                                    Verificado
                                </>
                            ) : (
                                <>
                                    <XCircle className="w-3 h-3 mr-1" />
                                    Sin verificar
                                </>
                            )}
                        </Badge>
                        <Badge variant={user.profile_completed ? "outline" : "destructive"} className="text-xs">
                            {user.profile_completed ? "Perfil completo" : "Perfil incompleto"}
                        </Badge>
                    </div>
                </div>
                <div className="flex items-center justify-between">
                    <p className="text-xs text-muted-foreground">
                        Registrado: {new Date(user.created_at).toLocaleDateString('es-ES')}
                    </p>
                    <div className="flex items-center gap-1">
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/users/${user.id}`}>
                                <Eye className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button variant="ghost" size="sm" asChild>
                            <Link href={`/users/${user.id}/edit`}>
                                <Edit className="w-4 h-4" />
                            </Link>
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(user.id, user.name)}
                            className="hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-900/20"
                        >
                            <Trash2 className="w-4 h-4" />
                        </Button>
                    </div>
                </div>
            </CardContent>
        </Card>
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Usuarios" />

            <div className="flex h-full flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="p-2 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg">
                            <Users className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div>
                            <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
                                Usuarios
                            </h1>
                            <p className="text-slate-600 dark:text-slate-400 mt-1 text-sm sm:text-base">
                                Gestiona los usuarios del sistema
                            </p>
                        </div>
                    </div>
                    {/* Desktop button */}
                    <div className="hidden sm:block">
                        <Button
                            asChild
                            className="bg-emerald-600 hover:bg-emerald-700 w-full sm:w-auto"
                        >
                            <Link href="/users/create">
                                <Plus className="w-4 h-4 mr-2" />
                                Nuevo Usuario
                            </Link>
                        </Button>
                    </div>
                </div>
                {/* Mobile button */}
                <div className="block sm:hidden">
                    <Button
                        asChild
                        className="bg-emerald-600 hover:bg-emerald-700 w-full mt-2"
                    >
                        <Link href="/users/create">
                            <Plus className="w-4 h-4 mr-2" />
                            Nuevo Usuario
                        </Link>
                    </Button>
                </div>

                {/* DataTable */}
                <ServerDataTable
                    columns={columns}
                    paginatedData={users}
                    searchKey="name"
                    searchPlaceholder="Buscar usuarios..."
                    emptyMessage="No se encontraron usuarios. Crea tu primer usuario para comenzar."
                    renderMobileCard={renderMobileCard}
                    routeName="/users"
                    initialSearch={filters?.search || ''}
                />
            </div>
        </AppLayout>
    );
}