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

/**
 * سایدبار تنظیمات — همان فهرستی که `SettingsMenuPage` روی موبایل نشان می‌دهد
 * (`settingsMenu.ts`)، با دو تفاوتِ عمدی:
 *
 * ۱. «مدیریت پزشک» اینجا نیست؛ جایش منوی اصلی/پروفایل پزشک است.
 * ۲. یک آیتم «تنظیمات» غیرفعال ته فهرست است — بخش امنیت هنوز مسیر پزشک/کلینیک ندارد.
 *
 * قبلاً این فهرست کپی جدا بود و هر آیتم تازه باید دو جا اضافه می‌شد؛ «منابع» و
 * «دسته‌بندی‌ها» فقط در موبایل ظاهر شدند و در سایدبار غایب بودند.
 */
const HIDDEN_KEYS = new Set(['doctor']);

const SECURITY_ITEM: SettingsMenuItem = {
  key: 'security',
  label: 'تنظیمات',
  icon: () => null,
  group: 'account',
  alwaysOpen: true,
  disabled: 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();
  // گروه‌ها بعد از فیلترِ جستجو ساخته می‌شوند تا تیترِ دسته‌ای که هیچ نتیجه‌ای ندارد
  // بالای فضای خالی نماند.
  const groups = useMemo(
    () => groupMenu(
      [
        ...menuForRole(primaryRole, can, scope).filter((i) => !HIDDEN_KEYS.has(i.key)),
        SECURITY_ITEM,
      ].filter((i) => i.label.includes(query.trim())),
    ),
    [query, primaryRole, scope, can],
  );
  const itemCount = groups.reduce((sum, g) => sum + g.items.length, 0);

  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>
        {groups.map((group, groupIdx) => (
          <section key={group.key} aria-label={group.label}>
            <div style={{
              fontSize: 12, fontWeight: 700, color: 'var(--text-3)', textAlign: 'right',
              padding: '0 14px', marginTop: groupIdx === 0 ? 0 : 14, marginBottom: 6,
            }}>
              {group.label}
            </div>
            {group.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 || item.disabled) {
                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>
              );
            })}
          </section>
        ))}
        {itemCount === 0 && (
          <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
            موردی یافت نشد
          </div>
        )}
      </nav>
    </aside>
  );
}