'use client'

import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { SystemSettings } from '@/types/system-params'
import { Save, RefreshCw, Info, Shield, Globe } from 'lucide-react'
import { toast } from 'sonner'

// Import modular components
import {
  PlatformInfoCard,
  SystemAnnouncementCard,
  CopyrightInfoCard,
  FeatureToggleCard,
  SessionManagementCard,
  PasswordPolicyCard,
  RegionalSettingsCard,
  SettingsInfoCard
} from './components'

export default function SystemSettingsPage() {
  const [settings, setSettings] = useState<SystemSettings>({
    platformName: '智慧农业生产管理系统',
    platformLogo: '',
    systemAnnouncement: '欢迎使用智慧农业生产管理系统！',
    contactEmail: 'support@smart-agriculture.com',
    contactPhone: '400-888-8888',
    address: '北京市海淀区中关村大街1号',
    companyName: '智慧农业科技有限公司',
    icp: '京ICP备12345678号',
    copyright: '© 2024 智慧农业科技有限公司 版权所有',
    enableRegistration: true,
    enableGuestAccess: false,
    sessionTimeout: 30,
    maxLoginAttempts: 5,
    passwordPolicy: {
      minLength: 8,
      requireUppercase: true,
      requireLowercase: true,
      requireNumbers: true,
      requireSpecialChars: false,
    },
    dateFormat: 'YYYY-MM-DD',
    timezone: 'Asia/Shanghai',
    language: 'zh-CN',
  })

  const [hasChanges, setHasChanges] = useState(false)

  useEffect(() => {
    loadSettings()
  }, [])

  const loadSettings = () => {
    const data = localStorage.getItem('smart_agriculture_system_settings')
    if (data) {
      setSettings(JSON.parse(data))
    } else {
      saveSettings(settings)
    }
  }

  const saveSettings = (newSettings: SystemSettings) => {
    localStorage.setItem('smart_agriculture_system_settings', JSON.stringify(newSettings))
    setSettings(newSettings)
    setHasChanges(false)
    toast.success('系统设置已保存')
  }

  const handleSave = () => {
    saveSettings(settings)
  }

  const handleReset = () => {
    loadSettings()
    setHasChanges(false)
    toast.info('已恢复到上次保存的设置')
  }

  const updateSettings = (updates: Partial<SystemSettings>) => {
    setSettings({ ...settings, ...updates })
    setHasChanges(true)
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">系统设置</h2>
          <p className="text-muted-foreground">配置系统全局基础参数和个性化设置</p>
        </div>
        <div className="flex gap-2">
          {hasChanges && (
            <Button variant="outline" onClick={handleReset}>
              <RefreshCw className="w-4 h-4 mr-2" />
              重置
            </Button>
          )}
          <Button onClick={handleSave} disabled={!hasChanges}>
            <Save className="w-4 h-4 mr-2" />
            保存设置
          </Button>
        </div>
      </div>

      <Tabs defaultValue="basic" className="space-y-4">
        <TabsList>
          <TabsTrigger value="basic">
            <Info className="w-4 h-4 mr-2" />
            基本设置
          </TabsTrigger>
          <TabsTrigger value="security">
            <Shield className="w-4 h-4 mr-2" />
            安全设置
          </TabsTrigger>
          <TabsTrigger value="regional">
            <Globe className="w-4 h-4 mr-2" />
            区域设置
          </TabsTrigger>
        </TabsList>

        {/* 基本设置 */}
        <TabsContent value="basic" className="space-y-4">
          <PlatformInfoCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
          <SystemAnnouncementCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
          <CopyrightInfoCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
          <FeatureToggleCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
        </TabsContent>

        {/* 安全设置 */}
        <TabsContent value="security" className="space-y-4">
          <SessionManagementCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
          <PasswordPolicyCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
        </TabsContent>

        {/* 区域设置 */}
        <TabsContent value="regional" className="space-y-4">
          <RegionalSettingsCard
            settings={settings}
            onSettingsChange={updateSettings}
          />
        </TabsContent>
      </Tabs>

      {/* 设置预览 */}
      <SettingsInfoCard />
    </div>
  )
}