import { Container, Form, Row, Col } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'

export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride }) {
  const { t, i18n } = useTranslation()
  const accentMode = accentOverride ? 'custom' : 'system'

  const handleLanguageChange = (event) => {
    const locale = event.target.value
    i18n.changeLanguage(locale)
    localStorage.setItem('speedbb_lang', locale)
  }

  return (
    <Container className="py-5 bb-portal-shell">
      <div className="bb-portal-card">
        <div className="bb-portal-card-title">{t('portal.user_control_panel')}</div>
        <p className="bb-muted mb-4">{t('ucp.intro')}</p>
        <Row className="g-3">
          <Col xs={12}>
            <Form.Group>
              <Form.Label>{t('nav.language')}</Form.Label>
              <Form.Select value={i18n.language} onChange={handleLanguageChange}>
                <option value="en">English</option>
                <option value="de">Deutsch</option>
              </Form.Select>
            </Form.Group>
          </Col>
          <Col md={6}>
            <Form.Group>
              <Form.Label>{t('nav.theme')}</Form.Label>
              <Form.Select value={theme} onChange={(event) => setTheme(event.target.value)}>
                <option value="auto">{t('ucp.system_default')}</option>
                <option value="dark">{t('nav.theme_dark')}</option>
                <option value="light">{t('nav.theme_light')}</option>
              </Form.Select>
            </Form.Group>
          </Col>
          <Col md={6}>
            <Form.Group>
              <Form.Label>{t('ucp.accent_override')}</Form.Label>
              <div className="d-flex align-items-center gap-2">
                <Form.Select
                  value={accentMode}
                  onChange={(event) => {
                    const mode = event.target.value
                    if (mode === 'system') {
                      setAccentOverride('')
                    } else if (!accentOverride) {
                      setAccentOverride('#f29b3f')
                    }
                  }}
                >
                  <option value="system">{t('ucp.system_default')}</option>
                  <option value="custom">{t('ucp.custom_color')}</option>
                </Form.Select>
                <Form.Control
                  type="color"
                  value={accentOverride || '#f29b3f'}
                  onChange={(event) => setAccentOverride(event.target.value)}
                  disabled={accentMode !== 'custom'}
                />
              </div>
              <Form.Text className="bb-muted">{t('ucp.accent_override_hint')}</Form.Text>
            </Form.Group>
          </Col>
        </Row>
      </div>
    </Container>
  )
}