import AlertDialog from '@/Components/AlertDialog';
import Link from '@/Components/Link';
import ShowIf from '@/Components/ShowIf';
import { Button } from '@/Components/ui/button';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { capitalize, t } from '@/lib/utils';
import { AdminUsersTable } from '@/Pages/User/AdminUsersTable';
import UserDeleteAction from '@/Pages/User/UserDeleteAction';
import { Device, Role, User, UsersResponse } from '@/types';
import { Head } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import {
    CircleUserRound,
    RotateCcw,
    ShieldCheck,
    ShieldOff,
    Video,
} from 'lucide-react';
import React, { useEffect } from 'react';

interface AdminListProps {
    users: UsersResponse;
    availableRoles: Role[];
    availableManufacturers: string[];
    availableGenders: string[];
    availableMaritalStatuses: string[];
    availableDevices: Device[];
    userEmailUpdated: boolean;
    userDevicesUpdated: boolean;
    operatorRole: Role;
    availableBloodTypes: string[];
    availableIdentityDocumentTypes: string[];
    availableBodyTypes: string[];
    canCreate: boolean;
    canUpdate: boolean;
    canManage2FA: boolean;
    availableNotificationChannels: string[];
    meetUrl?: string;
}

export default function AdminList({
    users,
    availableRoles,
    availableDevices,
    availableGenders,
    availableMaritalStatuses,
    userEmailUpdated,
    userDevicesUpdated,
    operatorRole,
    availableBloodTypes,
    availableIdentityDocumentTypes,
    availableBodyTypes,
    canCreate,
    canUpdate,
    canManage2FA,
    availableNotificationChannels,
    meetUrl,
}: AdminListProps) {
    const [showUserCreatedModal, setShowUserCreatedModal] =
        React.useState(false);
    const [showUserUpdatedEmailModal, setShowUserUpdatedEmailModal] =
        React.useState(false);
    const [showUserUpdatedDevicesModal, setShowUserUpdatedDevicesModal] =
        React.useState(false);

    useEffect(() => {
        if (userEmailUpdated) {
            setShowUserUpdatedEmailModal(true);
        }
    }, [userEmailUpdated]);

    useEffect(() => {
        if (userDevicesUpdated) {
            setShowUserUpdatedDevicesModal(true);
        }
    }, [userDevicesUpdated]);

    const tableColumns: ColumnDef<User>[] = [
        {
            accessorKey: 'name',
            header: capitalize(t('name')),
        },
        {
            accessorKey: 'surname',
            header: capitalize(t('surname')),
        },
        {
            accessorKey: 'email',
            header: capitalize(t('email')),
        },
        {
            accessorKey: 'role_id',
            header: capitalize(t('role')),
            cell: ({ getValue }) => resolveRoleName(getValue() as number),
        },
        {
            header: 'Azienda',
            cell: ({ row }) => {
                const user: User = row.original;
                const companyName = user.company ? user.company.name : '';

                return <span>{`${companyName}`}</span>;
            },
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                const user = row.original;

                const getProfileAction = () => {
                    if (user.role?.name == 'admin') {
                        return <div className="inline-block h-8 w-8 p-0" />;
                    }
                    return (
                        <Link
                            href={route('dashboard.personal', {
                                target: user.id,
                            })}
                            className="text-black"
                        >
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <CircleUserRound />
                            </Button>
                        </Link>
                    );
                };

                const Reset2FAButton = () => {
                    if (!user.two_factor_confirmed_at) return null;

                    return (
                        <Link
                            href={route('admin.users.2fa.reset', {
                                user: user.id,
                            })}
                            method="patch"
                            as="button"
                            className="text-black"
                            title="Reset 2FA"
                        >
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <RotateCcw />
                            </Button>
                        </Link>
                    );
                };

                const MeetButton = () => {
                    if (user.role_id !== 2 || !meetUrl) return null;

                    const url = `${meetUrl}${user.surname}${user.id}`;
                    return (
                        <a href={url} target="_blank" rel="noopener noreferrer">
                            <Button
                                variant="ghost"
                                className="h-8 w-8 p-0"
                                title="Avvia videochiamata"
                            >
                                <Video />
                            </Button>
                        </a>
                    );
                };

                const Toggle2FAButton = () => {
                    // Consider 2FA "enabled" if confirmed AND not disabled
                    const enabled = !!user.two_factor_disabled_at;

                    return (
                        <Link
                            href={route('admin.users.2fa.toggle', {
                                user: user.id,
                            })}
                            method="patch"
                            as="button"
                            className="text-black"
                            title={enabled ? 'Abilita 2FA' : 'Disabilita 2FA'}
                            preserveScroll
                        >
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                {enabled ? <ShieldCheck /> : <ShieldOff />}
                            </Button>
                        </Link>
                    );
                };

                return (
                    <div>
                        {getProfileAction()}
                        <MeetButton />
                        <ShowIf condition={canManage2FA}>
                            <Toggle2FAButton />
                            <Reset2FAButton />
                        </ShowIf>
                        <ShowIf condition={canUpdate}>
                            <UserDeleteAction user={user} />
                        </ShowIf>
                    </div>
                );
            },
        },
    ];

    const getRole = (id: number) =>
        availableRoles.find((role) => role.id === id);

    const onUserCreated = () => setShowUserCreatedModal(true);

    const closeUserCreatedModal = () => setShowUserCreatedModal(false);

    const closeUserUpdatedEmailModal = () =>
        setShowUserUpdatedEmailModal(false);

    const closeUserUpdatedDevicesModal = () =>
        setShowUserUpdatedDevicesModal(false);

    const resolveRoleName = (roleId: number) => {
        const role = getRole(roleId);
        if (!role) {
            return '';
        }
        return capitalize(t(role.name));
    };
    return (
        <AuthenticatedLayout
            backLink={route('dashboard')}
            backLinkLabel="Dashboard"
        >
            <Head title={capitalize(t('users'))} />

            <div className="py-2">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            <div className="scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl">
                                {capitalize(t('users'))}
                            </div>
                            <div className="container mx-auto py-10">
                                <AdminUsersTable
                                    columns={tableColumns}
                                    onUserCreated={onUserCreated}
                                    availableNotificationChannels={
                                        availableNotificationChannels
                                    }
                                    canCreate={canCreate}
                                    canUpdate={canUpdate}
                                    availableMaritalStatuses={
                                        availableMaritalStatuses
                                    }
                                    availableBloodTypes={availableBloodTypes}
                                    availableGenders={availableGenders}
                                    operatorRole={operatorRole}
                                    availableDevices={availableDevices}
                                    data={users.data}
                                    rowCount={users.total}
                                    pageSize={users.per_page}
                                    pageCount={users.last_page}
                                    availableRoles={availableRoles}
                                    availableIdentityDocumentTypes={
                                        availableIdentityDocumentTypes
                                    }
                                    availableBodyTypes={availableBodyTypes}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <AlertDialog
                open={showUserCreatedModal}
                title="Utente aggiunto"
                onPositiveActionClick={closeUserCreatedModal}
            >
                Abbiamo inviato un'email all'utente con le istruzioni necessarie
                per completare l'iscrizione alla piattaforma.
            </AlertDialog>
            <AlertDialog
                open={showUserUpdatedEmailModal}
                title="Utente modificato"
                onPositiveActionClick={closeUserUpdatedEmailModal}
            >
                Hai cambiato l'indirizzo email dell'utente e questo deve essere
                verificato. Quando l'utente effettuerà il prossimo accesso alla
                piattaforma gli verrà chiesto di confermare la nuova email.
            </AlertDialog>
            <AlertDialog
                open={showUserUpdatedDevicesModal}
                title="Dispositivi modificati"
                onPositiveActionClick={closeUserUpdatedDevicesModal}
            >
                Quando associ un dispositivo ad un utente, il dispositivo
                potrebbe essere ancora collegato all'account dell'utente
                precedente. Per evitare problemi, assicurati di effettuare un
                reset di fabbrica del dispositivo quando lo associ ad un nuovo
                utente.
            </AlertDialog>
        </AuthenticatedLayout>
    );
}