import React from "react";
import type { MnpData } from "@customer-portal/domain/sim";

interface MnpFormProps {
  wantsMnp: boolean;
  onWantsMnpChange: (wants: boolean) => void;
  mnpData: MnpData;
  onMnpDataChange: (data: MnpData) => void;
  errors: Record<string, string | undefined>;
}

export function MnpForm({
  wantsMnp,
  onWantsMnpChange,
  mnpData,
  onMnpDataChange,
  errors,
}: MnpFormProps) {
  const handleInputChange = (field: keyof MnpData, value: string) => {
    onMnpDataChange({
      ...mnpData,
      [field]: value,
    });
  };

  return (
    <div>
      <div className="mb-4">
        <label className="flex items-start gap-3">
          <input
            type="checkbox"
            checked={wantsMnp}
            onChange={e => onWantsMnpChange(e.target.checked)}
            className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
          />
          <div>
            <span className="font-medium text-gray-900">
              I want to keep my current phone number (MNP - Mobile Number Portability)
            </span>
            <p className="text-sm text-gray-600 mt-1">
              Transfer your existing phone number from your current carrier to this new SIM card.
              Additional fees may apply.
            </p>
          </div>
        </label>
      </div>

      {wantsMnp && (
        <div className="mt-6 p-6 bg-blue-50 rounded-lg border border-blue-200">
          <h4 className="font-medium text-blue-900 mb-4">Number Porting Information</h4>
          <p className="text-sm text-blue-800 mb-4">
            Please provide the following information from your current mobile carrier to complete
            the number porting process.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* MNP Reservation Number */}
            <div>
              <label
                htmlFor="reservationNumber"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                MNP Reservation Number *
              </label>
              <input
                type="text"
                id="reservationNumber"
                value={mnpData.reservationNumber ?? ""}
                onChange={e => handleInputChange("reservationNumber", 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="10-digit reservation number"
              />
              {errors.reservationNumber && (
                <p className="text-red-600 text-sm mt-1">{errors.reservationNumber}</p>
              )}
            </div>

            {/* Expiry Date */}
            <div>
              <label htmlFor="expiryDate" className="block text-sm font-medium text-gray-700 mb-1">
                Reservation Expiry Date *
              </label>
              <input
                type="date"
                id="expiryDate"
                value={mnpData.expiryDate ?? ""}
                onChange={e => handleInputChange("expiryDate", 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"
              />
              {errors.expiryDate && (
                <p className="text-red-600 text-sm mt-1">{errors.expiryDate}</p>
              )}
            </div>

            {/* Phone Number */}
            <div>
              <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-700 mb-1">
                Current Phone Number *
              </label>
              <input
                type="tel"
                id="phoneNumber"
                value={mnpData.phoneNumber ?? ""}
                onChange={e => handleInputChange("phoneNumber", 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="090-1234-5678"
              />
              {errors.phoneNumber && (
                <p className="text-red-600 text-sm mt-1">{errors.phoneNumber}</p>
              )}
            </div>

            {/* MVNO Account Number */}
            <div>
              <label
                htmlFor="mvnoAccountNumber"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Account Number
              </label>
              <input
                type="text"
                id="mvnoAccountNumber"
                value={mnpData.mvnoAccountNumber ?? ""}
                onChange={e => handleInputChange("mvnoAccountNumber", 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="Your current carrier account number"
              />
            </div>

            {/* Last Name */}
            <div>
              <label
                htmlFor="portingLastName"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Last Name *
              </label>
              <input
                type="text"
                id="portingLastName"
                value={mnpData.portingLastName ?? ""}
                onChange={e => handleInputChange("portingLastName", 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="Tanaka"
              />
              {errors.portingLastName && (
                <p className="text-red-600 text-sm mt-1">{errors.portingLastName}</p>
              )}
            </div>

            {/* First Name */}
            <div>
              <label
                htmlFor="portingFirstName"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                First Name *
              </label>
              <input
                type="text"
                id="portingFirstName"
                value={mnpData.portingFirstName ?? ""}
                onChange={e => handleInputChange("portingFirstName", 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="Taro"
              />
              {errors.portingFirstName && (
                <p className="text-red-600 text-sm mt-1">{errors.portingFirstName}</p>
              )}
            </div>

            {/* Last Name Katakana */}
            <div>
              <label
                htmlFor="portingLastNameKatakana"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Last Name (Katakana) *
              </label>
              <input
                type="text"
                id="portingLastNameKatakana"
                value={mnpData.portingLastNameKatakana ?? ""}
                onChange={e => handleInputChange("portingLastNameKatakana", 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="タナカ"
              />
              {errors.portingLastNameKatakana && (
                <p className="text-red-600 text-sm mt-1">{errors.portingLastNameKatakana}</p>
              )}
            </div>

            {/* First Name Katakana */}
            <div>
              <label
                htmlFor="portingFirstNameKatakana"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                First Name (Katakana) *
              </label>
              <input
                type="text"
                id="portingFirstNameKatakana"
                value={mnpData.portingFirstNameKatakana ?? ""}
                onChange={e => handleInputChange("portingFirstNameKatakana", 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="タロウ"
              />
              {errors.portingFirstNameKatakana && (
                <p className="text-red-600 text-sm mt-1">{errors.portingFirstNameKatakana}</p>
              )}
            </div>

            {/* Gender */}
            <div>
              <label
                htmlFor="portingGender"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Gender *
              </label>
              <select
                id="portingGender"
                value={mnpData.portingGender ?? ""}
                onChange={e => handleInputChange("portingGender", 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"
              >
                <option value="">Select gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Corporate/Other">Corporate/Other</option>
              </select>
              {errors.portingGender && (
                <p className="text-red-600 text-sm mt-1">{errors.portingGender}</p>
              )}
            </div>

            {/* Date of Birth */}
            <div>
              <label
                htmlFor="portingDateOfBirth"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Date of Birth *
              </label>
              <input
                type="date"
                id="portingDateOfBirth"
                value={mnpData.portingDateOfBirth ?? ""}
                onChange={e => handleInputChange("portingDateOfBirth", 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"
              />
              {errors.portingDateOfBirth && (
                <p className="text-red-600 text-sm mt-1">{errors.portingDateOfBirth}</p>
              )}
            </div>
          </div>

          <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
            <p className="text-sm text-yellow-800">
              <strong>Important:</strong> Please ensure all information matches exactly with your
              current carrier records. Incorrect information may delay the porting process.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}
