import { useEffect, useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { api } from '../lib/api';
import Modal from './ui/Modal';
import PermissionAccordions from './ui/PermissionAccordions';
import { usePermissionCatalog, alignPermissions } from '../hooks/usePermissionCatalog';
import type { Secretary, SecretaryPermissions } from '../types';

/**
 * دسترسی‌های یک منشی — جدا از فرمِ پروفایل.
 *
 * تا پیش از این هر دو در یک مودال بودند و افزودنِ یک منشی یعنی تصمیم‌گیری دربارهٔ
 * همهٔ منابع در همان لحظه. با رجیستریِ داینامیک تعداد منابع با هر صفحهٔ تازه بیشتر
 * می‌شود، پس آن مودال ذاتاً بلندتر می‌شد.
 *
 * ذخیره روی **همهٔ** ردیف‌های رابطه اجرا می‌شود: یک منشی به ازای هر پزشک یک ردیف
 * دارد و مجوزها باید در همه یکسان بمانند — همان قاعده‌ای که ویرایش پروفایل دارد.
 */
export default function SecretaryPermissionsModal({
    open,
    secretary,
    links,
    isClinic,
    readOnly,
    onClose,
    onSaved,
}: {
    open: boolean;
    secretary: Secretary | null;
    /** uuid هر رابطهٔ پزشک-منشی. */
    links: string[];
    isClinic: boolean;
    readOnly?: boolean;
    onClose: () => void;
    onSaved?: () => void;
}) {
    const catalog = usePermissionCatalog();
    const [permissions, setPermissions] = useState<SecretaryPermissions>({});

    // شکل را کاتالوگ می‌دهد؛ تا نیامده مقداردهی نمی‌شود وگرنه سوییچ‌ها از
    // uncontrolled به controlled می‌پرند و مقدارِ ذخیره‌شده پاک می‌شود.
    useEffect(() => {
        if (!open || catalog.isLoading) return;
        setPermissions(alignPermissions(secretary?.permissions, catalog.resources));
    }, [open, secretary, catalog.isLoading, catalog.resources]);

    const save = useMutation({
        mutationFn: () =>
            Promise.all(
                links.map((uuid) =>
                    api.patch(`/api/v1/secretary/${uuid}`, {
                        permissions: { version: 1, resources: permissions },
                    }),
                ),
            ),
        onSuccess: () => {
            toast.success('دسترسی‌های منشی ذخیره شد');
            onSaved?.();
            onClose();
        },
        onError: (e: Error) => toast.error(e.message),
    });

    const setPermission = (section: string, item: string, value: boolean) =>
        setPermissions((prev) => ({
            ...prev,
            [section]: { ...prev[section], [item]: value },
        }));

    return (
        <Modal
            open={open}
            size="lg"
            title={`دسترسی‌های ${secretary?.user_name ?? 'منشی'}`}
            onClose={onClose}
            footer={
                <>
                    <button type="button" className="btn ghost sm" onClick={onClose}>
                        {readOnly ? 'بستن' : 'انصراف'}
                    </button>
                    {!readOnly && (
                        <button
                            type="button"
                            className="btn primary sm"
                            disabled={save.isPending || catalog.isLoading}
                            onClick={() => save.mutate()}
                        >
                            {save.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'}
                        </button>
                    )}
                </>
            }
        >
            {catalog.isLoading ? (
                <p className="muted">در حال بارگذاری فهرست دسترسی‌ها...</p>
            ) : catalog.isError ? (
                <p className="muted">فهرست دسترسی‌ها خوانده نشد. مودال را دوباره باز کنید.</p>
            ) : (
                <>
                    <p className="muted" style={{ fontSize: 12.5, marginBottom: 14, lineHeight: 1.9 }}>
                        هر بخش را باز کنید تا اجزایش را ببینید. عددِ کنار هر بخش می‌گوید چند مورد از
                        آن روشن است.
                    </p>
                    <PermissionAccordions
                        permissions={permissions}
                        onChange={setPermission}
                        disabled={readOnly}
                        isClinic={isClinic}
                        resources={catalog.resources}
                    />
                </>
            )}
        </Modal>
    );
}