import { CreditCard, Palette, ShieldCheck, User, type LucideIcon } from 'lucide-react';
import { ASSISTANT_BRAND_NAME, IS_WORDPRESS } from '../../../constants';
import { SETTINGS_SECTIONS, SettingsSection } from '../../../utils/appRoute';
import { isFeatureEnabled } from '../../../featureFlags';

export const SECTION_LABELS: Record<SettingsSection, string> = {
  account: 'Account',
  appearance: 'Appearance',
  // The "assistant" route actually controls site access/permissions.
  assistant: 'Permissions',
  billing: 'Plan & Billing',
};

export const SECTION_ICONS: Record<SettingsSection, LucideIcon> = {
  account: User,
  appearance: Palette,
  assistant: ShieldCheck,
  billing: CreditCard,
};

export const SECTION_BLURBS: Record<SettingsSection, string> = {
  account: 'Manage your profile, email, and password.',
  appearance: `Choose how ${ASSISTANT_BRAND_NAME} looks.`,
  assistant: `Control what ${ASSISTANT_BRAND_NAME} can access and do on your site.`,
  billing: 'Manage your plan and usage.',
};

export const visibleSettingsSections = (isLoggedIn: boolean): SettingsSection[] => (
  SETTINGS_SECTIONS.filter(section => {
    if (section === 'account') return isLoggedIn;
    if (section === 'assistant') return IS_WORDPRESS;
    if (section === 'billing') return isLoggedIn && isFeatureEnabled('billing');
    return true;
  })
);