import { useTranslation } from "react-i18next";
import { Card } from "@/shared/common/ui/card";
import type { EtradeBusinessLicenseOption } from "@/complaints/services/etradeTinService";

interface EtradeLicensePickerProps {
  organizationName?: string;
  options: EtradeBusinessLicenseOption[];
  selectedLicenseNumber: string;
  onSelect: (licenseNumber: string) => void;
}

export function EtradeLicensePicker({
  organizationName,
  options,
  selectedLicenseNumber,
  onSelect,
}: EtradeLicensePickerProps) {
  const { t } = useTranslation();

  return (
    <div className="space-y-4">
      <div className="text-center">
        <h2 className="text-lg font-semibold text-gray-900">
          {t("registration.etrade.selectLicenseTitle")}
        </h2>
        <p className="mt-1 text-sm text-gray-600">
          {t("registration.etrade.selectLicenseDescription")}
        </p>
        {organizationName ? (
          <p className="mt-2 text-sm font-medium text-gray-900">
            {organizationName}
          </p>
        ) : null}
      </div>

      <div className="max-h-[24rem] space-y-3 overflow-y-auto pr-1">
        {options.map((option) => {
          const isSelected = selectedLicenseNumber === option.licenseNumber;

          return (
            <Card
              key={option.mainGuid}
              className={`cursor-pointer border-2 p-4 transition-all ${
                isSelected
                  ? "border-primary bg-primary/5 ring-2 ring-primary/20"
                  : "border-gray-200 hover:border-primary/40 bg-white"
              }`}
              onClick={() => onSelect(option.licenseNumber)}>
              <div className="space-y-2 text-left">
                <p className="font-semibold text-gray-900">{option.tradeName}</p>
                <p className="text-sm text-gray-700">
                  <span className="font-medium">
                    {t("registration.etrade.licenseNumber")}:
                  </span>{" "}
                  <span className="font-mono">{option.licenseNumber}</span>
                </p>
                {option.activities.length > 0 ? (
                  <p className="text-sm text-gray-600">
                    <span className="font-medium">
                      {t("registration.etrade.activity")}:
                    </span>{" "}
                    {option.activities.join("; ")}
                  </p>
                ) : null}
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}
