import React from 'react';
import { Link } from 'react-router';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import { groupedMenuForRole } from '../components/layout/settingsMenu';
import { useAuthStore } from '../stores/authStore';
import { usePermissions } from '../hooks/usePermissions';

/**
 * SettingsMenuPage — the settings landing list for doctor/clinic users.
 * A full-width tappable list of the settings sections available to the current
 * role (mobile-first, matches the Figma mobile design). Each section links to
 * its route; on desktop the same sections render the shell via SettingsLayout.
 *
 * روی موبایل کل این فهرست بالای محتوا می‌نشیند، پس ۱۶ ردیفِ یکدست یعنی اسکرول
 * طولانیِ بی‌نشانه. دسته‌ها همان دسته‌های سایدبار دسکتاپ‌اند (`settingsMenu.ts`).
 */
export default function SettingsMenuPage() {
  const primaryRole = useAuthStore((s) => s.primaryRole);
  const scope = useAuthStore((s) => s.context?.scope);
  const { can } = usePermissions();
  const groups = groupedMenuForRole(primaryRole, can, scope);

  return (
    <div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
      <h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>

      {groups.map((group) => (
        <section key={group.key} aria-label={group.label} style={{ marginBottom: 20 }}>
          <h2 style={{
            fontSize: 13, fontWeight: 700, color: 'var(--text-3)',
            marginBottom: 8, paddingInlineStart: 4,
          }}>
            {group.label}
          </h2>

          <div style={{
            background: 'var(--surface)', border: '1px solid var(--border)',
            borderRadius: 'var(--r-lg)', overflow: 'hidden',
          }}>
            {group.items.map((item, idx) => {
              const Icon = item.icon;
              const disabled = !item.to;
              const rowStyle: React.CSSProperties = {
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
                borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
                color: disabled ? 'var(--text-3)' : 'var(--text)',
                cursor: disabled ? 'not-allowed' : 'pointer',
                background: 'transparent', width: '100%', textAlign: 'right',
              };
              const inner = (
                <>
                  <Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
                  <span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
                  {disabled
                    ? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>به‌زودی</span>
                    : <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
                </>
              );
              return disabled ? (
                <button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
                  {inner}
                </button>
              ) : (
                <Link
                  key={item.key}
                  to={item.to!}
                  style={rowStyle}
                  onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
                  onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
                >
                  {inner}
                </Link>
              );
            })}
          </div>
        </section>
      ))}
    </div>
  );
}