clinicpro/assets/admin/components/layout/SettingsLayout.tsx

import React from 'react';
import {
  CreditCardIcon, UserIcon, CalendarDaysIcon, BuildingOffice2Icon,
  BanknotesIcon, UsersIcon, ShieldCheckIcon,
  TagIcon, ChatBubbleLeftRightIcon, UserCircleIcon, UserPlusIcon, ReceiptPercentIcon,
} from '@heroicons/react/24/outline';
import PurchaseSubscriptionSidebar from './PurchaseSubscriptionSidebar';

// ── Settings menu configuration ─────────────────────────────────────────────
// Source of truth for the *mobile* settings list (SettingsMenuPage). The desktop
// shell renders the shared PurchaseSubscriptionSidebar instead, so there is a
// single settings sidebar across all settings pages (no duplicate menu).
export type SettingsMenuItem = {
  key: string;
  label: string;
  icon: React.ElementType;
  to?: string;
  /** when set, the item is only shown to these roles (omit = every role) */
  roles?: string[];
  /** [resource, action] — منشی فقط با داشتن این مجوز آیتم را می‌بیند. */
  perm?: [string, string];
  /** برای منشی همیشه نمایش داده می‌شود (حساب کاربری). */
  alwaysOpen?: boolean;
};

export const SETTINGS_MENU: SettingsMenuItem[] = [
  { key: 'subscription', label: 'خرید اشتراک',       icon: CreditCardIcon,           to: '/admin/subscription',         perm: ['subscription', 'view'] },
  { key: 'doctor',       label: 'مدیریت پزشک',        icon: UserIcon,                 to: '/admin/profile',              roles: ['doctor'] },
  { key: 'appointment',  label: 'مدیریت نوبت دهی',    icon: CalendarDaysIcon,         to: '/admin/appointment-settings', roles: ['doctor'], perm: ['appointment_settings', 'view'] },
  { key: 'appointment',  label: 'مدیریت نوبت دهی',    icon: CalendarDaysIcon,         to: '/admin/settings/appointment-settings', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
  { key: 'clinic-doctors', label: 'پزشکان کلینیک',    icon: BuildingOffice2Icon,      to: '/admin/settings/clinic-doctors', roles: ['clinic'], perm: ['clinic_doctors', 'view'] },
  { key: 'payment',      label: 'مدیریت پرداخت',      icon: BanknotesIcon,            to: '/admin/my-financial',         perm: ['payments', 'view'] },
  { key: 'secretary',    label: 'مدیریت منشی',        icon: UsersIcon,                to: '/admin/my-secretaries' },
  { key: 'staff',        label: 'پرسنل',              icon: UserPlusIcon,             to: '/admin/staff',                perm: ['staff', 'view'] },
  { key: 'insurance',    label: 'مدیریت بیمه',        icon: ShieldCheckIcon,          to: '/admin/insurance-pricing',    perm: ['insurances', 'view'] },
  { key: 'discounts',    label: 'مدیریت تخفیف‌ها',    icon: ReceiptPercentIcon,       to: '/admin/discounts',            roles: ['doctor', 'clinic'], perm: ['discounts', 'view'] },
  { key: 'tags',         label: 'برچسب‌ها',           icon: TagIcon,                  to: '/admin/tags-settings',        perm: ['tags', 'view'] },
  { key: 'sms',          label: 'پیامک‌ها',           icon: ChatBubbleLeftRightIcon,  to: '/admin/sms-wallet',           perm: ['sms', 'view'] },
  { key: 'account',      label: 'حساب کاربری',        icon: UserCircleIcon,           to: '/admin/account-settings',     alwaysOpen: true },
];

/**
 * Menu items visible to the given role. برای منشی بر اساس مجوز فیلتر می‌شود
 * (آیتمِ بدونِ perm/alwaysOpen پنهان است)؛ سایر نقش‌ها با roles.
 */
export function menuForRole(
  role: string | null | undefined,
  can?: (resource: string, action: string) => boolean,
  scope?: string | null,
): SettingsMenuItem[] {
  // منشی و پزشکِ عضوِ کلینیک (scope=clinic) محدود-به-مجوزند؛ بقیه با فیلترِ نقشی.
  const permissionRestricted = role === 'secretary' || (role === 'doctor' && scope === 'clinic');
  return SETTINGS_MENU.filter((i) => {
    if (permissionRestricted) {
      if (i.alwaysOpen) return true;
      if (!i.perm || !can || !can(i.perm[0], i.perm[1])) return false;
      // واریانتِ نقشی (نوبت‌دهی/پزشکان کلینیک) را با scope تطبیق بده.
      if (i.roles) return i.roles.includes(scope === 'clinic' ? 'clinic' : 'doctor');
      return true;
    }
    return !i.roles || (role != null && i.roles.includes(role));
  });
}

/**
 * SettingsLayout — presentational shell for the doctor/clinic settings area.
 * Renders the shared settings sidebar (PurchaseSubscriptionSidebar) beside the
 * page content, so every settings page shows the exact same menu as the
 * subscription page. Full-width so the sidebar sits flush against the main nav.
 *
 * @param active   key of the currently-open settings section (highlighted)
 * @param children the section content (e.g. subscription plans)
 */
export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
  return (
    <div className="fade-in settings-shell" dir="rtl" style={{ width: '100%' }}>
      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
        <PurchaseSubscriptionSidebar active={active} />
        <div style={{ minWidth: 0 }}>{children}</div>
      </div>
    </div>
  );
}