import React from 'react';

export interface OptimizeItemData {
  id: string;
  label: string;
  description: string;
  category: string;
  icon: string;
  status: 'pending' | 'optimized' | 'restored' | 'error';
}

interface OptimizeItemProps {
  item: OptimizeItemData;
  onToggle: (id: string, action: 'optimize' | 'restore') => void;
  disabled?: boolean;
}

const statusStyles: Record<string, string> = {
  pending: 'border-[#333]',
  optimized: 'border-[#ff4500]/50 bg-[#ff4500]/5',
  restored: 'border-[#333]',
  error: 'border-[#cc3300]/50 bg-[#cc3300]/5',
};

const statusTextStyles: Record<string, string> = {
  pending: 'text-[#555]',
  optimized: 'text-[#ff4500]',
  restored: 'text-[#555]',
  error: 'text-[#cc3300]',
};

const statusLabels: Record<string, string> = {
  pending: '待优化',
  optimized: '已优化',
  restored: '已恢复',
  error: '失败',
};

export default function OptimizeItem({ item, onToggle, disabled }: OptimizeItemProps) {
  const isOptimized = item.status === 'optimized';

  return (
    <div className={`border transition-colors duration-75 bg-[#1a1a1a]/60 ${statusStyles[item.status]}`}>
      <div className="flex items-center gap-3 px-3 py-2.5">
        <div className={`w-1.5 h-1.5 shrink-0 rounded-full ${isOptimized ? 'bg-[#ff4500]' : 'bg-[#333]'}`} />

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="material-symbols-outlined text-[14px] text-[#555]">{item.icon}</span>
            <span className="text-[13px] font-semibold tracking-[0.1em] uppercase text-[#e0e0e0] truncate">
              {item.label}
            </span>
            <span className={`text-[12px] font-mono tracking-wider px-1.5 py-[1px] border ${statusTextStyles[item.status]} border-current/30`}>
              {statusLabels[item.status]}
            </span>
          </div>
          <p className="text-[12px] text-[#555] mt-0.5 truncate">{item.description}</p>
        </div>

        <button
          onClick={() => onToggle(item.id, isOptimized ? 'restore' : 'optimize')}
          disabled={disabled || item.status === 'error'}
          className={`w-[80px] shrink-0 py-2 text-[12px] font-semibold tracking-[0.1em] uppercase border transition-colors duration-75
            ${isOptimized
              ? 'border-[#555] text-[#555] hover:border-[#ff4500] hover:text-[#ff4500]'
              : 'border-[#555] text-[#888] hover:border-[#ff4500] hover:text-[#ff4500]'
            }
            disabled:opacity-40 disabled:cursor-not-allowed`}
        >
          {isOptimized ? '恢复' : '优化'}
        </button>
      </div>
    </div>
  );
}