'use client'

import { AppVersion } from '@/domain'

interface VersionCardProps {
  version: AppVersion
  onEdit: () => void
  onDelete: () => void
  onToggle: (enabled: boolean) => void
}

export function VersionCard({ version, onEdit, onDelete, onToggle }: VersionCardProps) {
  const platformColors = {
    android: 'bg-green-100 text-green-800',
    ios: 'bg-gray-100 text-gray-800',
  }

  const formatFileSize = (size: string) => {
    const bytes = parseInt(size, 10)
    if (isNaN(bytes)) return size
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

  // 格式化日期时间 - UTC 自动转换为本地时间
  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return '-'
    return new Date(dateStr).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false,
    })
  }

  return (
    <div className="card hover:shadow-md transition-shadow">
      <div className="flex justify-between items-start">
        {/* Left: Version Info */}
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <span className={`px-2 py-1 rounded text-xs font-medium uppercase ${platformColors[version.platform]}`}>
              {version.platform}
            </span>
            <h3 className="text-lg font-semibold text-gray-900">
              v{version.versionName}
            </h3>
            <span className="text-sm text-gray-500">
              (Build {version.buildNumber})
            </span>
            {version.isForceUpdate && (
              <span className="px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
                强制更新
              </span>
            )}
            <span className={`px-2 py-1 rounded text-xs font-medium ${
              version.isEnabled
                ? 'bg-blue-100 text-blue-800'
                : 'bg-gray-100 text-gray-500'
            }`}>
              {version.isEnabled ? '已启用' : '已禁用'}
            </span>
          </div>

          <div className="grid grid-cols-2 gap-4 text-sm text-gray-600 mb-3">
            <div>
              <span className="text-gray-400">版本号：</span>
              {version.versionCode}
            </div>
            <div>
              <span className="text-gray-400">文件大小：</span>
              {formatFileSize(version.fileSize)}
            </div>
            <div>
              <span className="text-gray-400">最低系统版本：</span>
              {version.minOsVersion || '-'}
            </div>
            <div>
              <span className="text-gray-400">发布时间：</span>
              {formatDate(version.releaseDate)}
            </div>
          </div>

          {version.changelog && (
            <div className="text-sm">
              <span className="text-gray-400">更新日志：</span>
              <p className="text-gray-700 mt-1 whitespace-pre-line bg-gray-50 p-2 rounded">
                {version.changelog}
              </p>
            </div>
          )}

          <div className="mt-3 text-xs text-gray-400">
            创建于 {formatDate(version.createdAt)}
            {version.updatedAt !== version.createdAt && (
              <> · 更新于 {formatDate(version.updatedAt)}</>
            )}
          </div>
        </div>

        {/* Right: Actions */}
        <div className="flex flex-col gap-2 ml-4">
          <button
            onClick={() => onToggle(!version.isEnabled)}
            className={`btn text-sm ${
              version.isEnabled
                ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
            }`}
          >
            {version.isEnabled ? '禁用' : '启用'}
          </button>
          <button
            onClick={onEdit}
            className="btn bg-yellow-100 text-yellow-700 hover:bg-yellow-200 text-sm"
          >
            编辑
          </button>
          <button
            onClick={onDelete}
            className="btn bg-red-100 text-red-700 hover:bg-red-200 text-sm"
          >
            删除
          </button>
          {version.downloadUrl && (
            <a
              href={version.downloadUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="btn bg-green-100 text-green-700 hover:bg-green-200 text-sm text-center"
            >
              下载
            </a>
          )}
        </div>
      </div>
    </div>
  )
}
