HOA_Financial_Platform/frontend/src/pages/preferences/UserPreferencesPage.tsx

import {
  Title, Text, Card, Stack, Group, SimpleGrid, ThemeIcon, Switch,
  Select, Badge, Divider,
} from '@mantine/core';
import {
  IconUser, IconPalette, IconClock, IconBell, IconEye,
} from '@tabler/icons-react';
import { useAuthStore } from '../../stores/authStore';
import { usePreferencesStore } from '../../stores/preferencesStore';

export function UserPreferencesPage() {
  const { user, currentOrg } = useAuthStore();
  const { colorScheme, toggleColorScheme } = usePreferencesStore();

  return (
    <Stack>
      <div>
        <Title order={2}>User Preferences</Title>
        <Text c="dimmed" size="sm">Customize your experience</Text>
      </div>

      <SimpleGrid cols={{ base: 1, md: 2 }}>
        {/* Profile */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="blue" variant="light" size={40} radius="md">
              <IconUser size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Profile</Text>
              <Text c="dimmed" size="sm">Your account information</Text>
            </div>
          </Group>
          <Stack gap="xs">
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Name</Text>
              <Text size="sm" fw={500}>{user?.firstName} {user?.lastName}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Email</Text>
              <Text size="sm" fw={500}>{user?.email}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Organization</Text>
              <Text size="sm" fw={500}>{currentOrg?.name || 'N/A'}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Role</Text>
              <Badge variant="light" tt="capitalize">{currentOrg?.role || 'N/A'}</Badge>
            </Group>
          </Stack>
        </Card>

        {/* Display Preferences */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="violet" variant="light" size={40} radius="md">
              <IconPalette size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Display</Text>
              <Text c="dimmed" size="sm">Appearance and layout</Text>
            </div>
          </Group>
          <Stack gap="md">
            <Group justify="space-between">
              <div>
                <Text size="sm">Dark Mode</Text>
                <Text size="xs" c="dimmed">Switch to dark color theme</Text>
              </div>
              <Switch
                checked={colorScheme === 'dark'}
                onChange={toggleColorScheme}
              />
            </Group>
            <Group justify="space-between">
              <div>
                <Text size="sm">Compact View</Text>
                <Text size="xs" c="dimmed">Reduce spacing in tables and lists</Text>
              </div>
              <Switch disabled />
            </Group>
            <Divider />
            <Text size="xs" c="dimmed" ta="center">More display preferences coming in a future release</Text>
          </Stack>
        </Card>

        {/* Regional */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="green" variant="light" size={40} radius="md">
              <IconClock size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Regional</Text>
              <Text c="dimmed" size="sm">Locale and time settings</Text>
            </div>
          </Group>
          <Stack gap="md">
            <Select
              label="Time Zone"
              placeholder="Auto-detect"
              data={[
                { value: 'auto', label: `Auto (${Intl.DateTimeFormat().resolvedOptions().timeZone})` },
                { value: 'America/New_York', label: 'Eastern Time (ET)' },
                { value: 'America/Chicago', label: 'Central Time (CT)' },
                { value: 'America/Denver', label: 'Mountain Time (MT)' },
                { value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
                { value: 'America/Anchorage', label: 'Alaska Time (AKT)' },
                { value: 'Pacific/Honolulu', label: 'Hawaii Time (HT)' },
              ]}
              defaultValue="auto"
              disabled
            />
            <Select
              label="Date Format"
              data={[
                { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
                { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
                { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
              ]}
              defaultValue="MM/DD/YYYY"
              disabled
            />
            <Divider />
            <Text size="xs" c="dimmed" ta="center">Regional preferences coming in a future release</Text>
          </Stack>
        </Card>

        {/* Notifications */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="orange" variant="light" size={40} radius="md">
              <IconBell size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Notifications</Text>
              <Text c="dimmed" size="sm">Email and in-app alerts</Text>
            </div>
          </Group>
          <Stack gap="md">
            <Group justify="space-between">
              <div>
                <Text size="sm">Email Notifications</Text>
                <Text size="xs" c="dimmed">Receive alerts via email</Text>
              </div>
              <Switch disabled />
            </Group>
            <Group justify="space-between">
              <div>
                <Text size="sm">Payment Alerts</Text>
                <Text size="xs" c="dimmed">Notify when payments are received</Text>
              </div>
              <Switch disabled />
            </Group>
            <Group justify="space-between">
              <div>
                <Text size="sm">Budget Alerts</Text>
                <Text size="xs" c="dimmed">Warn when budget thresholds exceeded</Text>
              </div>
              <Switch disabled />
            </Group>
            <Divider />
            <Text size="xs" c="dimmed" ta="center">Notification preferences coming in a future release</Text>
          </Stack>
        </Card>

        {/* Feature Visibility */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="cyan" variant="light" size={40} radius="md">
              <IconEye size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Feature Visibility</Text>
              <Text c="dimmed" size="sm">Show or hide sidebar sections</Text>
            </div>
          </Group>
          <Stack gap="md">
            <Group justify="space-between">
              <Text size="sm">Assessments</Text>
              <Switch disabled defaultChecked />
            </Group>
            <Group justify="space-between">
              <Text size="sm">Planning</Text>
              <Switch disabled defaultChecked />
            </Group>
            <Group justify="space-between">
              <Text size="sm">Invoices & Payments</Text>
              <Switch disabled defaultChecked />
            </Group>
            <Group justify="space-between">
              <Text size="sm">Capital Projects</Text>
              <Switch disabled defaultChecked />
            </Group>
            <Divider />
            <Text size="xs" c="dimmed" ta="center">Feature visibility preferences coming in a future release</Text>
          </Stack>
        </Card>
      </SimpleGrid>
    </Stack>
  );
}