"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { subscriptionDict } from "@/features/subscription/dict";
import { SubscriptionPlanCard } from "@/features/subscription/components/subscription-plan-card";
import {
  useSubscribeMutation,
  useSubscriptionPlans,
} from "@/features/subscription/hooks/use-subscription";
import { useProfile } from "@/features/profile/hooks/use-profile";
import { getSubscriptionVisual } from "@/features/profile/utils/subscription-theme";
import { panelDict } from "@/features/panel/dict";
import { formatTokenCount } from "@/features/subscription/utils/format";

function SubscriptionHeader() {
  const router = useRouter();

  return (
    <header className="flex items-center justify-between px-1">
      <button
        type="button"
        onClick={() => router.push("/panel/profile")}
        aria-label={subscriptionDict.back}
        className="inline-flex size-11 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-soft-sm transition-transform hover:scale-105"
      >
        <svg
          aria-hidden="true"
          className="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path d="M9 6l6 6-6 6" />
        </svg>
      </button>

      <h1 className="text-xl font-bold text-[#1D2D50] dark:text-foreground sm:text-2xl">
        {subscriptionDict.title}
      </h1>

      <div className="size-11" />
    </header>
  );
}

export function SubscriptionPageContent() {
  const { data: profile } = useProfile();
  const { data: plans, isLoading, isError } = useSubscriptionPlans();
  const subscribeMutation = useSubscribeMutation();
  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);

  const currentVisual = profile
    ? getSubscriptionVisual(profile.subscription)
    : null;

  const handleSelectPlan = async (planId: string) => {
    setSelectedPlanId(planId);

    try {
      const returnUrl =
        typeof window !== "undefined"
          ? `${window.location.origin}/panel/payment/result`
          : undefined;
      const result = await subscribeMutation.mutateAsync({
        planOfferId: planId,
        returnUrl,
      });

      if (result.redirectUrl) {
        window.location.href = result.redirectUrl;
      }
    } catch {
      setSelectedPlanId(null);
    }
  };

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-6 sm:py-6">
      <SubscriptionHeader />

      <div className="rounded-3xl bg-card p-5 shadow-soft-sm sm:p-6">
        <p className="text-sm text-muted-foreground">{subscriptionDict.subtitle}</p>

        {currentVisual ? (
          <div className="mt-4 rounded-2xl bg-muted/50 px-4 py-3 text-sm">
            <p className="font-semibold text-foreground">
              {subscriptionDict.currentPlan}: {currentVisual.tooltip}
            </p>
            {profile?.subscription.aiTokenBalance ? (
              <p className="mt-1 text-muted-foreground">
                {subscriptionDict.aiTokens.replace(
                  "{count}",
                  formatTokenCount(profile.subscription.aiTokenBalance),
                )}
              </p>
            ) : null}
          </div>
        ) : null}
      </div>

      {isLoading ? (
        <p className="px-1 text-sm text-muted-foreground">{panelDict.loading}</p>
      ) : null}

      {isError ? (
        <p className="px-1 text-sm text-destructive">{subscriptionDict.loadError}</p>
      ) : null}

      {plans?.length ? (
        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {plans.map((plan) => (
            <SubscriptionPlanCard
              key={plan.id}
              plan={plan}
              isLoading={
                subscribeMutation.isPending && selectedPlanId === plan.id
              }
              onSelect={handleSelectPlan}
            />
          ))}
        </div>
      ) : null}

      <div className="rounded-3xl border border-border bg-card p-5 shadow-soft-sm">
        <h2 className="text-base font-bold text-foreground">
          {subscriptionDict.freeTierTitle}
        </h2>
        <p className="mt-2 text-sm text-muted-foreground">
          {subscriptionDict.freeTierDescription}
        </p>
        <Link
          href="/panel"
          className="mt-4 inline-flex text-sm font-semibold text-primary"
        >
          {subscriptionDict.paymentResult.backToPanel}
        </Link>
      </div>
    </div>
  );
}