import { motion } from 'framer-motion';
import { useState } from 'react';

export default function ResearchCard({ research, onPurchase, resources }) {
  const [isPurchasing, setIsPurchasing] = useState(false);

  const canAfford = research.cost.every(cost => {
    const resource = resources.find(r => r.name === cost.name);
    return resource && resource.amount >= cost.amount;
  });

  const handlePurchase = () => {
    if (canAfford && !isPurchasing) {
      setIsPurchasing(true);
      setTimeout(() => {
        onPurchase(research);
        setIsPurchasing(false);
      }, 500);
    }
  };

  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      className="bg-space-dark/50 border border-space-purple/30 rounded-lg p-4 flex flex-col"
    >
      <div className="flex justify-between items-start mb-3">
        <h3 className="text-lg font-semibold text-space-purple">{research.name}</h3>
        {research.unlocked && (
          <div className="text-right">
            <div className="text-xs text-space-purple/70">Active</div>
          </div>
        )}
      </div>

      <div className="mb-3">
        <p className="text-sm text-space-blue/80 mb-2">{research.description}</p>
        <div className="flex flex-wrap gap-2 mb-3">
          {research.cost.map((cost, index) => {
            const resource = resources.find(r => r.name === cost.name);
            const hasEnough = resource && resource.amount >= cost.amount;
            return (
              <div
                key={index}
                className={`flex items-center space-x-1 px-2 py-1 rounded text-xs ${
                  hasEnough ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'
                }`}
              >
                <cost.icon size={12} />
                <span>{cost.amount}</span>
              </div>
            );
          })}
        </div>
      </div>

      {!research.unlocked ? (
        <motion.button
          whileTap={{ scale: 0.98 }}
          onClick={handlePurchase}
          disabled={!canAfford || isPurchasing}
          className={`w-full py-2 rounded-lg font-medium transition-all ${
            canAfford
              ? 'bg-space-purple text-white hover:bg-purple-600'
              : 'bg-gray-600 text-gray-400 cursor-not-allowed'
          } ${isPurchasing ? 'animate-pulse' : ''}`}
        >
          {isPurchasing ? 'Researching...' : 'Research'}
        </motion.button>
      ) : (
        <div className="text-center text-space-purple/70 text-sm">Already researched</div>
      )}
    </motion.div>
  );
}