import { useEffect, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { Link } from "react-router"; import { toast } from "sonner"; import SettingsLayout from "../components/layout/SettingsLayout"; import ConfirmDialog from "../components/ui/ConfirmDialog"; import Modal from "../components/ui/Modal"; import type { ApiResponse } from "../lib/api"; import { api } from "../lib/api"; import { formatDate, digitsOnly, IRAN_MOBILE_RE, IRAN_NATIONAL_CODE_RE } from "../lib/utils"; import { useSubscription } from "../hooks/useSubscription"; import { useAuthStore } from "../stores/authStore"; import type { Secretary, SecretaryPermissions } from "../types"; import SecretaryPermissionsModal from "../components/SecretaryPermissionsModal"; import Switch from '../components/ui/Switch'; // ── SVG icons (copied verbatim from clinic-pro-tauri) ─────────────────────── const PlusIcon = () => ( ); const EyeIcon = () => ( ); const EditIcon = () => ( ); const ShieldIcon = () => ( ); const ChevronDown = ({ open }: { open: boolean }) => ( ); // ── Avatar (first-letter gradient fallback, like tauri) ───────────────────── function Avatar({ name, size = 32 }: { name?: string; size?: number }) { const firstLetter = (name?.trim().charAt(0) || "?").toUpperCase(); return (

{firstLetter}

); } // ── Permission sections (based on existing clinicpro pages) ───────────────── // ── Text field (tauri DefaultTextField look) ──────────────────────────────── function DefaultTextField({ placeholder, value, onChange, disabled, multiline, rows, numeric, maxDigits, }: { placeholder?: string; value: string; onChange: (v: string) => void; disabled?: boolean; multiline?: boolean; rows?: number; /** فیلد فقط‌عددی: ارقام فارسی/عربی به لاتین تبدیل و غیررقم حذف می‌شود. */ numeric?: boolean; maxDigits?: number; }) { const cls = "w-full bg-[var(--bg)] dark:bg-[var(--surface)] rounded-[8px] border border-[var(--border-2)] dark:border-[var(--border)] " + "text-[var(--text-2)] dark:text-[var(--text)] text-[16px] font-normal px-[12px] py-[12.5px] outline-none " + "focus:border-[var(--primary)] disabled:opacity-70"; if (multiline) { return (

onChange(e.target.value)}
            />
        );
    }
    return (
        <input
            className={cls}
            placeholder={placeholder}
            value={value}
            disabled={disabled}
            {...(numeric ? { type: "tel", inputMode: "numeric" as const, dir: "ltr" as const } : {})}
            onChange={(e) => onChange(numeric ? digitsOnly(e.target.value, maxDigits) : e.target.value)}
        />
    );
}

// ── Add/Edit/View modal ─────────────────────────────────────────────────────

type ModalMode = "add" | "edit" | "view";

interface FormState {
    name: string;
    family: string;
    telephone: string;
    national_code: string;
    address: string;
}

// انتخاب چند پزشک برای منشیِ کلینیک، هم در افزودن و هم در ویرایش
    const showDoctorPicker = isClinic && mode !== "view";

useEffect(() => {
        if (!open) return;
        setDoctorUuids([]);
        if ((mode === "edit" || mode === "view") && data) {
            const secretary = data.primary;
            const parts = (secretary.user_name ?? "").split(" ");
            setDoctorUuids(data.doctorUuids);
            setForm({
                name: parts[0] ?? "",
                family: parts.slice(1).join(" "),
                telephone: secretary.mobile_number ?? "",
                national_code: secretary.national_code ?? "",
                address: secretary.address ?? "",
            });
        } else {
            setForm({
                name: "",
                family: "",
                telephone: "",
                national_code: "",
                address: "",
            });
        }
    }, [open, mode, data]);

const disabled = mode === "view";
    const title =
        mode === "add"
            ? "اضافه کردن منشی جدید"
            : mode === "edit"
              ? "ویرایش منشی"
              : "مشاهده اطلاعات منشی";

const setField = (field: keyof FormState, value: string) =>
        setForm((prev) => ({ ...prev, [field]: value }));

const handleSubmit = () => {
        if (mode === "view") {
            onClose();
            return;
        }
        if (!form.name.trim()) return toast.error("لطفاً نام را وارد کنید");
        if (!form.family.trim()) return toast.error("لطفاً نام خانوادگی را وارد کنید");
        if (!form.telephone.trim()) return toast.error("لطفاً شماره تلفن را وارد کنید");
        if (!IRAN_MOBILE_RE.test(digitsOnly(form.telephone, 11)))
            return toast.error("شماره تلفن باید 11 رقم و با 09 شروع شود");
        if (form.national_code.trim() && !IRAN_NATIONAL_CODE_RE.test(digitsOnly(form.national_code, 10)))
            return toast.error("کد ملی باید ۱۰ رقم باشد");
        if (showDoctorPicker && doctorUuids.length === 0)
            return toast.error("حداقل یک پزشک را انتخاب کنید");
        onSubmit(form, doctorUuids);
    };

