"use client";

import { useSyncExternalStore } from "react";
import { createPortal } from "react-dom";

export type BottomToastNotice = {
  tone: "error" | "success" | "warning";
  message: string;
};

function CloseToastIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-[16px] w-[16px]"
    >
      <path d="m7 7 10 10" />
      <path d="m17 7-10 10" />
    </svg>
  );
}

function subscribeToClientState() {
  return () => undefined;
}

export function BottomToast({
  actionLabel,
  actionPending = false,
  className,
  notice,
  onAction,
  onClose
}: {
  actionLabel?: string;
  actionPending?: boolean;
  className?: string;
  notice: BottomToastNotice;
  onAction?: () => void;
  onClose: () => void;
}) {
  const isError = notice.tone === "error";
  const isWarning = notice.tone === "warning";
  const isClient = useSyncExternalStore(
    subscribeToClientState,
    () => true,
    () => false
  );

  if (!isClient) {
    return null;
  }

  return createPortal(
    <div
      className={`pointer-events-none fixed bottom-4 left-1/2 w-full max-w-[592px] -translate-x-1/2 px-4 sm:bottom-6 ${
        className || "z-[90]"
      }`}
      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
    >
      <div
        role={isError ? "alert" : "status"}
        aria-live={isError ? "assertive" : "polite"}
        className={`pointer-events-auto flex w-full max-w-[560px] items-center gap-3 rounded-[22px] px-4 py-3.5 text-white shadow-[0_20px_48px_rgba(3,7,18,0.34)] ring-1 backdrop-blur-[20px] backdrop-saturate-150 toast-rise ${
          isError
            ? "bg-[rgba(28,17,21,0.92)] ring-[rgba(251,113,133,0.18)]"
            : isWarning
              ? "bg-[rgba(91,62,12,0.94)] ring-[rgba(251,191,36,0.34)]"
              : "bg-[rgba(14,18,26,0.86)] ring-white/10"
        }`}
      >
        <p className="min-w-0 flex-1 text-[14px] font-medium leading-6 tracking-[-0.01em] text-white/96">
          {notice.message}
        </p>
        {actionLabel && onAction ? (
          <button
            type="button"
            disabled={actionPending}
            onClick={onAction}
            className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-1 text-[14px] font-semibold text-[#71a0ff] transition-colors hover:text-[#a9c4ff] disabled:cursor-wait disabled:text-white/45"
          >
            {actionPending ? "처리 중..." : actionLabel}
          </button>
        ) : (
          <button
            type="button"
            aria-label="알림 닫기"
            onClick={onClose}
            className="inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/52 transition-colors duration-150 hover:bg-white/8 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/28"
          >
            <CloseToastIcon />
          </button>
        )}
      </div>
    </div>,
    document.body
  );
}