Assist_Design/apps/portal/src/features/sim-management/components/ChangePlanModal.tsx

"use client";

import React, { useState } from "react";
import { authenticatedApi } from "@/lib/api";
import { XMarkIcon } from "@heroicons/react/24/outline";

interface ChangePlanModalProps {
  subscriptionId: number;
  currentPlanCode?: string;
  onClose: () => void;
  onSuccess: () => void;
  onError: (message: string) => void;
}

export function ChangePlanModal({ subscriptionId, currentPlanCode, onClose, onSuccess, onError }: ChangePlanModalProps) {
  const PLAN_CODES = ["PASI_5G", "PASI_10G", "PASI_25G", "PASI_50G"] as const;
  type PlanCode = typeof PLAN_CODES[number];
  const PLAN_LABELS: Record<PlanCode, string> = {
    PASI_5G: "5GB",
    PASI_10G: "10GB",
    PASI_25G: "25GB",
    PASI_50G: "50GB",
  };

  const allowedPlans = (PLAN_CODES as readonly PlanCode[]).filter(code => code !== (currentPlanCode || ''));

  const [newPlanCode, setNewPlanCode] = useState<"" | PlanCode>("");
  const [loading, setLoading] = useState(false);

  const submit = async () => {
    if (!newPlanCode) {
      onError("Please select a new plan");
      return;
    }
    setLoading(true);
    try {
      await authenticatedApi.post(`/subscriptions/${subscriptionId}/sim/change-plan`, {
        newPlanCode: newPlanCode,
      });
      onSuccess();
    } catch (e: any) {
      onError(e instanceof Error ? e.message : "Failed to change plan");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="sm:flex sm:items-start">
              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg leading-6 font-medium text-gray-900">Change SIM Plan</h3>
                  <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
                    <XMarkIcon className="h-5 w-5" />
                  </button>
                </div>
                <div className="mt-4 space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Select New Plan</label>
                    <select
                      value={newPlanCode}
                      onChange={(e) => setNewPlanCode(e.target.value as PlanCode)}
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                    >
                      <option value="">Choose a plan</option>
                      {allowedPlans.map(code => (
                        <option key={code} value={code}>{PLAN_LABELS[code]}</option>
                      ))}
                    </select>
                    <p className="mt-1 text-xs text-gray-500">Only plans different from your current plan are listed. The change will be scheduled for the 1st of the next month.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              onClick={submit}
              disabled={loading}
              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
            >
              {loading ? "Processing..." : "Change Plan"}
            </button>
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
              className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              Back
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}