return (
        <Modal
            open={open}
            onClose={onClose}
            title={title}
            size="lg"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="border border-[var(--primary)] dark:border-transparent dark:bg-[var(--primary-soft2)] text-[var(--primary)] dark:text-[var(--surface)]
                            h-[40px] md:h-[44px] lg:h-[48px] py-[11px] px-[48px] rounded-[4px] cursor-pointer"
                    >
                        {mode === "view" ? "بستن" : "انصراف"}
                    </button>
                    {mode !== "view" && (
                        <button
                            onClick={handleSubmit}
                            disabled={saving}
                            className="bg-[var(--primary)] text-[var(--on-primary)] rounded-[4px] h-[40px] md:h-[44px] lg:h-[48px] py-[11px] px-[48px] cursor-pointer disabled:opacity-60"
                        >
                            {saving ? "در حال ذخیره..." : "ذخیره"}
                        </button>
                    )}
                </>
            }
        >
            <div dir="rtl" className="flex flex-col justify-start items-start gap-[24px] w-full">
                {/* انتخاب پزشکان (فقط افزودن منشیِ کلینیک) */}
                {showDoctorPicker && (
                    <div className="w-full">
                        <div className="flex items-center justify-between mb-[16px]">
                            <p className="text-[var(--text)] text-[16px] font-bold">
                                پزشکانِ این منشی
                            </p>
                            <span className="text-[13px] text-[var(--text-2)]">{doctorUuids.length} انتخاب‌شده</span>
                        </div>
                        <p className="text-[13px] text-[var(--text-2)] mb-[12px]">
                            منشی فقط به نوبت‌ها و اطلاعاتِ پزشکانِ انتخاب‌شده دسترسی خواهد داشت.
                        </p>
                        <DoctorMultiSelect doctors={clinicDoctors} selected={doctorUuids} onChange={setDoctorUuids} />
                    </div>
                )}

{/* اطلاعات پایه */}
                <div className="w-full">
                    <p className="text-[var(--text)] text-[16px] font-bold mb-[16px]">
                        اطلاعات پایه
                    </p>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
                        <div className="flex w-full flex-col items-start justify-start gap-[12px]">
                            <p className="w-full text-right text-[var(--text)] text-[14px] font-medium">نام</p>
                            <DefaultTextField placeholder="نام" value={form.name} onChange={(v) => setField("name", v)} disabled={disabled} />
                        </div>
                        <div className="flex w-full flex-col items-start justify-start gap-[12px]">
                            <p className="w-full text-right text-[var(--text)] text-[14px] font-medium">نام خانوادگی</p>
                            <DefaultTextField placeholder="نام خانوادگی" value={form.family} onChange={(v) => setField("family", v)} disabled={disabled} />
                        </div>
                    </div>
                </div>

<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[16px]">
                    <div className="flex w-full flex-col items-start justify-start gap-[12px]">
                        <p className="w-full text-right text-[var(--text)] text-[14px] font-medium">شماره موبایل</p>
                        <DefaultTextField numeric maxDigits={11} placeholder="09121234567" value={form.telephone} onChange={(v) => setField("telephone", v)} disabled={disabled || mode === "edit"} />
                    </div>
                    <div className="flex w-full flex-col items-start justify-start gap-[12px]">
                        <p className="w-full text-right text-[var(--text)] text-[14px] font-medium">کد ملی</p>
                        <DefaultTextField numeric maxDigits={10} placeholder="کد ملی" value={form.national_code} onChange={(v) => setField("national_code", v)} disabled={disabled} />
                    </div>
                </div>

<div className="flex w-full flex-col items-start justify-start gap-[12px]">
                    <p className="w-full text-right text-[var(--text)] text-[14px] font-medium">آدرس</p>
                    <DefaultTextField placeholder="آدرس" value={form.address} onChange={(v) => setField("address", v)} disabled={disabled} multiline rows={2} />
                </div>

{mode === "add" && (
                    <p className="w-full text-right text-[var(--text-3)] text-[12.5px] leading-[1.9]">
                        بعد از ذخیره، پنجرهٔ دسترسی‌ها باز می‌شود تا مجوزهای این منشی را تنظیم کنید.
                    </p>
                )}
            </div>
        </Modal>
    );
}

