"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/admin/Toast";
import { apiPost } from "@/lib/client-api";
import type { PublicPlan } from "@/modules/pricing/pricing.service";

export function ChangePlanControl({
  userId,
  currentPlanSlug,
  plans,
}: {
  userId: string;
  currentPlanSlug: string | null;
  plans: PublicPlan[];
}) {
  const router = useRouter();
  const [planSlug, setPlanSlug] = useState(currentPlanSlug ?? plans[0]?.slug ?? "");
  const [pending, setPending] = useState(false);

  const submit = async () => {
    const plan = plans.find((p) => p.slug === planSlug);
    if (!plan) return;
    try {
      setPending(true);
      await apiPost(`/api/admin/users/${userId}/plan`, {
        planSlug: plan.slug,
        planName: plan.name,
      });
      toast(`Plan changed to ${plan.name}.`, "success");
      router.refresh();
    } catch (err) {
      toast(err instanceof Error ? err.message : "Failed to change plan.", "error");
    } finally {
      setPending(false);
    }
  };

  if (plans.length === 0) {
    return (
      <p className="mt-3 text-xs text-muted">
        No active plans configured yet. Visit Pricing CMS to add plans.
      </p>
    );
  }

  return (
    <div className="mt-4 flex items-end gap-2">
      <div className="flex-1">
        <label className="mb-1 block text-xs font-medium text-muted">
          Change plan
        </label>
        <select
          value={planSlug}
          onChange={(e) => setPlanSlug(e.target.value)}
          className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm focus:border-primary focus:outline-none"
        >
          {plans.map((p) => (
            <option key={p.id} value={p.slug}>
              {p.name}
            </option>
          ))}
        </select>
      </div>
      <Button size="sm" onClick={submit} isLoading={pending}>
        Apply
      </Button>
    </div>
  );
}