biblical-guide.com/app/[locale]/settings/page.tsx

'use client'

import { useState } from 'react'
import { useTranslations, useLocale } from 'next-intl'
import { useAuth } from '@/hooks/use-auth'
import { ProtectedRoute } from '@/components/auth/protected-route'
import {
  Container,
  Paper,
  Box,
  Typography,
  Switch,
  FormControlLabel,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Card,
  CardContent,
  Divider,
  Alert,
  Button
} from '@mui/material'
import {
  Settings as SettingsIcon,
  Palette,
  TextFields,
  Language,
  Notifications,
  Security,
  Save
} from '@mui/icons-material'

export default function SettingsPage() {
  const { user } = useAuth()
  const locale = useLocale()
  const t = useTranslations('settings')
  const [settings, setSettings] = useState({
    theme: user?.theme || 'light',
    fontSize: user?.fontSize || 'medium',
    notifications: true,
    emailUpdates: false,
    language: locale
  })
  const [message, setMessage] = useState('')

  const handleSettingChange = (setting: string, value: any) => {
    setSettings(prev => ({
      ...prev,
      [setting]: value
    }))
  }

  const handleSave = async () => {
    try {
      // TODO: Implement settings update API
      await new Promise(resolve => setTimeout(resolve, 1000)) // Placeholder
      setMessage(t('settingsSaved'))
    } catch (error) {
      setMessage(t('settingsError'))
    }
  }

  return (
    <ProtectedRoute>
      <Container maxWidth="md" sx={{ py: 4 }}>
        <Paper elevation={3} sx={{ p: 4 }}>
          {/* Header */}
          <Box textAlign="center" mb={4}>
            <SettingsIcon sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
            <Typography variant="h4" component="h1" gutterBottom>
              {t('title')}
            </Typography>
            <Typography variant="body1" color="text.secondary">
              {t('subtitle')}
            </Typography>
          </Box>

          <Divider sx={{ mb: 4 }} />

          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
            {/* Appearance Settings */}
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
              <Card variant="outlined">
                <CardContent>
                  <Box display="flex" alignItems="center" mb={3}>
                    <Palette sx={{ mr: 1, color: 'primary.main' }} />
                    <Typography variant="h6">
                      {t('appearance')}
                    </Typography>
                  </Box>

                  <Box sx={{ mb: 3 }}>
                    <FormControl fullWidth>
                      <InputLabel>{t('theme')}</InputLabel>
                      <Select
                        value={settings.theme}
                        label={t('theme')}
                        onChange={(e) => handleSettingChange('theme', e.target.value)}
                      >
                        <MenuItem value="light">{t('themes.light')}</MenuItem>
                        <MenuItem value="dark">{t('themes.dark')}</MenuItem>
                        <MenuItem value="auto">{t('themes.auto')}</MenuItem>
                      </Select>
                    </FormControl>
                  </Box>

                  <Box sx={{ mb: 3 }}>
                    <FormControl fullWidth>
                      <InputLabel>{t('fontSize')}</InputLabel>
                      <Select
                        value={settings.fontSize}
                        label={t('fontSize')}
                        onChange={(e) => handleSettingChange('fontSize', e.target.value)}
                        startAdornment={<TextFields sx={{ mr: 1 }} />}
                      >
                        <MenuItem value="small">{t('fontSizes.small')}</MenuItem>
                        <MenuItem value="medium">{t('fontSizes.medium')}</MenuItem>
                        <MenuItem value="large">{t('fontSizes.large')}</MenuItem>
                      </Select>
                    </FormControl>
                  </Box>
                </CardContent>
              </Card>
            </Box>

            {/* Language & Notifications */}
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
              <Card variant="outlined">
                <CardContent>
                  <Box display="flex" alignItems="center" mb={3}>
                    <Language sx={{ mr: 1, color: 'primary.main' }} />
                    <Typography variant="h6">
                      {t('languageAndNotifications')}
                    </Typography>
                  </Box>

                  <Box sx={{ mb: 3 }}>
                    <FormControl fullWidth>
                      <InputLabel>{t('language')}</InputLabel>
                      <Select
                        value={settings.language}
                        label={t('language')}
                        onChange={(e) => handleSettingChange('language', e.target.value)}
                      >
                        <MenuItem value="ro">{t('languages.ro')}</MenuItem>
                        <MenuItem value="en">{t('languages.en')}</MenuItem>
                      </Select>
                    </FormControl>
                  </Box>

                  <Box sx={{ mb: 2 }}>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={settings.notifications}
                          onChange={(e) => handleSettingChange('notifications', e.target.checked)}
                        />
                      }
                      label={t('notifications')}
                    />
                  </Box>

                  <Box sx={{ mb: 2 }}>
                    <FormControlLabel
                      control={
                        <Switch
                          checked={settings.emailUpdates}
                          onChange={(e) => handleSettingChange('emailUpdates', e.target.checked)}
                        />
                      }
                      label={t('emailUpdates')}
                    />
                  </Box>
                </CardContent>
              </Card>
            </Box>

            {/* Security Settings */}
            <Box sx={{ flex: '1 1 100%' }}>
              <Card variant="outlined">
                <CardContent>
                  <Box display="flex" alignItems="center" mb={3}>
                    <Security sx={{ mr: 1, color: 'primary.main' }} />
                    <Typography variant="h6">
                      {t('security')}
                    </Typography>
                  </Box>

                  <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                    {t('passwordSecurity')}
                  </Typography>

                  <Button variant="outlined" disabled>
                    {t('changePasswordSoon')}
                  </Button>
                </CardContent>
              </Card>
            </Box>
          </Box>

          {/* Save Button */}
          <Box textAlign="center" mt={4}>
            <Button
              variant="contained"
              size="large"
              startIcon={<Save />}
              onClick={handleSave}
              sx={{ px: 4 }}
            >
              {t('saveSettings')}
            </Button>
          </Box>

          {/* Success/Error Message */}
          {message && (
            <Alert
              severity={message.includes(t('settingsError')) ? 'error' : 'success'}
              sx={{ mt: 3 }}
              onClose={() => setMessage('')}
            >
              {message}
            </Alert>
          )}
        </Paper>
      </Container>
    </ProtectedRoute>
  )
}