// ── Row buttons (view + edit) ───────────────────────────────────────────────

// ── Grouping ─────────────────────────────────────────────────────────────────

/**
 * `doctor_secretaries` holds one link row per (doctor, secretary) pair, so a
 * secretary shared between N doctors arrives as N rows. The UI shows one row
 * per person; every action fans back out over `links`.
 */
interface SecretaryGroup {
    key: string;
    primary: Secretary;
    links: Secretary[];
    doctorNames: string[];
    doctorUuids: string[];
}

// ── Desktop table ────────────────────────────────────────────────────────────

// ── Mobile cards ─────────────────────────────────────────────────────────────

// ── Main content ─────────────────────────────────────────────────────────────

interface ClinicDoctor {
    uuid: string;
    name: string;
}

// چک‌لیستِ چند-انتخابی پزشکان کلینیک برای تخصیص یک منشیِ مشترک
function DoctorMultiSelect({
    doctors,
    selected,
    onChange,
}: {
    doctors: ClinicDoctor[];
    selected: string[];
    onChange: (v: string[]) => void;
}) {
    const [q, setQ] = useState("");
    const filtered = q ? doctors.filter((d) => d.name.includes(q)) : doctors;
    const toggle = (uuid: string) =>
        onChange(selected.includes(uuid) ? selected.filter((x) => x !== uuid) : [...selected, uuid]);
    const allSelected = doctors.length > 0 && selected.length === doctors.length;
    const toggleAll = () => onChange(allSelected ? [] : doctors.map((d) => d.uuid));

return (
        <div className="w-full border border-[var(--border)] rounded-[8px] overflow-hidden">
            {/* هدر: جستجو + انتخاب همه */}
            <div className="flex items-center gap-[8px] p-[10px] border-b border-[var(--border)] bg-[var(--surface)]">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="none" className="flex-shrink-0">
                    <path d="M9 16A7 7 0 109 2a7 7 0 000 14zM18 18l-3.5-3.5" style={{ stroke: 'var(--text-3)' }} strokeWidth="1.5" strokeLinecap="round" />
                </svg>
                <input
                    value={q}
                    onChange={(e) => setQ(e.target.value)}
                    placeholder="جستجوی پزشک..."
                    className="flex-1 text-[13px] bg-transparent outline-none text-[var(--text)]"
                />
                <button
                    type="button"
                    onClick={toggleAll}
                    className="text-[12px] text-[var(--primary)] font-medium whitespace-nowrap cursor-pointer"
                >
                    {allSelected ? "لغو همه" : "انتخاب همه"}
                </button>
            </div>

{/* چیپ‌های انتخاب‌شده */}
            {selected.length > 0 && (
                <div className="flex flex-wrap gap-[6px] p-[10px] border-b border-[var(--border)]">
                    {selected.map((uuid) => {
                        const d = doctors.find((x) => x.uuid === uuid);
                        if (!d) return null;
                        return (
                            <span
                                key={uuid}
                                onClick={() => toggle(uuid)}
                                className="inline-flex items-center gap-[4px] bg-[var(--primary-soft)] text-[var(--primary)] text-[12px] px-[8px] py-[3px] rounded-full cursor-pointer"
                            >
                                {d.name}
                                <span className="text-[14px] leading-none">×</span>
                            </span>
                        );
                    })}
                </div>
            )}

{/* لیست پزشکان */}
            <div className="max-h-[220px] overflow-y-auto">
                {filtered.length === 0 ? (
                    <p className="text-center text-[12px] text-[var(--text-2)] py-[14px]">نتیجه‌ای یافت نشد</p>
                ) : (
                    filtered.map((d) => {
                        const checked = selected.includes(d.uuid);
                        return (
                            <label
                                key={d.uuid}
                                className={
                                    "flex items-center gap-[10px] px-[12px] py-[9px] cursor-pointer border-b border-[var(--border)] last:border-b-0 " +
                                    (checked ? "bg-[var(--primary-soft)] dark:bg-[var(--surface-3)]" : "hover:bg-[var(--surface)] dark:hover:bg-[var(--surface-2)]")
                                }
                            >
                                <Switch checked={checked} onChange={() => toggle(d.uuid)} ariaLabel={d.name} />
                                <Avatar name={d.name} size={26} />
                                <span className="text-[13px] text-[var(--text)]">{d.name}</span>
                            </label>
                        );
                    })
                )}
            </div>
        </div>
    );
}

