export default function StepGroundLoops({
  detectors,
  styles,
  sizes,
  types,
  value,
  onSetNeeded,
  onSetStyle,
  onToggleType,
  onSetSize,
  onNext,
  onBack,
}) {
  const { needed, style, types: selectedTypes, typeSizes } = value;

  return (
    <div>
      <div className="flex items-center gap-2 mb-6">
        <button
          onClick={onBack}
          className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <div>
          <h2 className="text-xl font-semibold text-gray-900">
            Step 2: Ground Loops
          </h2>
          <p className="text-gray-500">
            Are ground loop detectors required for this installation?
          </p>
        </div>
      </div>

      <div className="flex gap-4 mb-8">
        <button
          onClick={() => onSetNeeded(false)}
          className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
            !needed
              ? 'border-blue-600 bg-blue-50 shadow-md'
              : 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
          }`}
        >
          <div className="text-3xl mb-2">&#10060;</div>
          <div className="font-semibold text-gray-900">No Ground Loops</div>
          <div className="text-sm text-gray-500 mt-1">Skip this section</div>
        </button>
        <button
          onClick={() => onSetNeeded(true)}
          className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
            needed
              ? 'border-blue-600 bg-blue-50 shadow-md'
              : 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
          }`}
        >
          <div className="text-3xl mb-2">&#128373;</div>
          <div className="font-semibold text-gray-900">Yes, Loops Needed</div>
          <div className="text-sm text-gray-500 mt-1">Configure below</div>
        </button>
      </div>

      {needed && (
        <div className="space-y-8">
          <div>
            <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
              Installation Style
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {styles.map((s) => (
                <button
                  key={s.id}
                  onClick={() => onSetStyle(s.id)}
                  className={`text-left p-4 rounded-xl border-2 transition-all ${
                    style === s.id
                      ? 'border-blue-600 bg-blue-50 shadow-md'
                      : 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <div
                      className={`shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center mt-0.5 ${
                        style === s.id
                          ? 'border-blue-600'
                          : 'border-gray-300'
                      }`}
                    >
                      {style === s.id && (
                        <div className="w-2.5 h-2.5 rounded-full bg-blue-600" />
                      )}
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">{s.name}</div>
                      <div className="text-sm text-gray-500 mt-1">
                        {s.description}
                      </div>
                      {s.additionalCost > 0 && (
                        <div className="mt-1 text-sm font-medium text-blue-600">
                          +C${s.additionalCost.toLocaleString('en-CA')}
                        </div>
                      )}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div>
            <div className="flex items-center justify-between mb-3">
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">
                Loop Types Needed
              </h3>
              {selectedTypes.length > 0 && (
                <span className="text-xs text-blue-600 font-medium">
                  {selectedTypes.length} selected
                </span>
              )}
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {types.map((t) => {
                const isSelected = selectedTypes.includes(t.id);
                const currentSize = typeSizes[t.id];
                return (
                  <div
                    key={t.id}
                    className={`rounded-xl border-2 transition-all ${
                      isSelected
                        ? 'border-blue-600 bg-blue-50'
                        : 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
                    }`}
                  >
                    <button
                      onClick={() => onToggleType(t.id)}
                      className={`text-left w-full p-4 ${isSelected ? 'pb-3' : ''}`}
                    >
                      <div className="flex items-start justify-between">
                        <div className="min-w-0">
                          <div className="font-semibold text-gray-900">
                            {t.name}
                          </div>
                          <div className="text-sm text-gray-500 mt-1">
                            {t.description}
                          </div>
                          <div className="mt-2 text-lg font-bold text-blue-600">
                            C${t.price.toLocaleString('en-CA')}
                          </div>
                        </div>
                        <div
                          className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
                            isSelected
                              ? 'border-blue-600 bg-blue-600'
                              : 'border-gray-300'
                          }`}
                        >
                          {isSelected && (
                            <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                            </svg>
                          )}
                        </div>
                      </div>
                    </button>

                    {isSelected && (
                      <div className="px-4 pb-4 border-t border-blue-200 pt-3 mt-0 space-y-3">
                        <div className="flex items-center gap-2 text-xs text-blue-700 bg-blue-100 rounded-md px-3 py-2">
                          <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                          </svg>
                          <span>Includes 1 Loop Detector (+C${(detectors?.[0]?.price ?? 250).toLocaleString('en-CA')})</span>
                        </div>
                        <div>
                          <label className="block text-xs font-medium text-gray-500 mb-2">
                            Loop Size
                          </label>
                          <div className="flex gap-2">
                            {sizes.map((s) => {
                              const isSizeSelected = currentSize === s.id;
                              return (
                                <button
                                  key={s.id}
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    onSetSize(t.id, s.id);
                                  }}
                                  className={`flex-1 px-3 py-2 text-sm rounded-lg border-2 transition-all ${
                                    isSizeSelected
                                      ? 'border-blue-600 bg-white shadow-sm'
                                      : 'border-gray-200 bg-white hover:border-gray-300'
                                  }`}
                                >
                                  <div className={`font-medium ${isSizeSelected ? 'text-blue-700' : 'text-gray-700'}`}>
                                    {s.name}
                                  </div>
                                  {s.additionalCost > 0 && (
                                    <div className={`text-xs mt-0.5 ${isSizeSelected ? 'text-blue-500' : 'text-gray-400'}`}>
                                      +C${s.additionalCost.toLocaleString('en-CA')}
                                    </div>
                                  )}
                                  {s.additionalCost === 0 && (
                                    <div className="text-xs mt-0.5 text-gray-400">Standard</div>
                                  )}
                                </button>
                              );
                            })}
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      <div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-8">
        <div className="text-sm text-gray-500">
          {needed
            ? `${selectedTypes.length} loop type${selectedTypes.length !== 1 ? 's' : ''} selected`
            : 'Ground loops not required'}
        </div>
        <button
          onClick={onNext}
          className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          Continue
        </button>
      </div>
    </div>
  );
}