"use client";

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

export type AddrItem = {
  zipNo: string;       // 우편번호
  roadAddr: string;    // 도로명주소(전체 문장)
  jibunAddr: string;   // 지번주소
};

type Props = {
  open: boolean;
  onClose: () => void;
  onSelect: (item: AddrItem) => void;
};

type PostcodeApiResponse = {
  totalCount?: number;
  items?: AddrItem[];
};

function useDebouncedValue<T>(value: T, delay = 250) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return v;
}

// A: 추천은 roadAddr 전체 문장
const normalize = (s: string) => s.replace(/\s+/g, " ").trim();

const makeSuggestionsA = (list: AddrItem[], keyword: string, limit = 7) => {
  const key = normalize(keyword);

  const roadAddrs = list
    .map((x) => x.roadAddr)
    .filter((v): v is string => typeof v === "string" && v.trim().length > 0)
    .map(normalize);

  const uniq = Array.from(new Set(roadAddrs));

  // 입력어 포함 우선 + 짧은 주소 우선
  uniq.sort((a, b) => {
    const ai = a.includes(key) ? 0 : 1;
    const bi = b.includes(key) ? 0 : 1;
    if (ai !== bi) return ai - bi;
    return a.length - b.length;
  });

  return uniq.slice(0, limit);
};

export default function PostcodeModal({ open, onClose, onSelect }: Props) {
  const [mounted, setMounted] = useState(false);

  const [q, setQ] = useState("");
  const dq = useDebouncedValue(q, 250);

  const [suggestions, setSuggestions] = useState<string[]>([]);
  const [items, setItems] = useState<AddrItem[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);

  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => setMounted(true), []);

  // open 시: body scroll lock + focus + ESC
  useEffect(() => {
    if (!open) return;

    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    setTimeout(() => inputRef.current?.focus(), 50);

    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKeyDown);

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

  // 검색/추천/리스트 갱신
  useEffect(() => {
    if (!open) return;

    const keyword = dq.trim();

    if (!keyword) {
      setSuggestions([]);
      setItems([]);
      setTotal(0);
      setLoading(false);
      return;
    }

    let alive = true;

    (async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/postcode?query=${encodeURIComponent(keyword)}&page=1`, {
          cache: "no-store",
        });

        const data = (await res.json()) as PostcodeApiResponse;

        if (!alive) return;

        const list: AddrItem[] = data.items ?? [];
        const totalCount: number = data.totalCount ?? 0;

        setItems(list);
        setTotal(totalCount);

        // ✅ A: roadAddr 전체 문장 추천
        const sug = makeSuggestionsA(list, keyword, 7);
        setSuggestions(sug);
      } catch {
        if (!alive) return;
        setItems([]);
        setTotal(0);
        setSuggestions([]);
      } finally {
        if (alive) setLoading(false);
      }
    })();

    return () => {
      alive = false;
    };
  }, [dq, open]);

  const showSuggest = open && q.trim().length > 0 && suggestions.length > 0;

  if (!mounted || !open) return null;

  return createPortal(
    <div className="fixed inset-0 z-[9999]">
      {/* overlay */}
      <button
        type="button"
        className="absolute inset-0 bg-black/40"
        aria-label="닫기"
        onClick={onClose}
      />

      {/* panel wrapper */}
      <div className="absolute inset-0 flex items-center justify-center p-6">
        <div
          className="relative w-full max-w-[520px] rounded-2xl bg-white shadow-[0_20px_60px_rgba(0,0,0,0.18)]"
          role="dialog"
          aria-modal="true"
          aria-label="우편번호 검색"
        >
          {/* header */}
          <div className="flex items-center justify-between px-7 pt-6 pb-4">
            <h2 className="text-[22px] font-extrabold tracking-tight text-slate-900">
              우편번호 검색
            </h2>

            <button
              type="button"
              onClick={onClose}
              className="grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100"
              aria-label="닫기"
            >
              <span className="text-[18px] leading-none">✕</span>
            </button>
          </div>

          {/* search input */}
          <div className="px-7 pb-4">
            <div className="relative">
              <input
                ref={inputRef}
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="주소검색"
                className={[
                  "w-full rounded-md border px-4 py-3 pr-12 text-[14px] outline-none",
                  "border-slate-300 focus:border-sky-500 focus:ring-2 focus:ring-sky-200",
                ].join(" ")}
              />

              <button
                type="button"
                className="absolute right-3 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100 text-[#01ACE5]"
                aria-label="검색"
                onClick={() => setQ((v) => v.trim())}
                >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path
                    d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
                    stroke="currentColor"
                    strokeWidth="2"
                    />
                    <path
                    d="M21 21l-4.3-4.3"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    />
                </svg>
              </button>

              {/* suggestions dropdown */}
              {showSuggest && (
                <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-10 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg">
                  {suggestions.map((s) => (
                    <button
                      key={s}
                      type="button"
                      className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
                      onClick={() => {
                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
                        setQ(s);
                        setSuggestions([]);
                        requestAnimationFrame(() => inputRef.current?.focus());
                      }}
                    >
                      <span className="truncate text-slate-800">{s}</span>
                      <span className="ml-4 text-slate-400">↵</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* results */}
          <div className="px-7 pb-7">
            <div className="mb-3 text-[13px] text-slate-500">
              {q.trim()
                ? loading
                  ? "검색 중…"
                  : `총 ${total.toLocaleString()}개의 검색결과`
                : "주소를 입력하면 검색결과가 표시됩니다."}
            </div>

            <div className="max-h-[420px] overflow-y-auto pr-1">
              {!loading && q.trim() && items.length === 0 && (
                <div className="rounded-lg border border-slate-200 p-4 text-[14px] text-slate-600">
                  검색 결과가 없습니다.
                </div>
              )}

              <div className="space-y-3">
                {items.map((it) => (
                  <button
                    key={`${it.zipNo}-${it.roadAddr}`}
                    type="button"
                    onClick={() => onSelect(it)}
                    className={[
                      "w-full rounded-lg border p-4 text-left transition",
                      "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",
                    ].join(" ")}
                  >
                    <div className="text-[20px] font-extrabold tracking-tight text-slate-900">
                      {it.zipNo}
                    </div>

                    <div className="mt-2 flex items-start gap-2">
                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-sky-400 px-2 py-[2px] text-[12px] font-semibold text-sky-600">
                        도로명
                      </span>
                      <p className="text-[14px] leading-6 text-slate-700">
                        {it.roadAddr}
                      </p>
                    </div>

                    <div className="mt-1 flex items-start gap-2">
                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-[#6DBB4F] px-2 py-[2px] text-[12px] font-semibold text-[#6DBB4F]">
                        지번
                      </span>
                      <p className="text-[14px] leading-6 text-slate-700">
                        {it.jibunAddr}
                      </p>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}