function MySecretariesPageContent() {
    const qc = useQueryClient();
    const { doctorUuid, dbUuid, primaryRole } = useAuthStore();
    const isClinic = primaryRole === "clinic";
    const { maxSecretaries } = useSubscription();

const [tab, setTab] = useState(0); // 0: منشی های فعلی، 1: منشی های قبلی
    const activeDoctorUuid = doctorUuid ?? "";

const [modalOpen, setModalOpen] = useState(false);
    const [modalMode, setModalMode] = useState<ModalMode>("add");
    const [permOpen, setPermOpen] = useState(false);
    const [permTarget, setPermTarget] = useState<SecretaryGroup | null>(null);
    const [selected, setSelected] = useState<SecretaryGroup | null>(null);
    const [deactivateTarget, setDeactivateTarget] = useState<SecretaryGroup | null>(null);

// clinic: list of doctors
    const { data: clinicDoctorsData } = useQuery<
        ApiResponse<{ data: ClinicDoctor[] }>
    >({
        queryKey: ["clinic-doctors", dbUuid],
        queryFn: () => api.get(`/api/v1/clinic/doctor-list/${dbUuid}`),
        enabled: isClinic && !!dbUuid,
    });
    const clinicDoctors: ClinicDoctor[] = clinicDoctorsData?.data?.data ?? [];

// clinic: all secretaries across clinic
    const { data: clinicSecrData, isLoading: clinicSecrLoading } = useQuery<ApiResponse<Secretary[]>>({
        queryKey: ["my-secretaries-clinic", dbUuid],
        queryFn: () => api.get(`/api/v1/secretaries/clinic/${dbUuid}`),
        enabled: isClinic && !!dbUuid,
    });

// doctor: secretaries for the doctor
    const { data: doctorSecrData, isLoading: doctorSecrLoading } = useQuery<ApiResponse<Secretary[]>>({
        queryKey: ["my-secretaries", activeDoctorUuid],
        queryFn: () => api.get(`/api/v1/secretaries/${activeDoctorUuid}`),
        enabled: !isClinic && !!activeDoctorUuid,
    });

const allSecretaries = isClinic ? (clinicSecrData?.data ?? []) : (doctorSecrData?.data ?? []);
    const isLoading = isClinic ? clinicSecrLoading : doctorSecrLoading;

// client-side filter by tab (active/previous), then one row per person
    const secretaries = groupBySecretary(
        allSecretaries.filter((s) => (tab === 0 ? s.is_active : !s.is_active)),
    );
    // سهمیه پلن بر اساس تعداد افراد است، نه تعداد رابطه‌های پزشک-منشی
    const activeSecretaryCount = new Set(
        allSecretaries.filter((s) => s.is_active).map((s) => s.secretary_uuid ?? s.uuid),
    ).size;
    const atLimit = activeSecretaryCount >= maxSecretaries;

const invalidate = () => {
        qc.invalidateQueries({ queryKey: ["my-secretaries"] });
        qc.invalidateQueries({ queryKey: ["my-secretaries-clinic"] });
    };

// منشیِ تازه با پیش‌فرضِ نقش ساخته می‌شود؛ بلافاصله پنجرهٔ دسترسی‌ها باز
            // می‌شود تا مالک همان‌جا تنظیمش کند، بدون اینکه فرمِ افزودن طولانی شود.
            // پاسخ دو شکل دارد: چندپزشکیِ کلینیک (`created`) و تک‌پزشکی (`data`).
            const payload = res?.data?.data ?? res?.data;
            const rows: Secretary[] = payload?.created ?? (payload?.uuid ? [payload] : []);
            if (rows.length > 0) {
                setPermTarget(groupBySecretary(rows)[0] ?? null);
                setPermOpen(true);
            }
        },
        onError: (e: any) => toast.error(e.message),
    });

const saving = createMutation.isPending || updateMutation.isPending;

const handleAddClick = () => {
        if (atLimit) return toast.error(`حداکثر ${maxSecretaries} منشی مجاز است؛ برای افزودن، پنل را ارتقا دهید`);
        setModalMode("add");
        setSelected(null);
        setModalOpen(true);
    };

const openPermissions = (g: SecretaryGroup) => {
        setPermTarget(g);
        setPermOpen(true);
    };

const openModal = (mode: ModalMode, g: SecretaryGroup) => {
        setModalMode(mode);
        setSelected(g);
        setModalOpen(true);
    };

