"use client";

import type { InternetInstallationCatalogItem } from "@customer-portal/domain/catalog";
import { CardPricing } from "@/features/catalog/components/base/CardPricing";

interface InstallationOptionsProps {
  installations: InternetInstallationCatalogItem[];
  selectedInstallationSku: string | null;
  onInstallationSelect: (installation: InternetInstallationCatalogItem | null) => void;
  showSkus?: boolean;
}

export function InstallationOptions({
  installations,
  selectedInstallationSku,
  onInstallationSelect,
  showSkus = false,
}: InstallationOptionsProps) {
  const sortedInstallations = [...installations].sort(
    (a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)
  );

  if (sortedInstallations.length === 0) {
    return (
      <div className="col-span-full text-center py-8 text-gray-500">
        <p>No installation options available. Please contact support.</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {sortedInstallations.map(installation => {
        const isSelected = selectedInstallationSku === installation.sku;
        const installationTerm = installation.catalogMetadata?.installationTerm ?? null;
        const description =
          installation.description ||
          (installationTerm === "12-Month"
            ? "Spread the installation fee across 12 monthly payments."
            : installationTerm === "24-Month"
              ? "Spread the installation fee across 24 monthly payments."
              : "Pay the full installation fee in one payment.");

        return (
          <button
            key={installation.sku}
            type="button"
            onClick={() => onInstallationSelect(installation)}
            aria-pressed={isSelected}
            className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 flex flex-col gap-4 ${
              isSelected
                ? "border-blue-500 bg-blue-50 shadow-md"
                : "border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 shadow-sm hover:shadow-md"
            }`}
          >
            {/* Header with title and radio button */}
            <div className="flex items-start justify-between gap-3">
              <h4 className="text-lg font-semibold text-gray-900 flex-1">{installation.name}</h4>
              <div
                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-0.5 ${
                  isSelected ? "bg-blue-500 border-blue-500" : "border-gray-300 bg-white"
                }`}
                aria-hidden="true"
              >
                {isSelected && <div className="w-2 h-2 bg-white rounded-full"></div>}
              </div>
            </div>

            {/* Description */}
            <p className="text-sm text-gray-600 leading-relaxed">{description}</p>

            {/* Payment type badge */}
            <div className="flex items-center gap-2">
              <span
                className={`text-xs px-2.5 py-1 rounded-full font-medium ${
                  installation.billingCycle === "Monthly"
                    ? "bg-blue-100 text-blue-700 border border-blue-200"
                    : "bg-green-100 text-green-700 border border-green-200"
                }`}
              >
                {installation.billingCycle === "Monthly" ? "Monthly Payment" : "One-time Payment"}
              </span>
            </div>

            {/* Pricing */}
            <div className="pt-3 border-t border-gray-200">
              <CardPricing
                monthlyPrice={
                  installation.billingCycle === "Monthly" ? installation.monthlyPrice : null
                }
                oneTimePrice={
                  installation.billingCycle !== "Monthly" ? installation.oneTimePrice : null
                }
                size="md"
                alignment="left"
              />
            </div>

            {showSkus && (
              <div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
                SKU: {installation.sku}
              </div>
            )}
          </button>
        );
      })}
    </div>
  );
}
