import { useState } from 'react'
import { useThemeStore } from '../stores/themeStore'

export default function Settings() {
  const { isDarkMode, toggleTheme } = useThemeStore()
  // Barrierefreiheit-Einstellungen (Platzhalter mit sinnvollen Optionen)
  const [a11y, setA11y] = useState({
    highContrast: false,
    largeText: false,
    reduceMotion: false,
    underlineLinks: true,
    alwaysShowFocusOutline: true,
    dyslexiaFriendlyFont: false
  })

  const handleSave = () => {
    // TODO: Save settings to backend/electron store
    console.log('Settings saved:', { syncConfig, isDarkMode })
  }

  return (
    <div>
      <h1 className="text-title-lg font-poppins font-bold text-primary mb-8">
        Einstellungen
      </h1>

      <div className="max-w-4xl space-y-6">
        <div className="card">
          <h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
            Darstellung
          </h2>
          
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-body font-medium text-secondary">Dark Mode</h3>
                <p className="text-small text-tertiary">
                  Aktiviert das dunkle Farbschema der Anwendung
                </p>
              </div>
              <button
                onClick={toggleTheme}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                  isDarkMode ? 'bg-primary-blue' : 'bg-border-input'
                }`}
              >
                <span
                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                    isDarkMode ? 'translate-x-6' : 'translate-x-1'
                  }`}
                />
              </button>
            </div>
          </div>
        </div>

        <div className="card">
          <h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
            Barrierefreiheit
          </h2>
          <div className="space-y-4">
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.highContrast} onChange={(e) => setA11y(prev => ({ ...prev, highContrast: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Hoher Kontrast</span>
                <p className="text-small text-tertiary">Erhöht den Kontrast für bessere Lesbarkeit (BITV-konform)</p>
              </div>
            </label>
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.largeText} onChange={(e) => setA11y(prev => ({ ...prev, largeText: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Große Schrift</span>
                <p className="text-small text-tertiary">Vergrößert die Schriftgröße für bessere Lesbarkeit</p>
              </div>
            </label>
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.reduceMotion} onChange={(e) => setA11y(prev => ({ ...prev, reduceMotion: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Reduzierte Bewegungen</span>
                <p className="text-small text-tertiary">Deaktiviert Animationen für weniger Ablenkung</p>
              </div>
            </label>
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.underlineLinks} onChange={(e) => setA11y(prev => ({ ...prev, underlineLinks: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Links unterstreichen</span>
                <p className="text-small text-tertiary">Links werden grundsätzlich unterstrichen dargestellt</p>
              </div>
            </label>
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.alwaysShowFocusOutline} onChange={(e) => setA11y(prev => ({ ...prev, alwaysShowFocusOutline: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Fokusrahmen immer anzeigen</span>
                <p className="text-small text-tertiary">Hebt fokussierte Elemente dauerhaft für Tastaturbedienung hervor</p>
              </div>
            </label>
            <label className="flex items-center space-x-3">
              <input type="checkbox" className="w-5 h-5 rounded border-border-input text-primary-blue" checked={a11y.dyslexiaFriendlyFont} onChange={(e) => setA11y(prev => ({ ...prev, dyslexiaFriendlyFont: e.target.checked }))} />
              <div>
                <span className="text-body font-medium text-secondary">Dyslexie-freundliche Schrift</span>
                <p className="text-small text-tertiary">Verwendet eine besser unterscheidbare Schriftart</p>
              </div>
            </label>
          </div>
        </div>

        <div className="card">
          <h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
            Über SkillMate
          </h2>
          
          <div className="space-y-2 text-body">
            <p className="text-secondary">
              <span className="font-medium">Version:</span> 1.0.0
            </p>
            <p className="text-secondary">
              <span className="font-medium">Entwickelt für:</span> Sicherheitsbehörden
            </p>
            <p className="text-small text-tertiary mt-4">
              SkillMate ist eine spezialisierte Anwendung zur Verwaltung von Fähigkeiten und Kompetenzen der Mitarbeitenden in Sicherheitsbehörden.
            </p>
          </div>
        </div>

        <div className="flex justify-end space-x-3">
          <button className="btn-secondary">
            Abbrechen
          </button>
          <button onClick={handleSave} className="btn-primary">
            Einstellungen speichern
          </button>
        </div>
      </div>
    </div>
  )
}