return (
        <div dir="rtl">
            <div className="flex items-center justify-between">
                <p className="text-[var(--text)] text-[20px] font-bold">لیست منشی ها</p>
            </div>

{/* تب‌ها + دکمه افزودن */}
            <div className="w-full flex items-end justify-between mt-[20px]">
                <div className="flex items-center gap-[8px] border-b border-[var(--border)]">
                    {["منشی های فعلی", "منشی های قبلی"].map((label, idx) => (
                        <button
                            key={idx}
                            onClick={() => setTab(idx)}
                            className={
                                "px-[12px] py-[10px] text-[14px] md:text-[16px] font-bold cursor-pointer border-b-2 -mb-px " +
                                (tab === idx
                                    ? "text-[var(--primary)] border-[var(--primary)]"
                                    : "text-[var(--text)] dark:text-[var(--text-2)] border-transparent")
                            }
                        >
                            {label}
                        </button>
                    ))}
                </div>
                <button
                    onClick={handleAddClick}
                    className="shadow-none gap-[8px] bg-[var(--primary)] text-[var(--on-primary)] text-[14px] md:text-[15px] lg:text-[16px]
                        font-medium py-[10px] px-[16px] h-[43px] md:h-[45px] lg:h-[48px] rounded-[4px] cursor-pointer
                        flex items-center disabled:opacity-60"
                >
                    <PlusIcon />
                    اضافه کردن منشی
                </button>
            </div>

{!isClinic && !doctorUuid ? (
                <div className="mt-[24px] text-center text-[var(--text-2)] py-[40px]">پروفایل پزشک یافت نشد</div>
            ) : isLoading ? (
                <div className="mt-[24px] text-center text-[var(--text-2)] py-[40px]">در حال بارگذاری...</div>
            ) : secretaries.length === 0 ? (
                <div className="mt-[24px] text-center text-[var(--text-2)] py-[60px]">
                    {tab === 0 ? "هنوز منشی فعالی اضافه نشده است" : "منشی قبلی‌ای وجود ندارد"}
                </div>
            ) : (
                <>
                    <SecretaryTable
                        data={secretaries}
                        showDoctor={isClinic}
                        onView={(s) => openModal("view", s)}
                        onEdit={(s) => openModal("edit", s)}
                        onDeactivate={(s) => setDeactivateTarget(s)}
                        onPermissions={openPermissions}
                    />
                    <SecretaryCards
                        data={secretaries}
                        showDoctor={isClinic}
                        onView={(s) => openModal("view", s)}
                        onEdit={(s) => openModal("edit", s)}
                        onDeactivate={(s) => setDeactivateTarget(s)}
                        onPermissions={openPermissions}
                    />
                </>
            )}

{atLimit && (
                <div className="mt-[16px]">
                    <Link to="/admin/subscription" className="text-[var(--primary)] text-[13px] underline">
                        برای افزودن منشی بیشتر، پنل خود را ارتقا دهید
                    </Link>
                </div>
            )}

<SecretaryModal
                open={modalOpen}
                mode={modalMode}
                data={selected}
                saving={saving}
                isClinic={isClinic}
                clinicDoctors={clinicDoctors}
                onClose={() => setModalOpen(false)}
                onSubmit={handleModalSubmit}
            />

<SecretaryPermissionsModal
                open={permOpen}
                secretary={permTarget?.primary ?? null}
                links={permTarget?.links.map((l) => l.uuid) ?? []}
                isClinic={isClinic}
                onClose={() => setPermOpen(false)}
                onSaved={invalidate}
            />

<ConfirmDialog
                open={!!deactivateTarget}
                title={deactivateTarget?.primary.is_active ? "لغو همکاری با منشی" : "فعال‌سازی منشی"}
                message={
                    deactivateTarget?.primary.is_active
                        ? `آیا مطمئن هستید که می‌خواهید همکاری با «${deactivateTarget?.primary.user_name}»` +
                          (deactivateTarget && deactivateTarget.doctorNames.length > 1
                              ? ` برای همه‌ی ${deactivateTarget.doctorNames.length} پزشک`
                              : "") +
                          " را لغو کنید؟"
                        : `آیا مطمئن هستید که می‌خواهید «${deactivateTarget?.primary.user_name}» را دوباره فعال کنید؟`
                }
                confirmLabel={deactivateTarget?.primary.is_active ? "لغو همکاری" : "فعال‌سازی"}
                danger={deactivateTarget?.primary.is_active}
                loading={toggleActiveMutation.isPending}
                onConfirm={() =>
                    deactivateTarget &&
                    toggleActiveMutation.mutate({
                        group: deactivateTarget,
                        active: !deactivateTarget.primary.is_active,
                    })
                }
                onCancel={() => setDeactivateTarget(null)}
            />
        </div>
    );
}

export default function MySecretariesPage() {
    return (
        <SettingsLayout active="secretary">
            <MySecretariesPageContent />
        </SettingsLayout>
    );
}