'use client';

import { AppVersion } from '@/domain/entities/app-version';

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

function formatFileSize(bytes?: number): string {
  if (bytes == null) return '-';
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function formatDate(dateStr?: string | null): string {
  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,
  });
}

export function VersionCard({ version, onEdit, onDelete, onToggle }: VersionCardProps) {
  const platformBadge =
    version.platform === 'android'
      ? 'bg-green-500/15 text-green-400 border border-green-500/30'
      : 'bg-slate-500/15 text-slate-300 border border-slate-500/30';

  return (
    <div className="bg-card rounded-lg border p-4 hover:border-primary/30 transition-colors">
      <div className="flex justify-between items-start gap-4">
        {/* Left: Version info */}
        <div className="flex-1 min-w-0">
          {/* Title row */}
          <div className="flex flex-wrap items-center gap-2 mb-3">
            <span className={`px-2 py-0.5 rounded text-xs font-medium uppercase ${platformBadge}`}>
              {version.platform}
            </span>
            <span className="text-base font-semibold text-foreground">
              v{version.versionName}
            </span>
            <span className="text-sm text-muted-foreground">
              (Build {version.buildNumber})
            </span>
            {version.isForceUpdate && (
              <span className="px-2 py-0.5 rounded text-xs font-medium bg-destructive/15 text-red-400 border border-destructive/30">
                强制更新
              </span>
            )}
            <span
              className={`px-2 py-0.5 rounded text-xs font-medium ${
                version.isEnabled
                  ? 'bg-primary/15 text-primary border border-primary/30'
                  : 'bg-muted text-muted-foreground border border-border'
              }`}
            >
              {version.isEnabled ? '已启用' : '已禁用'}
            </span>
          </div>

          {/* Meta grid */}
          <div className="grid grid-cols-2 gap-x-6 gap-y-1.5 text-sm mb-3">
            <div className="flex gap-1.5">
              <span className="text-muted-foreground shrink-0">文件大小:</span>
              <span className="text-foreground">{formatFileSize(version.fileSize)}</span>
            </div>
            <div className="flex gap-1.5">
              <span className="text-muted-foreground shrink-0">最低系统版本:</span>
              <span className="text-foreground">{version.minOsVersion || '-'}</span>
            </div>
            <div className="flex gap-1.5">
              <span className="text-muted-foreground shrink-0">发布时间:</span>
              <span className="text-foreground">{formatDate(version.releaseDate)}</span>
            </div>
            <div className="flex gap-1.5">
              <span className="text-muted-foreground shrink-0">创建时间:</span>
              <span className="text-foreground">{formatDate(version.createdAt)}</span>
            </div>
          </div>

          {/* Changelog */}
          {version.changelog && (
            <div className="text-sm">
              <span className="text-muted-foreground">更新日志:</span>
              <pre className="mt-1 text-foreground bg-accent/50 rounded p-2.5 text-xs whitespace-pre-wrap font-sans">
                {version.changelog}
              </pre>
            </div>
          )}
        </div>

        {/* Right: Actions */}
        <div className="flex flex-col gap-1.5 shrink-0">
          <button
            onClick={() => onToggle(!version.isEnabled)}
            className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${
              version.isEnabled
                ? 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground'
                : 'bg-primary/15 text-primary hover:bg-primary/25'
            }`}
          >
            {version.isEnabled ? '禁用' : '启用'}
          </button>
          <button
            onClick={onEdit}
            className="px-3 py-1.5 rounded text-xs font-medium bg-accent text-foreground hover:bg-accent/80 transition-colors"
          >
            编辑
          </button>
          <button
            onClick={onDelete}
            className="px-3 py-1.5 rounded text-xs font-medium bg-destructive/15 text-red-400 hover:bg-destructive/25 transition-colors"
          >
            删除
          </button>
          {version.downloadUrl && (
            <a
              href={version.downloadUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="px-3 py-1.5 rounded text-xs font-medium bg-green-500/15 text-green-400 hover:bg-green-500/25 transition-colors text-center"
            >
              下载
            </a>
          )}
        </div>
      </div>
    </div>
  );
}
