"use client";

import { useEffect, useState, type ReactNode } from "react";
import { CloseIconButton } from "@/components/close-icon-button";

type ChargeDetailsBadge = {
  className: string;
  label: string;
};

type ChargeDetailsNote = {
  label: string;
  text: string;
  tone?: "default" | "danger";
};

type ChargeDetailsRow = {
  label: string;
  value: string;
};

type KavenixChargeDetailsDialogProps = {
  action?: ReactNode;
  actionHint?: string | null;
  badges: ChargeDetailsBadge[];
  notes?: ChargeDetailsNote[];
  paymentRows: ChargeDetailsRow[];
  refundRows: ChargeDetailsRow[];
  subtitle: string;
  summaryRows: ChargeDetailsRow[];
  title: string;
  withdrawalRows?: ChargeDetailsRow[];
};

function DetailsSection({ rows, title }: { rows: ChargeDetailsRow[]; title: string }) {
  if (rows.length === 0) {
    return null;
  }

  return (
    <section className="border-t border-[#edf2fb] py-4 first:border-t-0 first:pt-0 last:pb-0">
      <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#7a8ba7]">
        {title}
      </p>
      <div className="mt-3 grid gap-3 sm:grid-cols-2">
        {rows.map((row) => (
          <div key={`${title}-${row.label}`} className="min-w-0">
            <p className="text-[12px] text-[#7c8baa]">{row.label}</p>
            <p className="mt-1 break-all text-[14px] font-medium text-[#223351]">{row.value}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

export function KavenixChargeDetailsDialog({
  action,
  actionHint,
  badges,
  notes = [],
  paymentRows,
  refundRows,
  subtitle,
  summaryRows,
  title,
  withdrawalRows = [],
}: KavenixChargeDetailsDialogProps) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) {
      return undefined;
    }

    const previousOverflow = document.body.style.overflow;

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", handleKeyDown);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [open]);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex h-10 items-center gap-2 rounded-[12px] border border-[#d8e3f6] bg-white px-4 text-[13px] font-semibold text-[#465977] transition-all duration-200 hover:border-[#c7d8fb] hover:bg-[#f7faff] hover:text-[#2f6df6]"
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-4 w-4"
        >
          <path d="M12 5.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Z" />
          <path d="M9.8 9.6a2.5 2.5 0 1 1 3.6 2.2c-.9.5-1.4 1-1.4 2" />
          <path d="M12 16.6h.01" />
        </svg>
        <span>상세 보기</span>
      </button>

      {open ? (
        <div
          className="fixed inset-0 z-[180] flex items-center justify-center bg-[rgba(12,18,31,0.44)] px-4 py-8"
          onClick={() => setOpen(false)}
        >
          <div
            role="dialog"
            aria-modal="true"
            className="w-full max-w-[640px] max-h-[calc(100vh-4rem)] overflow-y-auto rounded-[24px] border border-[#dfe8f7] bg-white p-6 shadow-[0_28px_80px_rgba(15,23,42,0.22)]"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0">
                <p className="break-all text-[24px] font-semibold tracking-[-0.04em] text-[#16233c]">
                  {title}
                </p>
                <p className="mt-2 break-all text-[14px] leading-7 text-[#6a7b98]">{subtitle}</p>
                {badges.length > 0 ? (
                  <div className="mt-4 flex flex-wrap gap-2">
                    {badges.map((badge) => (
                      <span
                        key={`${badge.label}-${badge.className}`}
                        className={`om-badge om-badge-sm ${badge.className}`}
                      >
                        {badge.label}
                      </span>
                    ))}
                  </div>
                ) : null}
              </div>
              <CloseIconButton
                ariaLabel="결제 상세 닫기"
                onClick={() => setOpen(false)}
              />
            </div>

            <div className="mt-6 space-y-4">
              <DetailsSection title="요약" rows={summaryRows} />
              <DetailsSection title="결제" rows={paymentRows} />
              <DetailsSection title="환불" rows={refundRows} />
              <DetailsSection title="청약철회" rows={withdrawalRows} />
            </div>

            {notes.length > 0 ? (
              <div className="mt-6 border-t border-[#edf2fb] pt-4">
                <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[#7a8ba7]">
                  메모
                </p>
                <div className="mt-3 space-y-3">
                  {notes.map((note) => (
                    <div
                      key={`${note.label}-${note.text}`}
                      className={`rounded-[16px] border px-4 py-3 ${
                        note.tone === "danger"
                          ? "border-[#f4d8df] bg-[#fff5f7] text-[#a34861]"
                          : "border-[#e6edf8] bg-[#fbfcff] text-[#4d6186]"
                      }`}
                    >
                      <p className="text-[12px] font-semibold uppercase tracking-[0.08em]">
                        {note.label}
                      </p>
                      <p className="mt-2 whitespace-pre-wrap break-all text-[13px] leading-6">
                        {note.text}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}

            {action || actionHint ? (
              <div className="mt-6 border-t border-[#edf2fb] pt-5">
                {action ? <div className="flex flex-col gap-3">{action}</div> : null}
                {actionHint ? (
                  <p className="mt-3 text-[12px] leading-6 text-[#70819d]">{actionHint}</p>
                ) : null}
              </div>
            ) : null}
          </div>
        </div>
      ) : null}
    </>
  );
}