import { router, usePage } from '@inertiajs/react';
import { Users } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogIconClose,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import PasswordInput from '@/components/password-input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { ClientEntity, ClientFormSelectUser } from '@/features/clients/types';
import { useI18n } from '@/hooks/use-i18n';

type PortalTab = 'assign' | 'create';

type ClientPortalUsersModalProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    client: ClientEntity | null;
    portalUsers: ClientFormSelectUser[];
    onAfterChange: () => void;
};

export function ClientPortalUsersModal({
    open,
    onOpenChange,
    client,
    portalUsers,
    onAfterChange,
}: ClientPortalUsersModalProps) {
    const { t } = useI18n();
    const page = usePage<{ errors: Record<string, string | string[]> }>();
    const [tab, setTab] = useState<PortalTab>('assign');
    const [assignIds, setAssignIds] = useState<number[]>([]);
    const [assignSubmitting, setAssignSubmitting] = useState(false);
    const [portalCreate, setPortalCreate] = useState({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
    });
    const [portalSubmitting, setPortalSubmitting] = useState(false);

    useEffect(() => {
        if (open && client) {
            setAssignIds([...client.portal_user_ids]);
            setPortalCreate({
                name: '',
                email: '',
                password: '',
                password_confirmation: '',
            });
            setTab('assign');
        }
    }, [open, client]);

    const errorBanner = useMemo(() => {
        const errs = page.props.errors ?? {};
        const keys = Object.keys(errs);
        if (keys.length === 0) {
            return null;
        }
        const first = errs[keys[0] ?? ''];
        const message = Array.isArray(first) ? first[0] : first;

        return (
            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                {message ?? t('clients.admin_form.sheet.error_fallback')}
            </div>
        );
    }, [page.props.errors, t]);

    const saveAssignments = () => {
        if (!client) {
            return;
        }

        router.patch(
            `/admin/clients/${client.id}/portal-user-assignments`,
            { client_user_ids: assignIds },
            {
                preserveScroll: true,
                onStart: () => setAssignSubmitting(true),
                onFinish: () => setAssignSubmitting(false),
                onSuccess: () => onAfterChange(),
            },
        );
    };

    const submitPortalUser = () => {
        if (!client) {
            return;
        }

        router.post(
            `/admin/clients/${client.id}/portal-users`,
            {
                name: portalCreate.name.trim(),
                email: portalCreate.email.trim(),
                password: portalCreate.password,
                password_confirmation: portalCreate.password_confirmation,
            },
            {
                preserveScroll: true,
                onStart: () => setPortalSubmitting(true),
                onFinish: () => setPortalSubmitting(false),
                onSuccess: () => {
                    setPortalCreate({
                        name: '',
                        email: '',
                        password: '',
                        password_confirmation: '',
                    });
                    onAfterChange();
                    setTab('assign');
                },
            },
        );
    };

    const clientName = client?.name ?? '';

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="flex max-h-[min(90vh,720px)] w-[calc(100%-2rem)] max-w-4xl flex-col gap-0 overflow-hidden px-0 sm:max-w-4xl">
                <DialogHeader className="relative mx-0 shrink-0 flex-row items-start gap-3 border-b px-4 py-4 pr-14 sm:px-5">
                    <div className="flex min-w-0 flex-1 items-start gap-3">
                        <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
                            <Users className="h-5 w-5" aria-hidden />
                        </span>
                        <div className="min-w-0 space-y-1">
                            <DialogTitle className="text-left text-base sm:text-lg">{t('clients.portal_modal.title')}</DialogTitle>
                            <DialogDescription className="text-left">
                                <span className="font-medium text-foreground">{clientName}</span>
                                <span className="text-muted-foreground"> · </span>
                                {t('clients.portal_modal.description')}
                            </DialogDescription>
                        </div>
                    </div>
                    <DialogIconClose className="absolute right-3 top-3" aria-label={t('clients.portal_modal.close_sr')} />
                </DialogHeader>

                <div className="flex min-h-0 flex-1 flex-col">
                    {!client ? (
                        <DialogBody className="flex-none overflow-visible">
                            <p className="text-sm text-muted-foreground">{t('clients.admin_form.sheet.loading_client')}</p>
                        </DialogBody>
                    ) : (
                        <Tabs
                            value={tab}
                            onValueChange={(value) => setTab(value as PortalTab)}
                            className="flex min-h-0 flex-1 flex-col gap-0 sm:flex-row sm:items-stretch"
                            aria-label={t('clients.portal_modal.title')}
                        >
                            <TabsList className="h-auto w-full shrink-0 flex-row gap-1.5 rounded-none border-b border-border px-4 py-2 sm:h-auto sm:w-52 sm:flex-col sm:items-stretch sm:justify-start sm:rounded-none sm:border-b-0 sm:border-r sm:bg-transparent sm:p-3">
                                <TabsTrigger value="assign">
                                    {t('clients.portal_modal.tab_assign')}
                                </TabsTrigger>
                                <TabsTrigger value="create">
                                    {t('clients.portal_modal.tab_create')}
                                </TabsTrigger>
                            </TabsList>

                            <DialogBody className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
                                <TabsContent value="assign" className="m-0 mt-0 flex-1 overflow-y-auto p-0">
                                    {errorBanner}
                                    <div className="space-y-4">
                                        <div>
                                            <h3 className="text-sm font-semibold">{t('clients.portal_modal.assign_heading')}</h3>
                                            <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
                                                {t('clients.portal_modal.assign_hint')}
                                            </p>
                                        </div>
                                        <div className="max-h-[min(40vh,320px)] space-y-2 overflow-y-auto rounded-lg border border-border p-2">
                                            {portalUsers.length === 0 ? (
                                                <p className="text-sm text-muted-foreground">{t('clients.portal_modal.no_portal_users')}</p>
                                            ) : (
                                                portalUsers.map((u) => (
                                                    <label
                                                        key={u.id}
                                                        className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/60"
                                                    >
                                                        <Checkbox
                                                            checked={assignIds.includes(u.id)}
                                                            onCheckedChange={(v) => {
                                                                const checked = v === true;
                                                                setAssignIds((prev) =>
                                                                    checked ? [...prev, u.id] : prev.filter((id) => id !== u.id),
                                                                );
                                                            }}
                                                        />
                                                        <span className="text-sm">
                                                            {u.name}
                                                            {u.email ? <span className="text-muted-foreground"> — {u.email}</span> : null}
                                                        </span>
                                                    </label>
                                                ))
                                            )}
                                        </div>
                                        <LoadingButton
                                            type="button"
                                            loading={assignSubmitting}
                                            loadingPosition="end"
                                            disabled={portalUsers.length === 0}
                                            onClick={saveAssignments}
                                        >
                                            {assignSubmitting
                                                ? t('clients.portal_modal.assign_saving')
                                                : t('clients.portal_modal.assign_save')}
                                        </LoadingButton>
                                    </div>
                                </TabsContent>

                                <TabsContent value="create" className="m-0 mt-0 flex-1 overflow-y-auto p-0">
                                    {errorBanner}
                                    <div className="space-y-4">
                                        <div>
                                            <p className="text-sm font-medium">{t('clients.portal_user.section_title')}</p>
                                            <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
                                                {t('clients.portal_user.section_hint')}
                                            </p>
                                        </div>
                                        <div className="grid gap-3 sm:grid-cols-2">
                                            <div className="space-y-2 sm:col-span-2">
                                                <Label htmlFor="pm-name">{t('clients.portal_user.field_name')}</Label>
                                                <Input
                                                    id="pm-name"
                                                    value={portalCreate.name}
                                                    onChange={(e) => setPortalCreate((p) => ({ ...p, name: e.target.value }))}
                                                    autoComplete="name"
                                                />
                                            </div>
                                            <div className="space-y-2 sm:col-span-2">
                                                <Label htmlFor="pm-email">{t('clients.portal_user.field_email')}</Label>
                                                <Input
                                                    id="pm-email"
                                                    type="email"
                                                    value={portalCreate.email}
                                                    onChange={(e) => setPortalCreate((p) => ({ ...p, email: e.target.value }))}
                                                    autoComplete="off"
                                                />
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="pm-pass">{t('clients.portal_user.field_password')}</Label>
                                                <PasswordInput
                                                    id="pm-pass"
                                                    value={portalCreate.password}
                                                    onChange={(e) => setPortalCreate((p) => ({ ...p, password: e.target.value }))}
                                                    autoComplete="new-password"
                                                    showPasswordAriaLabel={t('clients.portal_user.password_show')}
                                                    hidePasswordAriaLabel={t('clients.portal_user.password_hide')}
                                                />
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="pm-pass2">{t('clients.portal_user.field_password_confirmation')}</Label>
                                                <PasswordInput
                                                    id="pm-pass2"
                                                    value={portalCreate.password_confirmation}
                                                    onChange={(e) =>
                                                        setPortalCreate((p) => ({ ...p, password_confirmation: e.target.value }))
                                                    }
                                                    autoComplete="new-password"
                                                    showPasswordAriaLabel={t('clients.portal_user.password_show')}
                                                    hidePasswordAriaLabel={t('clients.portal_user.password_hide')}
                                                />
                                            </div>
                                        </div>
                                        <LoadingButton
                                            type="button"
                                            variant="secondary"
                                            className="w-full sm:w-auto"
                                            loading={portalSubmitting}
                                            loadingPosition="end"
                                            disabled={
                                                portalCreate.name.trim() === '' ||
                                                portalCreate.email.trim() === '' ||
                                                portalCreate.password === '' ||
                                                portalCreate.password_confirmation === ''
                                            }
                                            onClick={submitPortalUser}
                                        >
                                            {portalSubmitting
                                                ? t('clients.portal_user.submit_loading')
                                                : t('clients.portal_user.submit')}
                                        </LoadingButton>
                                    </div>
                                </TabsContent>
                            </DialogBody>
                        </Tabs>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
}