"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

type TossPaymentSuccessPanelProps = {
  amount: number | null;
  orderId: string;
  paymentKey: string;
  simulated: boolean;
};

type TossConfirmResponse = {
  ok: true;
  payment: {
    amount: number;
    approvedAt: string;
    method: string;
    orderId: string;
    orderName: string;
    paymentKey: string;
    provider: null | string;
    simulated: boolean;
    status: string;
  };
};

type TossConfirmErrorResponse = {
  error?: string;
  message?: string;
};

function formatCurrency(value: number) {
  return `${value.toLocaleString("ko-KR")}원`;
}

function formatDateLabel(value: string) {
  const date = new Date(value);
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(
    date.getDate(),
  ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
    date.getMinutes(),
  ).padStart(2, "0")}`;
}

export function TossPaymentSuccessPanel({
  amount,
  orderId,
  paymentKey,
  simulated,
}: TossPaymentSuccessPanelProps) {
  const hasInvalidPaymentParams =
    !paymentKey || !orderId || amount === null || !Number.isFinite(amount);
  const [state, setState] = useState<
    | { status: "loading" }
    | {
        payment: TossConfirmResponse["payment"];
        status: "success";
      }
    | { message: string; status: "error" }
  >({ status: "loading" });
  const displayState = hasInvalidPaymentParams
    ? {
        message: "결제 정보를 확인할 수 없어 승인 확인을 진행할 수 없습니다.",
        status: "error" as const,
      }
    : state;

  useEffect(() => {
    if (hasInvalidPaymentParams) {
      return;
    }

    const controller = new AbortController();

    void (async () => {
      try {
        const response = await fetch("/api/payments/toss/confirm", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            amount,
            orderId,
            paymentKey,
            simulate: simulated,
          }),
          signal: controller.signal,
        });
        const payload = (await response.json()) as TossConfirmResponse | TossConfirmErrorResponse;

        if (!response.ok || !("ok" in payload) || payload.ok !== true) {
          const errorPayload = payload as TossConfirmErrorResponse;
          throw new Error(errorPayload.message ?? errorPayload.error ?? "승인 확인에 실패했습니다.");
        }

        setState({
          payment: payload.payment,
          status: "success",
        });
      } catch (error) {
        if (controller.signal.aborted) {
          return;
        }

        setState({
          message:
            error instanceof Error ? error.message : "승인 결과를 가져오는 중 오류가 발생했습니다.",
          status: "error",
        });
      }
    })();

    return () => {
      controller.abort();
    };
  }, [amount, hasInvalidPaymentParams, orderId, paymentKey, simulated]);

  return (
    <main className="min-h-screen bg-[#f7f9fe] px-5 py-10 sm:px-8 sm:py-14">
      <div className="mx-auto w-full max-w-[760px]">
        <div className="rounded-[30px] border border-[#e3eaf7] bg-white px-6 py-7 shadow-[0_24px_60px_rgba(23,43,88,0.08)] sm:px-8 sm:py-8">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p className="text-[13px] font-semibold uppercase tracking-[0.18em] text-[#2f6df6]">
                OFFICIAL MAIL
              </p>
              <h1 className="mt-3 text-[28px] font-semibold tracking-[-0.05em] text-[#16233c] sm:text-[34px]">
                결제가 완료되었습니다
              </h1>
            </div>
            <span className="om-badge om-badge-lg om-badge-success">
              결제 완료
            </span>
          </div>

          {displayState.status === "loading" ? (
            <div className="mt-8 rounded-[24px] border border-[#e7edf9] bg-[#fbfcff] px-5 py-8">
              <p className="text-[18px] font-semibold text-[#16233c]">결제 정보를 확인하고 있습니다.</p>
              <p className="mt-3 text-[14px] leading-7 text-[#6a7b98]">
                잠시만 기다려 주세요. 승인 결과가 반영되면 자동으로 상태를 보여드립니다.
              </p>
            </div>
          ) : null}

          {displayState.status === "success" ? (
            <div className="mt-8 space-y-4">
              <div className="rounded-[24px] border border-emerald-200 bg-emerald-50 px-5 py-5">
                <p className="text-[18px] font-semibold text-emerald-700">결제가 정상적으로 확인되었습니다.</p>
                <p className="mt-2 text-[14px] leading-7 text-emerald-800/90">
                  등록된 결제 정보는 결제 및 구독 화면에서 바로 확인할 수 있습니다.
                </p>
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="rounded-[20px] border border-[#ebf0fa] bg-[#fbfcff] px-5 py-5">
                  <p className="text-[12px] font-semibold text-[#6f819f]">주문명</p>
                  <p className="mt-2 text-[18px] font-semibold text-[#16233c]">{displayState.payment.orderName}</p>
                </div>
                <div className="rounded-[20px] border border-[#ebf0fa] bg-[#fbfcff] px-5 py-5">
                  <p className="text-[12px] font-semibold text-[#6f819f]">승인 금액</p>
                  <p className="mt-2 text-[18px] font-semibold text-[#16233c]">
                    {formatCurrency(displayState.payment.amount)}
                  </p>
                </div>
                <div className="rounded-[20px] border border-[#ebf0fa] bg-[#fbfcff] px-5 py-5">
                  <p className="text-[12px] font-semibold text-[#6f819f]">승인 시각</p>
                  <p className="mt-2 text-[18px] font-semibold text-[#16233c]">
                    {formatDateLabel(displayState.payment.approvedAt)}
                  </p>
                </div>
                <div className="rounded-[20px] border border-[#ebf0fa] bg-[#fbfcff] px-5 py-5">
                  <p className="text-[12px] font-semibold text-[#6f819f]">결제 수단</p>
                  <p className="mt-2 text-[18px] font-semibold text-[#16233c]">
                    {displayState.payment.provider
                      ? `${displayState.payment.method} / ${displayState.payment.provider}`
                      : displayState.payment.method}
                  </p>
                </div>
              </div>

            </div>
          ) : null}

          {displayState.status === "error" ? (
            <div className="mt-8 rounded-[24px] border border-rose-200 bg-rose-50 px-5 py-5">
              <p className="text-[18px] font-semibold text-rose-600">승인 확인에 실패했습니다.</p>
              <p className="mt-3 text-[14px] leading-7 text-rose-700/90">{displayState.message}</p>
            </div>
          ) : null}

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/mail?panel=setup&section=billing"
              prefetch={false}
              className="om-btn-primary h-11 rounded-[14px] px-5 text-[13px]"
            >
              결제 및 구독으로 돌아가기
            </Link>
            <Link
              href="/mail?folder=all"
              prefetch={false}
              className="om-btn-secondary h-11 rounded-[14px] px-5 text-[13px]"
            >
              메일함 보기
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}