import { Form, Link } from '@inertiajs/react';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { translatePermission, translatePermissionGroup } from '@/features/users/lib/permission-i18n';
import type { ManagedUserForm } from '@/features/users/types';
import { useI18n } from '@/hooks/use-i18n';

type UserFormProps = {
    action: string;
    method: 'post' | 'patch';
    options: {
        roles: string[];
        permissions: string[];
    };
    user?: ManagedUserForm;
};

function groupPermissions(permissions: string[]): Record<string, string[]> {
    return permissions.reduce<Record<string, string[]>>((groups, permission) => {
        const [group] = permission.split(' ');

        if (!groups[group]) {
            groups[group] = [];
        }

        groups[group].push(permission);

        return groups;
    }, {});
}

export function UserForm({ action, method, options, user }: UserFormProps) {
    const { t } = useI18n();
    const permissionGroups = groupPermissions(options.permissions);
    const inherited = new Set(user?.inherited_permissions ?? []);
    const [isActive, setIsActive] = useState<boolean>(user?.is_active ?? true);
    const [selectedRoles, setSelectedRoles] = useState<string[]>(user?.roles ?? []);
    const [selectedPermissions, setSelectedPermissions] = useState<string[]>(
        user?.direct_permissions ?? [],
    );

    const submitLabel =
        method === 'post' ? t('users.admin_form.page_create.submit') : t('users.admin_form.page_edit.submit');

    const toggleValue = (
        currentValues: string[],
        nextValue: string,
        setValues: (values: string[]) => void,
    ) => {
        if (currentValues.includes(nextValue)) {
            setValues(currentValues.filter((value) => value !== nextValue));

            return;
        }

        setValues([...currentValues, nextValue]);
    };

    return (
        <Form action={action} method={method} className="space-y-6">
            {({ errors, processing }) => (
                <>
                    <input type="hidden" name="is_active" value={isActive ? '1' : '0'} />
                    {selectedRoles.map((role) => (
                        <input key={`role-${role}`} type="hidden" name="roles[]" value={role} />
                    ))}
                    {selectedPermissions.map((permission) => (
                        <input
                            key={`permission-${permission}`}
                            type="hidden"
                            name="permissions[]"
                            value={permission}
                        />
                    ))}

                    <Card>
                        <CardHeader>
                            <CardTitle>{t('users.admin_form.card.title')}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <Tabs defaultValue="basic" className="grid gap-6 md:grid-cols-12">
                                <aside className="md:col-span-2">
                                    <TabsList
                                        className="h-auto w-full flex-col flex-nowrap items-stretch justify-start bg-transparent p-0"
                                        variant="default"
                                    >
                                        <TabsTrigger value="basic" className="w-full flex-none basis-auto">
                                            {t('users.admin_form.tabs.basic')}
                                        </TabsTrigger>
                                        <TabsTrigger value="roles" className="w-full flex-none basis-auto">
                                            {t('users.admin_form.tabs.roles')}
                                        </TabsTrigger>
                                        <TabsTrigger value="permissions" className="w-full flex-none basis-auto">
                                            {t('users.admin_form.tabs.permissions')}
                                        </TabsTrigger>
                                    </TabsList>
                                </aside>

                                <div className="min-w-0 md:col-span-10">
                                    <TabsContent value="basic" className="mt-0 space-y-4">
                                        <div className="grid gap-4 md:grid-cols-2">
                                            <div className="grid gap-2">
                                                <Label htmlFor="name">{t('users.admin_form.fields.name')}</Label>
                                                <Input id="name" name="name" defaultValue={user?.name} required />
                                                {errors.name ? (
                                                    <p className="text-sm text-destructive">{errors.name}</p>
                                                ) : null}
                                            </div>

                                            <div className="grid gap-2">
                                                <Label htmlFor="email">{t('users.admin_form.fields.email')}</Label>
                                                <Input
                                                    id="email"
                                                    name="email"
                                                    type="email"
                                                    defaultValue={user?.email}
                                                    required
                                                />
                                                {errors.email ? (
                                                    <p className="text-sm text-destructive">{errors.email}</p>
                                                ) : null}
                                            </div>
                                        </div>

                                        <div className="grid gap-2 md:max-w-md">
                                            <Label htmlFor="password">
                                                {t('users.admin_form.fields.password')}{' '}
                                                {method === 'patch' ? t('users.admin_form.fields.password_optional_hint') : ''}
                                            </Label>
                                            <Input
                                                id="password"
                                                name="password"
                                                type="password"
                                                autoComplete="new-password"
                                            />
                                            {errors.password ? (
                                                <p className="text-sm text-destructive">{errors.password}</p>
                                            ) : null}
                                        </div>

                                        <div className="rounded-md border p-3">
                                            <label className="flex items-center gap-2">
                                                <Checkbox
                                                    checked={isActive}
                                                    onCheckedChange={(checked) => setIsActive(Boolean(checked))}
                                                />
                                                <span className="text-sm font-medium">
                                                    {t('users.admin_form.fields.account_active')}
                                                </span>
                                                <Badge variant={isActive ? 'default' : 'secondary'}>
                                                    {isActive
                                                        ? t('users.admin_form.status.active')
                                                        : t('users.admin_form.status.inactive')}
                                                </Badge>
                                            </label>
                                            {errors.is_active ? (
                                                <p className="mt-2 text-sm text-destructive">{errors.is_active}</p>
                                            ) : null}
                                        </div>
                                    </TabsContent>

                                    <TabsContent value="roles" className="mt-0 space-y-3">
                                        <p className="text-sm text-muted-foreground">{t('users.admin_form.roles.hint')}</p>
                                        <div className="grid gap-3 md:grid-cols-2">
                                            {options.roles.map((role) => (
                                                <label
                                                    key={role}
                                                    className="flex items-center gap-2 rounded-md border p-3"
                                                >
                                                    <Checkbox
                                                        checked={selectedRoles.includes(role)}
                                                        onCheckedChange={() =>
                                                            toggleValue(selectedRoles, role, setSelectedRoles)
                                                        }
                                                    />
                                                    <span className="text-sm">{role}</span>
                                                </label>
                                            ))}
                                        </div>
                                        {errors.roles ? <p className="text-sm text-destructive">{errors.roles}</p> : null}
                                    </TabsContent>

                                    <TabsContent value="permissions" className="mt-0 space-y-5">
                                        <p className="text-sm text-muted-foreground">
                                            {t('users.admin_form.permissions.hint')}
                                        </p>
                                        {Object.entries(permissionGroups).map(([group, permissions]) => (
                                            <div key={group} className="space-y-2">
                                                <p className="text-xs font-medium uppercase text-muted-foreground">
                                                    {translatePermissionGroup(group, t)}
                                                </p>
                                                <div className="grid gap-3 md:grid-cols-2">
                                                    {permissions.map((permission) => (
                                                        <label
                                                            key={permission}
                                                            className="flex items-start gap-2 rounded-md border p-3"
                                                        >
                                                            <Checkbox
                                                                checked={selectedPermissions.includes(permission)}
                                                                onCheckedChange={() =>
                                                                    toggleValue(
                                                                        selectedPermissions,
                                                                        permission,
                                                                        setSelectedPermissions,
                                                                    )
                                                                }
                                                                className="mt-0.5"
                                                            />
                                                            <span className="text-sm">
                                                                {translatePermission(permission, t)}
                                                                {inherited.has(permission) ? (
                                                                    <span className="ml-2 text-xs text-muted-foreground">
                                                                        {t('users.admin_form.permissions.inherited_via_role')}
                                                                    </span>
                                                                ) : null}
                                                            </span>
                                                        </label>
                                                    ))}
                                                </div>
                                            </div>
                                        ))}

                                        {errors.permissions ? (
                                            <p className="text-sm text-destructive">{errors.permissions}</p>
                                        ) : null}
                                    </TabsContent>
                                </div>
                            </Tabs>
                        </CardContent>
                    </Card>

                    <div className="flex items-center gap-3 pb-4">
                        <Button type="submit" disabled={processing}>
                            {submitLabel}
                        </Button>
                        <Link
                            href="/admin/users"
                            className="text-sm text-muted-foreground hover:text-foreground"
                        >
                            {t('users.admin_form.buttons.cancel')}
                        </Link>
                    </div>
                </>
            )}
        </Form>
    );
}