'use client'

import { useState } from 'react'
import { SettingsNav, SettingsSection, SettingSelect } from '@/components/settings'
import { updateAISettings } from '@/app/actions/ai-settings'

export default function AppearanceSettingsPage() {
  const [theme, setTheme] = useState('auto')
  const [fontSize, setFontSize] = useState('medium')

  const handleThemeChange = async (value: string) => {
    setTheme(value)
    // TODO: Implement theme persistence
    console.log('Theme:', value)
  }

  const handleFontSizeChange = async (value: string) => {
    setFontSize(value)
    // TODO: Implement font size persistence
    await updateAISettings({ fontSize: value as any })
  }

  return (
    <div className="container mx-auto py-10 px-4 max-w-6xl">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar Navigation */}
        <aside className="lg:col-span-1">
          <SettingsNav />
        </aside>

        {/* Main Content */}
        <main className="lg:col-span-3 space-y-6">
          <div>
            <h1 className="text-3xl font-bold mb-2">Appearance</h1>
            <p className="text-gray-600 dark:text-gray-400">
              Customize the look and feel of the application
            </p>
          </div>

          <SettingsSection
            title="Theme"
            icon={<span className="text-2xl">🎨</span>}
            description="Choose your preferred color scheme"
          >
            <SettingSelect
              label="Color Scheme"
              description="Select the app's visual theme"
              value={theme}
              options={[
                { value: 'light', label: 'Light' },
                { value: 'dark', label: 'Dark' },
                { value: 'auto', label: 'Auto (system)' },
              ]}
              onChange={handleThemeChange}
            />
          </SettingsSection>

          <SettingsSection
            title="Typography"
            icon={<span className="text-2xl">📝</span>}
            description="Adjust text size for better readability"
          >
            <SettingSelect
              label="Font Size"
              description="Adjust the size of text throughout the app"
              value={fontSize}
              options={[
                { value: 'small', label: 'Small' },
                { value: 'medium', label: 'Medium' },
                { value: 'large', label: 'Large' },
              ]}
              onChange={handleFontSizeChange}
            />
          </SettingsSection>
        </main>
      </div>
    </div>
  )
}