Assist_Design/apps/portal/src/features/subscriptions/views/SimReissue.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { PageLayout } from "@/components/templates/PageLayout";
import { SubCard } from "@/components/molecules/SubCard/SubCard";
import { DevicePhoneMobileIcon, DeviceTabletIcon, CpuChipIcon } from "@heroicons/react/24/outline";
import { simActionsService } from "@/features/subscriptions/api/sim-actions.api";
import type { SimReissueFullRequest } from "@customer-portal/domain/sim";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import type { SimDetails } from "@/features/subscriptions/components/sim/SimDetailsCard";
import { Button } from "@/components/atoms";

type SimType = "physical" | "esim";

export function SimReissueContainer() {
  const params = useParams();
  const subscriptionId = params.id as string;
  const [simType, setSimType] = useState<SimType | null>(null);
  const [newEid, setNewEid] = useState("");
  const [currentEid, setCurrentEid] = useState<string | null>(null);
  const [simDetails, setSimDetails] = useState<SimDetails | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [loadingDetails, setLoadingDetails] = useState(true);

  useEffect(() => {
    const fetchDetails = async () => {
      try {
        const info = await simActionsService.getSimInfo(subscriptionId);
        if (info?.details) {
          setSimDetails(info.details);
          setCurrentEid(info.details.eid || null);
        }
      } catch (e: unknown) {
        setError(
          process.env.NODE_ENV === "development"
            ? e instanceof Error
              ? e.message
              : "Failed to load SIM details"
            : "Unable to load SIM details right now. Please try again."
        );
      } finally {
        setLoadingDetails(false);
      }
    };
    void fetchDetails();
  }, [subscriptionId]);

  const isValidEid = () => {
    return /^\d{32}$/.test(newEid.trim());
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!simType) {
      setError("Please select a SIM type");
      return;
    }
    if (simType === "esim" && !isValidEid()) {
      setError("Please enter a valid 32-digit EID");
      return;
    }

    setLoading(true);
    setMessage(null);
    setError(null);

    try {
      const request: SimReissueFullRequest =
        simType === "esim" ? { simType, newEid: newEid.trim() } : { simType };
      await simActionsService.reissueSim(subscriptionId, request);

      if (simType === "esim") {
        setMessage(
          "eSIM reissue request submitted successfully. You will receive instructions via email to download your new eSIM profile."
        );
      } else {
        setMessage(
          "Physical SIM reissue request submitted successfully. You will be contacted shortly with shipping details (typically 3-5 business days)."
        );
      }
    } catch (e: unknown) {
      setError(
        process.env.NODE_ENV === "development"
          ? e instanceof Error
            ? e.message
            : "Failed to submit reissue request"
          : "Unable to submit your request right now. Please try again."
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <PageLayout
      icon={<DevicePhoneMobileIcon />}
      title="Reissue SIM"
      description="Request a replacement SIM card"
    >
      <div className="max-w-3xl mx-auto">
        <div className="mb-4">
          <Link
            href={`/account/subscriptions/${subscriptionId}#sim-management`}
            className="text-primary hover:underline"
          >
            ← Back to SIM Management
          </Link>
        </div>

        <SubCard>
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-foreground mb-2">Request SIM Reissue</h2>
            <p className="text-sm text-muted-foreground">
              If your SIM card is lost, damaged, or you need to switch between physical SIM and
              eSIM, you can request a replacement here.
            </p>
          </div>

          {message && (
            <div className="mb-4">
              <AlertBanner variant="success" title="Request Submitted">
                {message}
              </AlertBanner>
            </div>
          )}
          {error && (
            <div className="mb-4">
              <AlertBanner variant="error" title="Request Failed">
                {error}
              </AlertBanner>
            </div>
          )}

          {loadingDetails ? (
            <div className="animate-pulse space-y-4">
              <div className="h-32 bg-muted rounded-lg"></div>
              <div className="h-32 bg-muted rounded-lg"></div>
            </div>
          ) : (
            <form onSubmit={e => void submit(e)} className="space-y-6">
              {/* Current SIM Info */}
              {simDetails && (
                <div className="bg-muted border border-border rounded-lg p-4 mb-6">
                  <div className="text-xs text-muted-foreground font-medium uppercase mb-2">
                    Current SIM
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-muted-foreground">Number:</span>{" "}
                      <span className="font-medium">{simDetails.msisdn}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Type:</span>{" "}
                      <span className="font-medium capitalize">{simDetails.simType}</span>
                    </div>
                    {simDetails.iccid && (
                      <div className="col-span-2">
                        <span className="text-muted-foreground">ICCID:</span>{" "}
                        <span className="font-mono text-xs">{simDetails.iccid}</span>
                      </div>
                    )}
                    {currentEid && (
                      <div className="col-span-2">
                        <span className="text-muted-foreground">Current EID:</span>{" "}
                        <span className="font-mono text-xs">{currentEid}</span>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* SIM Type Selection */}
              <div className="space-y-3">
                <label className="block text-sm font-medium text-muted-foreground">
                  Select Replacement SIM Type
                </label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Physical SIM Option */}
                  <label
                    className={`relative flex flex-col items-center p-6 border-2 rounded-xl cursor-pointer transition-all ${
                      simType === "physical"
                        ? "border-primary bg-primary-soft"
                        : "border-border hover:border-border-muted bg-card"
                    }`}
                  >
                    <input
                      type="radio"
                      name="simType"
                      value="physical"
                      checked={simType === "physical"}
                      onChange={() => setSimType("physical")}
                      className="sr-only"
                    />
                    <DeviceTabletIcon className="h-12 w-12 text-muted-foreground mb-3" />
                    <div className="text-lg font-medium text-foreground">Physical SIM</div>
                    <div className="text-sm text-muted-foreground text-center mt-1">
                      A new physical SIM card will be shipped to you
                    </div>
                    {simType === "physical" && (
                      <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                    )}
                  </label>

                  {/* eSIM Option */}
                  <label
                    className={`relative flex flex-col items-center p-6 border-2 rounded-xl cursor-pointer transition-all ${
                      simType === "esim"
                        ? "border-primary bg-primary-soft"
                        : "border-border hover:border-border-muted bg-card"
                    }`}
                  >
                    <input
                      type="radio"
                      name="simType"
                      value="esim"
                      checked={simType === "esim"}
                      onChange={() => setSimType("esim")}
                      className="sr-only"
                    />
                    <CpuChipIcon className="h-12 w-12 text-muted-foreground mb-3" />
                    <div className="text-lg font-medium text-foreground">eSIM</div>
                    <div className="text-sm text-muted-foreground text-center mt-1">
                      Download your eSIM profile instantly
                    </div>
                    {simType === "esim" && (
                      <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                    )}
                  </label>
                </div>
              </div>

              {/* eSIM EID Input */}
              {simType === "esim" && (
                <div className="space-y-4 p-4 bg-info-soft border border-info/25 rounded-lg">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">
                      New EID (eSIM Identifier)
                    </label>
                    <input
                      type="text"
                      value={newEid}
                      onChange={e => setNewEid(e.target.value.replace(/\D/g, ""))}
                      placeholder="Enter your device's 32-digit EID"
                      maxLength={32}
                      className="w-full px-3 py-2 border border-input rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring font-mono bg-background text-foreground"
                    />
                    <p className="text-xs text-muted-foreground mt-1">
                      The EID is a 32-digit number unique to your device. You can find it in your
                      device settings under "About" or "SIM status".
                    </p>
                    {newEid && !isValidEid() && (
                      <p className="text-xs text-danger mt-1">
                        Please enter exactly 32 digits ({newEid.length}/32)
                      </p>
                    )}
                  </div>

                  {currentEid && (
                    <div className="text-sm text-foreground">
                      <strong>Current EID:</strong>{" "}
                      <span className="font-mono text-xs">{currentEid}</span>
                    </div>
                  )}
                </div>
              )}

              {/* Physical SIM Info */}
              {simType === "physical" && (
                <div className="p-4 bg-warning-soft border border-warning/25 rounded-lg">
                  <h3 className="text-sm font-medium text-foreground mb-2">
                    Physical SIM Information
                  </h3>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• A new physical SIM card will be shipped to your registered address</li>
                    <li>• Typical delivery time: 3-5 business days</li>
                    <li>• You will receive an email with tracking information</li>
                    <li>• The old SIM card will be deactivated once the new one is activated</li>
                  </ul>
                </div>
              )}

              {/* Submit Buttons */}
              <div className="flex gap-3">
                <Button
                  type="submit"
                  disabled={loading || !simType || (simType === "esim" && !isValidEid())}
                  loading={loading}
                  loadingText="Processing…"
                >
                  Submit Reissue Request
                </Button>
                <Button
                  as="a"
                  href={`/account/subscriptions/${subscriptionId}#sim-management`}
                  variant="outline"
                >
                  Cancel
                </Button>
              </div>
            </form>
          )}
        </SubCard>
      </div>
    </PageLayout>
  );
}

export default SimReissueContainer;