"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useMemo } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { subscriptionDict } from "@/features/subscription/dict";
import { fetchPayment } from "@/features/subscription/api";
import type { PaymentResultStatus } from "@/features/subscription/types";
import { profileQueryKeys } from "@/features/profile/hooks/use-profile";
import { panelDict } from "@/features/panel/dict";

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

  return (
    <header className="flex items-center justify-between px-1">
      <button
        type="button"
        onClick={() => router.push("/panel/subscription")}
        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.paymentResult.title}
      </h1>

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

function resolveStatus(value: string | null): PaymentResultStatus | null {
  if (value === "success" || value === "failed" || value === "cancelled") {
    return value;
  }

  return null;
}

const resultToneStyles = {
  success: {
    container:
      "border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/50",
    title: "text-emerald-950 dark:text-emerald-50",
    description: "text-emerald-900 dark:text-emerald-100",
    refId: "text-emerald-950 dark:text-emerald-50",
  },
  warning: {
    container:
      "border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50",
    title: "text-amber-950 dark:text-amber-50",
    description: "text-amber-900 dark:text-amber-100",
    refId: "text-amber-950 dark:text-amber-50",
  },
  danger: {
    container:
      "border-destructive/30 bg-destructive/10 dark:border-destructive/40 dark:bg-destructive/15",
    title: "text-destructive dark:text-red-100",
    description: "text-destructive/90 dark:text-red-200",
    refId: "text-destructive dark:text-red-100",
  },
} as const;

export function PaymentResultContent() {
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const status = resolveStatus(searchParams.get("status"));
  const paymentId = searchParams.get("paymentId");
  const refIdFromQuery = searchParams.get("refId");

  const content = useMemo(() => {
    if (status === "success") {
      return {
        title: subscriptionDict.paymentResult.successTitle,
        description: subscriptionDict.paymentResult.successDescription,
        tone: "success" as const,
      };
    }

    if (status === "cancelled") {
      return {
        title: subscriptionDict.paymentResult.cancelledTitle,
        description: subscriptionDict.paymentResult.cancelledDescription,
        tone: "warning" as const,
      };
    }

    return {
      title: subscriptionDict.paymentResult.failedTitle,
      description: subscriptionDict.paymentResult.failedDescription,
      tone: "danger" as const,
    };
  }, [status]);

  useEffect(() => {
    if (status !== "success") {
      return;
    }

    void queryClient.invalidateQueries({ queryKey: profileQueryKeys.profile });

    if (paymentId) {
      void fetchPayment(paymentId).catch(() => undefined);
    }
  }, [paymentId, queryClient, status]);

  if (!status) {
    return (
      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 px-4 py-4 sm:px-6 sm:py-6">
        <PaymentResultHeader />
        <p className="px-1 text-sm text-muted-foreground">
          {subscriptionDict.paymentResult.loading}
        </p>
      </div>
    );
  }

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

      <div
        className={`rounded-3xl border p-6 shadow-soft-sm ${resultToneStyles[content.tone].container}`}
      >
        <h2
          className={`text-lg font-bold ${resultToneStyles[content.tone].title}`}
        >
          {content.title}
        </h2>
        <p
          className={`mt-2 text-sm leading-7 ${resultToneStyles[content.tone].description}`}
        >
          {content.description}
        </p>
        {refIdFromQuery ? (
          <p
            className={`mt-3 text-sm font-medium ${resultToneStyles[content.tone].refId}`}
          >
            {subscriptionDict.paymentResult.refId.replace("{refId}", refIdFromQuery)}
          </p>
        ) : null}
      </div>

      <div className="flex flex-col gap-3">
        <Link
          href="/panel/subscription"
          className="inline-flex h-12 items-center justify-center rounded-2xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-soft-sm transition-all hover:brightness-105"
        >
          {subscriptionDict.paymentResult.backToSubscription}
        </Link>
        <Link
          href="/panel"
          className="inline-flex h-12 items-center justify-center rounded-2xl border border-border bg-card px-6 text-sm font-semibold text-foreground shadow-soft-sm transition-colors hover:bg-muted"
        >
          {subscriptionDict.paymentResult.backToPanel}
        </Link>
      </div>
    </div>
  );
}