import { DevicePhoneMobileIcon, CpuChipIcon } from "@heroicons/react/24/outline";

interface SimTypeSelectorProps {
  simType: "Physical SIM" | "eSIM" | "";
  onSimTypeChange: (type: "Physical SIM" | "eSIM") => void;
  eid: string;
  onEidChange: (eid: string) => void;
  errors: Record<string, string | undefined>;
}

export function SimTypeSelector({
  simType,
  onSimTypeChange,
  eid,
  onEidChange,
  errors,
}: SimTypeSelectorProps) {
  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <label
          className={`flex items-start gap-3 p-4 rounded-lg border-2 cursor-pointer transition-colors duration-200 ease-in-out ${
            simType === "Physical SIM"
              ? "border-blue-500 bg-blue-50 shadow-sm ring-1 ring-blue-200"
              : "border-gray-200 hover:border-blue-300 hover:bg-blue-50"
          }`}
        >
          <input
            type="radio"
            name="simType"
            value="Physical SIM"
            checked={simType === "Physical SIM"}
            onChange={e => onSimTypeChange(e.target.value as "Physical SIM")}
            className="mt-1 h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500"
          />
          <DevicePhoneMobileIcon className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
          <div>
            <span className="font-medium text-gray-900">Physical SIM</span>
            <p className="text-sm text-gray-600 mt-1">
              Traditional SIM card that will be mailed to you. Compatible with all devices.
            </p>
          </div>
        </label>

        <label
          className={`flex items-start gap-3 p-4 rounded-lg border-2 cursor-pointer transition-colors duration-200 ease-in-out ${
            simType === "eSIM"
              ? "border-blue-500 bg-blue-50 shadow-sm ring-1 ring-blue-200"
              : "border-gray-200 hover:border-blue-300 hover:bg-blue-50"
          }`}
        >
          <input
            type="radio"
            name="simType"
            value="eSIM"
            checked={simType === "eSIM"}
            onChange={e => onSimTypeChange(e.target.value as "eSIM")}
            className="mt-1 h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500"
          />
          <CpuChipIcon className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
          <div>
            <span className="font-medium text-gray-900">eSIM (Digital)</span>
            <p className="text-sm text-gray-600 mt-1">
              Digital SIM activated instantly. Requires eSIM-compatible device and EID number.
            </p>
          </div>
        </label>
      </div>

      {/* EID Input for eSIM */}
      <div
        className={`overflow-hidden transition-[max-height,opacity] duration-300 ease-out ${
          simType === "eSIM" ? "max-h-[360px] opacity-100" : "max-h-0 opacity-0"
        }`}
        aria-hidden={simType !== "eSIM"}
      >
        <div className="mt-4 p-4 bg-blue-50 rounded-lg">
          <h4 className="font-medium text-blue-900 mb-2">eSIM Device Information</h4>
          <div>
            <label htmlFor="eid" className="block text-sm font-medium text-gray-700 mb-1">
              EID (Embedded Identity Document) *
            </label>
            <input
              type="text"
              id="eid"
              value={eid}
              onChange={e => onEidChange(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder="32-digit EID number"
              maxLength={32}
            />
            {errors.eid && <p className="text-red-600 text-sm mt-1">{errors.eid}</p>}
            <p className="text-xs text-blue-700 mt-1">
              Find your EID in: Settings → General → About → EID (iOS) or Settings → About Phone →
              IMEI (Android)
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
