import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import { menuForRole } from '../components/layout/SettingsLayout';
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.
 */
export default function SettingsMenuPage() {
  const primaryRole = useAuthStore((s) => s.primaryRole);
  const scope = useAuthStore((s) => s.context?.scope);
  const { can } = usePermissions();
  const items = menuForRole(primaryRole, can, scope);

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

      <div style={{
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--r-lg)', overflow: 'hidden',
      }}>
        {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>
    </div>
  );
}