import React from 'react';
import Button from '../ui/Button';
import Card from '../ui/Card';

export interface SchemeData {
  id: string;
  title: string | null;
  weaponName: string | null;
  category: string | null;
  viewsCount: number;
  downloadsCount: number;
  likesCount: number;
  favoritesCount: number;
  price: number;
  isOfficial: boolean;
  user?: { username: string };
}

interface SchemeCardProps {
  scheme: SchemeData;
  isFavorited?: boolean;
  onFavorite?: (id: string) => void;
  onUse?: (id: string) => void;
  onClick?: (id: string) => void;
  className?: string;
}

export default function SchemeCard({ scheme, isFavorited, onFavorite, onUse, onClick, className = '' }: SchemeCardProps) {
  return (
    <Card
      hoverable
      onClick={() => onClick?.(scheme.id)}
      className={`flex flex-col p-4 gap-2 ${className}`}
      serial={scheme.isOfficial ? 'OFFICIAL' : undefined}
    >
      {/* 标题 */}
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1">
          <h3 className="text-[15px] font-bold tracking-[0.08em] uppercase text-[#e0e0e0] truncate">
            {scheme.title || '未命名方案'}
          </h3>
          <p className="text-[15px] font-mono text-[#555] mt-0.5">{scheme.weaponName || scheme.category || '通用'}</p>
        </div>
        {scheme.isOfficial && (
          <span className="text-[15px] font-semibold tracking-[0.1em] uppercase text-[#ff4500] border border-[#ff4500]/30 px-1 py-0.5">
            官方
          </span>
        )}
      </div>

      {/* 作者 */}
      {scheme.user?.username && (
        <p className="text-[15px] font-mono text-[#555]">作者: {scheme.user.username}</p>
      )}

      {/* 价格 */}
      {scheme.price > 0 && (
        <p className="text-[15px] font-mono text-[#555]">💰 {scheme.price}</p>
      )}

      {/* 操作按钮 */}
      <div className="flex items-center gap-2 mt-auto pt-1 border-t border-[#333]">
        <button
          onClick={e => { e.stopPropagation(); onFavorite?.(scheme.id); }}
          className={`text-[15px] font-mono px-2 py-1 border transition-colors duration-75
            ${isFavorited
              ? 'border-[#ff4500] text-[#ff4500]'
              : 'border-[#333] text-[#555] hover:border-[#555]'}`}
        >
          {isFavorited ? '★' : '☆'} {scheme.favoritesCount}
        </button>
        <button
          onClick={e => { e.stopPropagation(); onUse?.(scheme.id); }}
          className="ml-auto text-[15px] font-semibold tracking-[0.1em] uppercase text-[#888] border border-[#333] px-2 py-1
            hover:border-[#ff4500] hover:text-[#ff4500] transition-colors duration-75"
        >
          使用
        </button>
      </div>

      {/* 统计数据 */}
      <div className="flex items-center gap-4 text-[15px] font-mono text-[#555]">
        <span>👁 {scheme.viewsCount}</span>
        <span>⬇ {scheme.downloadsCount}</span>
        <span>👍 {scheme.likesCount}</span>
      </div>
    </Card>
  );
}