import partsData from '../../data/index.js';
import { formatPrice } from '../../utils/priceFormat';

export default function PowerSupplyStep({ config, updateConfig }) {
  const selectedPowerSupplyId = config.powerSupply?.id;
  const selectedMotorId = config.motor?.id;

  const handleSelect = (powerSupply) => {
    updateConfig({ powerSupply });
  };

  // Filter compatible power supplies
  const compatiblePowerSupplies = partsData.powerSupplies.filter((psu) => {
    if (!selectedMotorId) return true;
    return psu.compatibleMotors.includes(selectedMotorId);
  });

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Select Power Supply</h2>
      <p className="text-gray-600 mb-6">
        Choose a compatible power supply for your selected motor.
      </p>

      {selectedMotorId && (
        <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <p className="text-sm text-blue-800">
            Showing power supplies compatible with:{' '}
            <span className="font-semibold">
              {config.motor?.name || 'Selected Motor'}
            </span>
          </p>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {compatiblePowerSupplies.map((powerSupply) => (
          <button
            key={powerSupply.id}
            onClick={() => handleSelect(powerSupply)}
            className={`p-6 border-2 rounded-lg text-left transition-all ${
              selectedPowerSupplyId === powerSupply.id
                ? 'border-blue-600 bg-blue-50'
                : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
            }`}
          >
            {powerSupply.image && (
              <div className="mb-4 flex justify-center">
                <img
                  src={powerSupply.image}
                  alt={powerSupply.name}
                  className="h-32 w-32 object-contain rounded-lg bg-gray-100"
                  onError={(e) => {
                    e.target.style.display = 'none';
                  }}
                />
              </div>
            )}
            <div className="flex items-start justify-between mb-2">
              <h3 className="text-lg font-semibold text-gray-900">
                {powerSupply.name}
              </h3>
              {selectedPowerSupplyId === powerSupply.id && (
                <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                  <svg
                    className="w-4 h-4 text-white"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>
              )}
            </div>
            <p className="text-sm text-gray-600 mb-3">
              {powerSupply.description}
            </p>
            <div className="flex gap-4 text-sm">
              <div>
                <span className="text-gray-500">Voltage:</span>{' '}
                <span className="font-medium">{powerSupply.voltage}</span>
              </div>
              <div>
                <span className="text-gray-500">Current:</span>{' '}
                <span className="font-medium">{powerSupply.current}</span>
              </div>
            </div>
            <div className="mt-3 flex items-center justify-between">
              <div className="text-lg font-bold text-blue-600">
                {formatPrice(powerSupply.price)}
              </div>
            </div>
            {powerSupply.links && powerSupply.links.length > 0 && (
              <div className="mt-3 pt-3 border-t border-gray-200">
                <p className="text-xs text-gray-500 mb-2">Buy from:</p>
                <div className="flex flex-wrap gap-2">
                  {powerSupply.links.map((link, index) => (
                    <a
                      key={index}
                      href={link.link}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 hover:text-blue-800 transition-colors"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <svg
                        className="w-3 h-3 mr-1.5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                        />
                      </svg>
                      {link.store}
                    </a>
                  ))}
                </div>
              </div>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}