import React, { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { SearchHeaderP } from '../../pages/subscriptionIcons';
import { useAuthStore } from '../../stores/authStore';
import { usePermissions } from '../../hooks/usePermissions';

/**
 * Settings sub-navigation for the subscription page — item list and order copied
 * verbatim from clinic-pro-tauri's `PurchaseSubscription.jsx` navItems, minus
 * "مدیریت پزشک" (that lives in the main nav / doctor profile, not here). Shown
 * ungated to mirror the tauri source. Each entry maps to a real admin route; the
 * "تنظیمات" (security) section has no doctor/clinic route yet → disabled.
 *
 * This list is intentionally separate from SETTINGS_MENU (SettingsLayout) so the
 * other settings pages are not affected.
 */
/**
 * `roles`: when set, the item is only shown to those roles (omit = every role).
 * `perm`: [resource, action] — منشی فقط با داشتن این مجوز آیتم را می‌بیند.
 * `alwaysOpen`: برای منشی همیشه نمایش داده می‌شود (حساب/تنظیمات پایه).
 * آیتم‌های owner-only (خرید اشتراک، مدیریت منشی) نه `perm` دارند نه `alwaysOpen`
 * → برای منشی پنهان می‌شوند.
 */
type NavItem = {
  key: string;
  label: string;
  to?: string;
  roles?: string[];
  perm?: [string, string];
  alwaysOpen?: boolean;
};

const NAV_ITEMS: NavItem[] = [
  { key: 'subscription',   label: 'خرید اشتراک',    to: '/admin/subscription', perm: ['subscription', 'view'] },
  { key: 'payment',        label: 'مدیریت پرداخت',   to: '/admin/my-financial', perm: ['payments', 'view'] },
  { key: 'appointment',    label: 'مدیریت نوبت دهی', to: '/admin/appointment-settings', roles: ['doctor'], perm: ['appointment_settings', 'view'] },
  { key: 'appointment',    label: 'مدیریت نوبت دهی', to: '/admin/settings/appointment-settings', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
  { key: 'insurance',      label: 'مدیریت بیمه',     to: '/admin/insurance-pricing', perm: ['insurances', 'view'] },
  { key: 'discounts',      label: 'مدیریت تخفیف‌ها', to: '/admin/discounts', roles: ['doctor', 'clinic'], perm: ['discounts', 'view'] },
  { key: 'tags',           label: 'تگ ها',           to: '/admin/tags-settings', perm: ['tags', 'view'] },
  { key: 'sms',            label: 'پیامک ها',        to: '/admin/sms-wallet', perm: ['sms', 'view'] },
  { key: 'clinic-doctors', label: 'پزشکان کلینیک',   to: '/admin/settings/clinic-doctors', roles: ['clinic'], perm: ['clinic_doctors', 'view'] },
  { key: 'secretary',      label: 'مدیریت منشی',     to: '/admin/my-secretaries' },
  { key: 'staff',          label: 'پرسنل',           to: '/admin/staff', perm: ['staff', 'view'] },
  { key: 'account',        label: 'حساب کاربری',     to: '/admin/account-settings', alwaysOpen: true },
  { key: 'security',       label: 'تنظیمات', alwaysOpen: true },
];

export default function PurchaseSubscriptionSidebar({ active }: { active: string }) {
  const [query, setQuery] = useState('');
  const primaryRole = useAuthStore((s) => s.primaryRole);
  const scope = useAuthStore((s) => s.context?.scope);
  const { can } = usePermissions();
  // منشی، و پزشکِ عضوِ کلینیک (scope=clinic) هر دو محدود-به-مجوزند؛ پزشکِ مستقل و
  // مالک آزادند و با فیلترِ نقشیِ معمول کار می‌کنند.
  const permissionRestricted = primaryRole === 'secretary' || (primaryRole === 'doctor' && scope === 'clinic');
  const items = useMemo(
    () => NAV_ITEMS
      // آیتمِ بدونِ perm/alwaysOpen برای کاربرِ محدود پنهان است. برای آیتم‌هایی که
      // واریانتِ نقشی دارند (مثلِ «نوبت‌دهی» با doctor vs clinic)، با scope تطبیق داده می‌شود.
      .filter((i) => {
        if (!permissionRestricted) {
          return !i.roles || (primaryRole != null && i.roles.includes(primaryRole));
        }
        if (i.alwaysOpen) return true;
        if (!i.perm || !can(i.perm[0], i.perm[1])) return false;
        if (i.roles) return i.roles.includes(scope === 'clinic' ? 'clinic' : 'doctor');
        return true;
      })
      .filter((i) => i.label.includes(query.trim())),
    [query, primaryRole, scope, can],
  );

  return (
    <aside
      dir="rtl"
      aria-label="منوی تنظیمات"
      className="settings-subnav lg:sticky"
      style={{ alignSelf: 'start', top: 'calc(var(--topbar-h) + 16px)' }}
    >
      <div style={{
        fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'right',
        marginBottom: 10, padding: '0 4px',
      }}>
        تنظیمات
      </div>

      <div style={{ marginBottom: 16 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: 'var(--surface)', border: '1px solid var(--border)',
          borderRadius: 'var(--r-sm)', padding: '8px 12px',
        }}>
          <SearchHeaderP />
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="جستجو در تنظیمات"
            aria-label="جستجو در تنظیمات"
            style={{
              border: 'none', outline: 'none', background: 'transparent',
              fontFamily: 'inherit', fontSize: 13, color: 'var(--text)', width: '100%',
              textAlign: 'right', direction: 'rtl',
            }}
          />
        </div>
      </div>

      <nav>
        {items.map((item) => {
          const isActive = item.key === active;
          const rowStyle: React.CSSProperties = {
            borderRadius: 12, height: 44, marginBottom: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
            padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
            lineHeight: 1, textAlign: 'right',
            background: isActive ? 'var(--accent)' : 'transparent',
            color: isActive ? 'var(--on-primary)' : 'var(--text-2)',
            cursor: item.to ? 'pointer' : 'not-allowed',
            transition: 'background .14s',
          };
          const inner = <span style={{ flex: 1 }}>{item.label}</span>;
          if (!item.to) {
            return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
          }
          return (
            <Link
              key={item.key}
              to={item.to}
              aria-current={isActive ? 'page' : undefined}
              style={rowStyle}
              onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
              onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
            >
              {inner}
            </Link>
          );
        })}
        {items.length === 0 && (
          <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
            موردی یافت نشد
          </div>
        )}
      </nav>
    </aside>
  );
}