import { motion, AnimatePresence } from 'framer-motion'
import { createPortal } from 'react-dom'
import { X, History, CalendarDays, Tag } from 'lucide-react'
import { changelogEntries } from '@/data'
import type { ChangelogType } from '@/types/itto'

interface ChangelogModalProps {
  isOpen: boolean
  onClose: () => void
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.06,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 12 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.25,
    },
  },
}

const typeMeta: Record<ChangelogType, { label: string; className: string }> = {
  feat: { label: '新功能', className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
  fix: { label: '修复', className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300' },
  style: { label: '样式', className: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300' },
  refactor: { label: '重构', className: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300' },
  docs: { label: '文档', className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
  perf: { label: '性能', className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' },
  test: { label: '测试', className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300' },
  chore: { label: '工程', className: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' },
}

function formatDate(date: string) {
  const [year, month, day] = date.split('-').map(Number)
  if (!year || !month || !day) return date
  return `${year}年${month}月${day}日`
}

// 按日期分组
function groupByDate(entries: typeof changelogEntries) {
  const groups = new Map<string, typeof changelogEntries>()
  entries.forEach((entry) => {
    const existing = groups.get(entry.date) || []
    groups.set(entry.date, [...existing, entry])
  })
  return Array.from(groups.entries()).sort((a, b) => b[0].localeCompare(a[0]))
}

export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
  const groupedEntries = groupByDate(changelogEntries)

  // 使用 Portal 将模态框渲染到 body，避免被 Header 的层叠上下文限制
  if (typeof document === 'undefined') return null

  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <>
          {/* 背景遮罩 */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/50 z-[9999]"
          />

          {/* 模态框 */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            className="fixed inset-4 md:inset-8 lg:inset-16 z-[10000] flex items-center justify-center"
          >
            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full h-full flex flex-col overflow-hidden">
              {/* 头部 */}
              <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900/50">
                    <History size={20} className="text-indigo-600 dark:text-indigo-400" />
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-gray-900 dark:text-white">更新日志</h2>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      共 {changelogEntries.length} 条记录
                    </p>
                  </div>
                </div>
                <button
                  onClick={onClose}
                  className="flex h-10 w-10 items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
                  aria-label="关闭"
                >
                  <X size={20} />
                </button>
              </div>

              {/* 内容区域 */}
              <div className="flex-1 overflow-y-auto p-6">
                {changelogEntries.length > 0 ? (
                  <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                    className="max-w-4xl mx-auto space-y-8"
                  >
                    {/* 按日期分组显示 */}
                    {groupedEntries.map(([date, entries]) => (
                      <div key={date} className="space-y-4">
                        {/* 日期标题 */}
                        <div className="flex items-center gap-3">
                          <CalendarDays size={20} className="text-indigo-600 dark:text-indigo-400" />
                          <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                            {formatDate(date)}
                          </h3>
                          <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
                        </div>

                        {/* 该日期下的更新列表 - 统一卡片 */}
                        <motion.div
                          variants={itemVariants}
                          className="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700"
                        >
                          {entries.map((entry, index) => {
                            const meta = typeMeta[entry.type]
                            return (
                              <div
                                key={entry.id || `${entry.date}-${index}`}
                                className="p-4 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                              >
                                <div className="flex items-start gap-3">
                                  {/* 标签 */}
                                  <div className="flex items-center gap-2 flex-shrink-0">
                                    <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium ${meta.className}`}>
                                      <Tag size={12} />
                                      {meta.label}
                                    </span>
                                    {entry.scope && (
                                      <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                                        {entry.scope}
                                      </span>
                                    )}
                                  </div>

                                  {/* 标题 */}
                                  <p className="text-sm text-gray-900 dark:text-white flex-1">
                                    {entry.title}
                                  </p>
                                </div>
                              </div>
                            )
                          })}
                        </motion.div>
                      </div>
                    ))}
                  </motion.div>
                ) : (
                  <div className="flex flex-col items-center justify-center py-16 text-gray-400 dark:text-gray-500">
                    <History size={48} className="mb-4" />
                    <p className="text-sm">暂无更新记录</p>
                  </div>
                )}
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>,
    document.body
  )
}