"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { useState, useEffect } from "react"
import { useTheme } from "next-themes"

interface AccessibilityInterfaceSettingsProps {
  user: any
}

export function AccessibilityInterfaceSettings({ user }: AccessibilityInterfaceSettingsProps) {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)
  
  const [settings, setSettings] = useState({
    fontSize: [16],
    highContrast: false,
    reducedMotion: false,
    screenReader: false,
    keyboardNavigation: true,
  })

  // Ensure component is mounted before accessing theme and localStorage
  useEffect(() => {
    setMounted(true)
    
    // Load high contrast setting from localStorage
    const savedHighContrast = localStorage.getItem('high-contrast')
    const isHighContrast = savedHighContrast === 'true'
    
    setSettings(prev => ({
      ...prev,
      highContrast: isHighContrast
    }))
    
    // Apply high contrast class if it was enabled
    if (isHighContrast) {
      document.documentElement.classList.add('high-contrast')
    }
  }, [])

  const handleDarkModeToggle = (checked: boolean) => {
    setTheme(checked ? "dark" : "light")
  }

  const handleHighContrastToggle = (checked: boolean) => {
    setSettings({ ...settings, highContrast: checked })
    
    // Save to localStorage
    localStorage.setItem('high-contrast', checked.toString())
    
    // Add or remove high contrast class
    if (checked) {
      document.documentElement.classList.add('high-contrast')
    } else {
      document.documentElement.classList.remove('high-contrast')
    }
  }

  if (!mounted) {
    return null // Prevent hydration mismatch
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Interface Preferences</CardTitle>
          <CardDescription>Customize the look and feel of G7 Astrum</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <Label>Dark Mode</Label>
            <Switch
              checked={theme === "dark"}
              onCheckedChange={handleDarkModeToggle}
              className="cursor-pointer"
            />
          </div>

          {/* <div className="space-y-2">
            <Label>Font Size: {settings.fontSize[0]}px</Label>
            <Slider
              value={settings.fontSize}
              onValueChange={(value) => setSettings({ ...settings, fontSize: value })}
              max={24}
              min={12}
              step={1}
            />
          </div> */}

          <div className="flex items-center justify-between">
            <Label>High Contrast Mode</Label>
            <Switch
              checked={settings.highContrast}
              onCheckedChange={handleHighContrastToggle}
              className="cursor-pointer"
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}