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

const INPUT_CLASS =
  "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";
const LABEL_CLASS = "block text-sm font-medium text-gray-700 mb-1";

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

interface MnpFieldProps {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  error: string | undefined;
  type?: string | undefined;
  placeholder?: string | undefined;
}

function MnpField({
  id,
  label,
  value,
  onChange,
  error,
  type = "text",
  placeholder,
}: MnpFieldProps) {
  return (
    <div>
      <label htmlFor={id} className={LABEL_CLASS}>
        {label}
      </label>
      <input
        type={type}
        id={id}
        value={value}
        onChange={e => onChange(e.target.value)}
        className={INPUT_CLASS}
        placeholder={placeholder}
      />
      {error && <p className="text-red-600 text-sm mt-1">{error}</p>}
    </div>
  );
}

const MNP_FIELDS: {
  field: keyof MnpData;
  label: string;
  type?: string;
  placeholder?: string;
  hasError?: boolean;
}[] = [
  {
    field: "reservationNumber",
    label: "MNP Reservation Number *",
    placeholder: "10-digit reservation number",
    hasError: true,
  },
  { field: "expiryDate", label: "Reservation Expiry Date *", type: "date", hasError: true },
  {
    field: "phoneNumber",
    label: "Current Phone Number *",
    type: "tel",
    placeholder: "090-1234-5678",
    hasError: true,
  },
  {
    field: "mvnoAccountNumber",
    label: "Account Number",
    placeholder: "Your current carrier account number",
  },
  { field: "portingLastName", label: "Last Name *", placeholder: "Tanaka", hasError: true },
  { field: "portingFirstName", label: "First Name *", placeholder: "Taro", hasError: true },
  {
    field: "portingLastNameKatakana",
    label: "Last Name (Katakana) *",
    placeholder: "タナカ",
    hasError: true,
  },
  {
    field: "portingFirstNameKatakana",
    label: "First Name (Katakana) *",
    placeholder: "タロウ",
    hasError: true,
  },
];

function MnpGenderSelect({
  value,
  onChange,
  error,
}: {
  value: string;
  onChange: (value: string) => void;
  error: string | undefined;
}) {
  return (
    <div>
      <label htmlFor="portingGender" className={LABEL_CLASS}>
        Gender *
      </label>
      <select
        id="portingGender"
        value={value}
        onChange={e => onChange(e.target.value)}
        className={INPUT_CLASS}
      >
        <option value="">Select gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
        <option value="Corporate/Other">Corporate/Other</option>
      </select>
      {error && <p className="text-red-600 text-sm mt-1">{error}</p>}
    </div>
  );
}

function MnpPortingFields({
  mnpData,
  onInputChange,
  errors,
}: {
  mnpData: MnpData;
  onInputChange: (field: keyof MnpData, value: string) => void;
  errors: Record<string, string | undefined>;
}) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {MNP_FIELDS.map(({ field, label, type, placeholder, hasError }) => (
        <MnpField
          key={field}
          id={field}
          label={label}
          value={(mnpData[field] as string) ?? ""}
          onChange={v => onInputChange(field, v)}
          error={hasError ? errors[field] : undefined}
          type={type}
          placeholder={placeholder}
        />
      ))}
      <MnpGenderSelect
        value={mnpData.portingGender ?? ""}
        onChange={v => onInputChange("portingGender", v)}
        error={errors["portingGender"]}
      />
      <MnpField
        id="portingDateOfBirth"
        label="Date of Birth *"
        value={mnpData.portingDateOfBirth ?? ""}
        onChange={v => onInputChange("portingDateOfBirth", v)}
        error={errors["portingDateOfBirth"]}
        type="date"
      />
    </div>
  );
}

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>

          <MnpPortingFields mnpData={mnpData} onInputChange={handleInputChange} errors={errors} />

          <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>
  );
}
