"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, CheckCircleIcon } from "@heroicons/react/24/outline";
import { simActionsService, type AvailablePlan } from "@/features/subscriptions/services/sim-actions.service";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { Formatting } from "@customer-portal/domain/toolkit";

const { formatCurrency } = Formatting;

export function SimChangePlanContainer() {
  const params = useParams();
  const subscriptionId = params.id as string;
  const [plans, setPlans] = useState<AvailablePlan[]>([]);
  const [selectedPlan, setSelectedPlan] = useState<AvailablePlan | null>(null);
  const [assignGlobalIp, setAssignGlobalIp] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [loadingPlans, setLoadingPlans] = useState(true);

  useEffect(() => {
    const fetchPlans = async () => {
      try {
        const availablePlans = await simActionsService.getAvailablePlans(subscriptionId);
        setPlans(availablePlans);
      } catch (e: unknown) {
        setError(e instanceof Error ? e.message : "Failed to load available plans");
      } finally {
        setLoadingPlans(false);
      }
    };
    void fetchPlans();
  }, [subscriptionId]);

  const currentPlan = plans.find(p => p.isCurrentPlan);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedPlan) {
      setError("Please select a new plan");
      return;
    }
    setLoading(true);
    setMessage(null);
    setError(null);
    try {
      const result = await simActionsService.changePlanFull(subscriptionId, {
        newPlanCode: selectedPlan.freebitPlanCode,
        newPlanSku: selectedPlan.sku,
        newPlanName: selectedPlan.name,
        assignGlobalIp,
      });
      setMessage(`Plan change scheduled for ${result.scheduledAt || "the 1st of next month"}`);
      setSelectedPlan(null);
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Failed to change plan");
    } finally {
      setLoading(false);
    }
  };

  return (
    <PageLayout
      icon={<DevicePhoneMobileIcon />}
      title="Change Plan"
      description="Switch to a different data plan"
    >
      <div className="max-w-4xl mx-auto">
        <div className="mb-4">
          <Link
            href={`/subscriptions/${subscriptionId}#sim-management`}
            className="text-blue-600 hover:text-blue-700"
          >
            ← Back to SIM Management
          </Link>
        </div>

        <SubCard>
          <div className="mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Change Your Plan</h2>
            <p className="text-sm text-gray-600">
              Select a new plan below. Plan changes will take effect on the 1st of the following month.
              Changes must be requested before the 25th of the current month.
            </p>
          </div>

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

          {loadingPlans ? (
            <div className="animate-pulse space-y-4">
              {[1, 2, 3, 4].map(i => (
                <div key={i} className="h-24 bg-gray-100 rounded-lg"></div>
              ))}
            </div>
          ) : (
            <form onSubmit={e => void submit(e)} className="space-y-6">
              {/* Current Plan */}
              {currentPlan && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-xs text-blue-600 font-medium uppercase">Current Plan</div>
                      <div className="text-lg font-semibold text-blue-900">{currentPlan.name}</div>
                      <div className="text-sm text-blue-700">{currentPlan.simDataSize}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-xl font-bold text-blue-900">
                        {currentPlan.monthlyPrice ? formatCurrency(currentPlan.monthlyPrice) : "—"}
                      </div>
                      <div className="text-xs text-blue-600">/month</div>
                    </div>
                  </div>
                </div>
              )}

              {/* Available Plans */}
              <div className="space-y-3">
                <label className="block text-sm font-medium text-gray-700">Select a New Plan</label>
                <div className="grid gap-3">
                  {plans
                    .filter(p => !p.isCurrentPlan)
                    .map(plan => (
                      <label
                        key={plan.id}
                        className={`relative flex items-center justify-between p-4 border-2 rounded-lg cursor-pointer transition-all ${
                          selectedPlan?.id === plan.id
                            ? "border-blue-500 bg-blue-50"
                            : "border-gray-200 hover:border-gray-300 bg-white"
                        }`}
                      >
                        <div className="flex items-center">
                          <input
                            type="radio"
                            name="plan"
                            value={plan.id}
                            checked={selectedPlan?.id === plan.id}
                            onChange={() => setSelectedPlan(plan)}
                            className="sr-only"
                          />
                          <div
                            className={`w-5 h-5 rounded-full border-2 mr-4 flex items-center justify-center ${
                              selectedPlan?.id === plan.id ? "border-blue-500" : "border-gray-300"
                            }`}
                          >
                            {selectedPlan?.id === plan.id && (
                              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                            )}
                          </div>
                          <div>
                            <div className="font-medium text-gray-900">{plan.name}</div>
                            <div className="text-sm text-gray-500">{plan.simDataSize} • {plan.simPlanType}</div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-semibold text-gray-900">
                            {plan.monthlyPrice ? formatCurrency(plan.monthlyPrice) : "—"}
                          </div>
                          <div className="text-xs text-gray-500">/month</div>
                        </div>
                        {selectedPlan?.id === plan.id && (
                          <CheckCircleIcon className="absolute top-2 right-2 h-5 w-5 text-blue-500" />
                        )}
                      </label>
                    ))}
                </div>
              </div>

              {/* Global IP Option */}
              <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                <input
                  id="globalip"
                  type="checkbox"
                  checked={assignGlobalIp}
                  onChange={e => setAssignGlobalIp(e.target.checked)}
                  className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                />
                <label htmlFor="globalip" className="ml-3 text-sm text-gray-700">
                  Assign a global IP address (additional charges may apply)
                </label>
              </div>

              {/* Info Box */}
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <h3 className="text-sm font-medium text-yellow-900 mb-1">Important Notes</h3>
                <ul className="text-sm text-yellow-800 space-y-1">
                  <li>• Plan changes take effect on the 1st of the following month</li>
                  <li>• Requests must be made before the 25th of the current month</li>
                  <li>• Your current data balance will be reset when the new plan activates</li>
                </ul>
              </div>

              {/* Submit */}
              <div className="flex gap-3">
                <button
                  type="submit"
                  disabled={loading || !selectedPlan}
                  className="px-6 py-2 rounded-md bg-blue-600 text-white font-medium text-sm disabled:opacity-50 hover:bg-blue-700 transition-colors"
                >
                  {loading ? "Processing…" : "Confirm Plan Change"}
                </button>
                <Link
                  href={`/subscriptions/${subscriptionId}#sim-management`}
                  className="px-6 py-2 rounded-md border border-gray-300 text-sm text-gray-700 bg-white hover:bg-gray-50 transition-colors"
                >
                  Cancel
                </Link>
              </div>
            </form>
          )}
        </SubCard>
      </div>
    </PageLayout>
  );
}

export default SimChangePlanContainer;
