'use client';

import { Suspense } from 'react';
import { AddSourceModal } from '@/components/settings/AddSourceModal';
import { ExportModal } from '@/components/settings/ExportModal';
import { ImportModal } from '@/components/settings/ImportModal';
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
import { SourceSettings } from '@/components/settings/SourceSettings';
import { SortSettings } from '@/components/settings/SortSettings';
import { DataSettings } from '@/components/settings/DataSettings';
import { SettingsHeader } from '@/components/settings/SettingsHeader';
import { AccountSettings } from '@/components/settings/AccountSettings';
import { useSettingsPage } from './hooks/useSettingsPage';

export default function SettingsPage() {
  const {
    sources,
    sortBy,
    isAddModalOpen,
    isExportModalOpen,
    isImportModalOpen,
    isResetDialogOpen,
    isRestoreDefaultsDialogOpen,
    setIsAddModalOpen,
    setIsExportModalOpen,
    setIsImportModalOpen,
    setIsResetDialogOpen,
    setIsRestoreDefaultsDialogOpen,
    handleSourcesChange,
    handleAddSource,
    handleSortChange,
    handleExport,
    handleImport,
    handleRestoreDefaults,
    handleResetAll,
    editingSource,
    handleEditSource,
    setEditingSource,
  } = useSettingsPage();

  return (
    <div className="min-h-screen bg-[var(--bg-color)] bg-[image:var(--bg-image)] bg-fixed">
      <div className="container mx-auto px-4 py-8 max-w-4xl space-y-8">
        {/* Header */}
        <SettingsHeader />

        {/* Account Settings */}
        <Suspense fallback={<div className="p-6 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl">加载中...</div>}>
          <AccountSettings />
        </Suspense>

        {/* Source Management */}
        <SourceSettings
          sources={sources}
          onSourcesChange={handleSourcesChange}
          onRestoreDefaults={() => setIsRestoreDefaultsDialogOpen(true)}
          onAddSource={() => {
            setEditingSource(null);
            setIsAddModalOpen(true);
          }}
          onEditSource={handleEditSource}
        />

        {/* Sort Options */}
        <SortSettings
          sortBy={sortBy}
          onSortChange={handleSortChange}
        />

        {/* Data Management */}
        <DataSettings
          onExport={() => setIsExportModalOpen(true)}
          onImport={() => setIsImportModalOpen(true)}
          onReset={() => setIsResetDialogOpen(true)}
        />
      </div>

      {/* Modals */}
      <AddSourceModal
        isOpen={isAddModalOpen}
        onClose={() => {
          setIsAddModalOpen(false);
          setEditingSource(null);
        }}
        onAdd={handleAddSource}
        existingIds={sources.map(s => s.id)}
        initialValues={editingSource}
      />

      <ExportModal
        isOpen={isExportModalOpen}
        onClose={() => setIsExportModalOpen(false)}
        onExport={handleExport}
      />

      <ImportModal
        isOpen={isImportModalOpen}
        onClose={() => setIsImportModalOpen(false)}
        onImport={handleImport}
      />

      <ConfirmDialog
        isOpen={isRestoreDefaultsDialogOpen}
        title="恢复默认源"
        message="这将重置所有视频源为默认配置。自定义源将被删除。是否继续？"
        confirmText="恢复"
        cancelText="取消"
        onConfirm={handleRestoreDefaults}
        onCancel={() => setIsRestoreDefaultsDialogOpen(false)}
      />

      <ConfirmDialog
        isOpen={isResetDialogOpen}
        title="清除所有数据"
        message="这将删除所有设置、历史记录、Cookie 和缓存。此操作不可撤销。是否继续？"
        confirmText="清除"
        cancelText="取消"
        onConfirm={handleResetAll}
        onCancel={() => setIsResetDialogOpen(false)}
        dangerous
      />
    </div>
  );
}