/**
 * 移动端版本管理首页
 *
 * 功能概述:
 * 统一管理榴莲 App、股行 App 和 IT0 App 的版本发布。
 * 支持在同一界面切换管理不同应用的版本。
 *
 * 支持的应用:
 * - 榴莲 App (mobile): 连接 admin-service 后端
 * - 股行 App (mining): 连接 mining-admin-service 后端
 * - IT0 App (it0): 连接 IT0 version-service 后端
 *
 * 主要功能:
 * 1. 应用切换 - 在多个应用间切换版本管理
 * 2. 平台筛选 - 按 Android/iOS 筛选版本
 * 3. 版本上传 - 上传新版本 APK/IPA
 * 4. 版本管理 - 编辑、删除、启用/禁用版本
 */
'use client'

import { useEffect, useState, useCallback } from 'react'
import { useVersions, useVersionActions } from '@/application'
import { Platform } from '@/domain'
import { AppType } from '@/infrastructure'
import { VersionCard } from '@/presentation/components/version-card'
import { UploadModal } from '@/presentation/components/upload-modal'
import { EditModal } from '@/presentation/components/edit-modal'
import toast from 'react-hot-toast'

/**
 * 应用标签配置
 * 定义每个应用在UI中显示的名称和描述
 */
const APP_LABELS: Record<AppType, { name: string; description: string }> = {
  mobile: { name: '榴莲 App', description: '管理榴莲 App 的版本更新' },
  mining: { name: '股行 App', description: '管理股行 App 的版本更新' },
  it0: { name: 'IT0 App', description: '管理 IT0 App 的版本更新' },
}

export default function HomePage() {
  const { versions, isLoading, error, appType, refetch, setFilter, setAppType } = useVersions()
  const { deleteVersion, toggleVersion } = useVersionActions()

  const [platformFilter, setPlatformFilter] = useState<Platform | 'all'>('all')
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [editingVersionId, setEditingVersionId] = useState<string | null>(null)

  useEffect(() => {
    setFilter({ platform: platformFilter === 'all' ? undefined : platformFilter })
  }, [platformFilter, setFilter])

  const handleRefresh = useCallback(() => {
    refetch()
  }, [refetch])

  const handleAppTypeChange = (newAppType: AppType) => {
    setAppType(newAppType)
    setPlatformFilter('all')
  }

  const handleDelete = async (id: string) => {
    if (!confirm('确定要删除这个版本吗？此操作不可恢复。')) {
      return
    }
    try {
      await deleteVersion(id)
      toast.success('版本已删除')
    } catch (err) {
      toast.error('删除失败')
    }
  }

  const handleToggle = async (id: string, isEnabled: boolean) => {
    try {
      await toggleVersion(id, isEnabled)
      toast.success(isEnabled ? '版本已启用' : '版本已禁用')
    } catch (err) {
      toast.error('操作失败')
    }
  }

  const handleUploadSuccess = () => {
    setShowUploadModal(false)
    refetch()
    toast.success('版本上传成功')
  }

  const handleEditSuccess = () => {
    setEditingVersionId(null)
    refetch()
    toast.success('版本更新成功')
  }

  const filteredVersions = versions
  const currentAppInfo = APP_LABELS[appType]

  return (
    <div className="space-y-6">
      {/* App Selector */}
      <div className="card bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <label className="label font-semibold text-gray-700">应用选择：</label>
            <div className="flex gap-2">
              <button
                onClick={() => handleAppTypeChange('mobile')}
                className={`px-5 py-2.5 rounded-lg text-sm font-medium transition-all shadow-sm ${
                  appType === 'mobile'
                    ? 'bg-blue-600 text-white shadow-blue-200'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'
                }`}
              >
                榴莲 App
              </button>
              <button
                onClick={() => handleAppTypeChange('mining')}
                className={`px-5 py-2.5 rounded-lg text-sm font-medium transition-all shadow-sm ${
                  appType === 'mining'
                    ? 'bg-orange-500 text-white shadow-orange-200'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'
                }`}
              >
                股行 App
              </button>
              <button
                onClick={() => handleAppTypeChange('it0')}
                className={`px-5 py-2.5 rounded-lg text-sm font-medium transition-all shadow-sm ${
                  appType === 'it0'
                    ? 'bg-emerald-600 text-white shadow-emerald-200'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'
                }`}
              >
                IT0 App
              </button>
            </div>
          </div>
          <div className="text-sm text-gray-500">
            当前管理: <span className="font-medium text-gray-700">{currentAppInfo.name}</span>
          </div>
        </div>
      </div>

      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">版本管理</h2>
          <p className="text-gray-600 mt-1">{currentAppInfo.description}</p>
        </div>
        <button
          onClick={() => setShowUploadModal(true)}
          className="btn btn-primary"
        >
          上传新版本
        </button>
      </div>

      {/* Filters */}
      <div className="card">
        <div className="flex items-center gap-4">
          <label className="label">平台筛选：</label>
          <div className="flex gap-2">
            <button
              onClick={() => setPlatformFilter('all')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                platformFilter === 'all'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              全部
            </button>
            <button
              onClick={() => setPlatformFilter('android')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                platformFilter === 'android'
                  ? 'bg-green-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              Android
            </button>
            <button
              onClick={() => setPlatformFilter('ios')}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                platformFilter === 'ios'
                  ? 'bg-gray-800 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              iOS
            </button>
          </div>
        </div>
      </div>

      {/* Error State */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
          加载失败：{error}
        </div>
      )}

      {/* Loading State */}
      {isLoading && (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        </div>
      )}

      {/* Version List */}
      {!isLoading && !error && (
        <div className="space-y-4">
          {filteredVersions.length === 0 ? (
            <div className="card text-center py-12">
              <p className="text-gray-500">暂无版本数据</p>
              <button
                onClick={() => setShowUploadModal(true)}
                className="btn btn-primary mt-4"
              >
                上传第一个版本
              </button>
            </div>
          ) : (
            filteredVersions.map((version) => (
              <VersionCard
                key={version.id}
                version={version}
                onEdit={() => setEditingVersionId(version.id)}
                onDelete={() => handleDelete(version.id)}
                onToggle={(enabled) => handleToggle(version.id, enabled)}
              />
            ))
          )}
        </div>
      )}

      {/* Upload Modal */}
      {showUploadModal && (
        <UploadModal
          onClose={() => setShowUploadModal(false)}
          onSuccess={handleUploadSuccess}
        />
      )}

      {/* Edit Modal */}
      {editingVersionId && (
        <EditModal
          versionId={editingVersionId}
          onClose={() => setEditingVersionId(null)}
          onSuccess={handleEditSuccess}
        />
      )}
    </div>
  )
}
