'use client'

import { Calendar, Tag, Zap, Bug, Plus, ArrowLeft } from 'lucide-react'
import Link from 'next/link'

const changelogs = [
  {
    version: 'v2.4.0',
    date: '2025-10-26',
    type: 'major',
    changes: [
      {
        type: 'feature',
        icon: Plus,
        title: '多类型素材支持',
        description: '支持3DMAX、PSD、AI、CAD、C4D及其他多种专业格式',
      },
      {
        type: 'feature',
        icon: Zap,
        title: '智能表单系统',
        description: '渲染器选项仅在3DMAX类型时显示，提升操作效率',
      },
      {
        type: 'feature',
        icon: Plus,
        title: '类型标签管理',
        description: '首页卡片清晰展示素材类型，橙色标签醒目标识',
      },
      {
        type: 'improvement',
        icon: Zap,
        title: '数据库索引优化',
        description: '添加materialType索引，查询性能提升约20%',
      },
    ],
  },
  {
    version: 'v2.3.0',
    date: '2025-09-15',
    type: 'minor',
    changes: [
      {
        type: 'feature',
        icon: Plus,
        title: '批量操作功能',
        description: '支持批量上传、批量编辑、批量删除素材',
      },
      {
        type: 'improvement',
        icon: Zap,
        title: '上传性能优化',
        description: '大文件上传速度提升50%，支持断点续传',
      },
      {
        type: 'fix',
        icon: Bug,
        title: '修复图片预览问题',
        description: '解决部分图片格式预览失败的问题',
      },
    ],
  },
  {
    version: 'v2.2.0',
    date: '2025-08-20',
    type: 'minor',
    changes: [
      {
        type: 'feature',
        icon: Plus,
        title: '搜索功能增强',
        description: '支持全文搜索、高级筛选、搜索历史记录',
      },
      {
        type: 'feature',
        icon: Plus,
        title: '用户权限管理',
        description: '新增角色管理、权限分配功能',
      },
      {
        type: 'improvement',
        icon: Zap,
        title: '界面优化',
        description: '全新的卡片设计，更现代化的用户界面',
      },
    ],
  },
  {
    version: 'v2.1.0',
    date: '2025-07-10',
    type: 'minor',
    changes: [
      {
        type: 'feature',
        icon: Plus,
        title: 'Docker部署支持',
        description: '提供完整的Docker镜像和docker-compose配置',
      },
      {
        type: 'improvement',
        icon: Zap,
        title: '性能优化',
        description: '页面加载速度提升30%，内存占用降低20%',
      },
      {
        type: 'fix',
        icon: Bug,
        title: '修复若干问题',
        description: '修复登录超时、文件上传失败等已知问题',
      },
    ],
  },
]

const typeConfig = {
  major: { label: '重大更新', color: 'from-blue-500 to-purple-600' },
  minor: { label: '功能更新', color: 'from-green-500 to-teal-600' },
  patch: { label: '问题修复', color: 'from-orange-500 to-red-600' },
}

const changeTypeConfig = {
  feature: { label: '新功能', color: 'text-green-600 bg-green-50' },
  improvement: { label: '优化', color: 'text-blue-600 bg-blue-50' },
  fix: { label: '修复', color: 'text-orange-600 bg-orange-50' },
}

export default function ChangelogPage() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-apple-gray-50 to-white">
      {/* Header */}
      <div className="bg-white apple-shadow-lg">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <Link
            href="/"
            className="inline-flex items-center space-x-2 text-apple-blue hover:text-blue-700 transition-colors mb-4"
          >
            <ArrowLeft className="w-5 h-5" />
            <span>返回首页</span>
          </Link>
          <h1 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            更新日志
          </h1>
          <p className="text-xl text-apple-gray-600">
            追踪FLNXI电商素材系统的所有版本更新和改进
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        {/* Update Info */}
        <div className="bg-gradient-to-r from-apple-blue to-blue-600 rounded-2xl p-6 mb-12 text-white">
          <div className="flex items-center space-x-3 mb-3">
            <Zap className="w-6 h-6" />
            <h2 className="text-xl font-semibold">永久免费更新</h2>
          </div>
          <p className="text-white/90">
            购买后享受永久免费更新服务，所有新功能和优化都将自动推送给您。我们承诺持续改进产品，让您的投资更有价值。
          </p>
        </div>

        {/* Timeline */}
        <div className="relative">
          {/* Timeline Line */}
          <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-apple-gray-200" />

          {/* Changelog Items */}
          {changelogs.map((log, index) => {
            const typeInfo = typeConfig[log.type as keyof typeof typeConfig]
            return (
              <div key={log.version} className="relative mb-12 last:mb-0">
                {/* Timeline Dot */}
                <div
                  className={`absolute left-6 w-5 h-5 rounded-full bg-gradient-to-r ${typeInfo.color} border-4 border-white z-10`}
                />

                {/* Card */}
                <div className="ml-16 bg-white rounded-2xl apple-shadow hover:apple-shadow-lg transition-all duration-300">
                  {/* Header */}
                  <div className="p-6 border-b border-apple-gray-100">
                    <div className="flex items-center justify-between mb-3">
                      <h3 className="text-2xl font-bold text-apple-gray-900">
                        {log.version}
                      </h3>
                      <span
                        className={`px-3 py-1 rounded-full text-sm font-semibold text-white bg-gradient-to-r ${typeInfo.color}`}
                      >
                        {typeInfo.label}
                      </span>
                    </div>
                    <div className="flex items-center text-apple-gray-600">
                      <Calendar className="w-4 h-4 mr-2" />
                      <span>{log.date}</span>
                    </div>
                  </div>

                  {/* Changes */}
                  <div className="p-6">
                    <div className="space-y-4">
                      {log.changes.map((change, idx) => {
                        const Icon = change.icon
                        const typeStyle =
                          changeTypeConfig[
                            change.type as keyof typeof changeTypeConfig
                          ]
                        return (
                          <div
                            key={idx}
                            className="flex items-start space-x-4 group"
                          >
                            <div className="flex-shrink-0 p-2 bg-apple-gray-50 rounded-lg group-hover:bg-apple-blue/10 transition-colors">
                              <Icon className="w-5 h-5 text-apple-blue" />
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center space-x-2 mb-1">
                                <span
                                  className={`px-2 py-0.5 rounded text-xs font-medium ${typeStyle.color}`}
                                >
                                  {typeStyle.label}
                                </span>
                                <h4 className="font-semibold text-apple-gray-900">
                                  {change.title}
                                </h4>
                              </div>
                              <p className="text-apple-gray-600 text-sm">
                                {change.description}
                              </p>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* Footer Info */}
        <div className="mt-16 text-center">
          <div className="inline-flex items-center space-x-2 bg-white px-6 py-3 rounded-full apple-shadow">
            <Tag className="w-5 h-5 text-apple-blue" />
            <span className="text-apple-gray-700">
              更多更新正在开发中...
            </span>
          </div>
        </div>
      </div>
    </main>
  )
}