"use client";

import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { createPortal } from "react-dom";

export function Select3D({
  value,
  onChange,
  options,
  placeholder = "Pilih",
  className = "",
  fullWidth = false,
}: {
  value: string | number;
  onChange: (v: any) => void;
  options: { label: string; value: any }[];
  placeholder?: string;
  className?: string;
  fullWidth?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [pos, setPos] = useState({
    top: 0,
    left: 0,
    width: 0,
  });

  const dropdownRef = useRef<HTMLDivElement>(null); // ✅ tambah
  const ref = useRef<HTMLDivElement>(null);

  const selected = options.find((o) => o.value === value);

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

  // ✅ FIX: click outside tapi ignore dropdown
  useEffect(() => {
    const handler = (e: any) => {
      const target = e.target;

      if (
        ref.current?.contains(target) ||
        dropdownRef.current?.contains(target)
      ) {
        return;
      }

      setOpen(false);
    };

    document.addEventListener("pointerdown", handler);
    return () => document.removeEventListener("pointerdown", handler);
  }, []);

  useEffect(() => {
    if (open && ref.current) {
      const rect = ref.current.getBoundingClientRect();

      setPos({
        top: rect.bottom + 8,
        left: rect.left,
        width: rect.width,
      });
    }
  }, [open]);

  // ✅ FIX: hapus scroll close → biar bisa scroll dropdown
  useEffect(() => {
    const close = () => setOpen(false);

    window.addEventListener("resize", close);

    return () => {
      window.removeEventListener("resize", close);
    };
  }, []);

  return (
    <>
      {/* ================= WRAPPER ================= */}
      <div
        ref={ref}
        className={`relative ${fullWidth ? "w-full" : ""} ${className}`}
      >
        {/* GLOW */}
        <div className="absolute inset-0 translate-y-1 bg-green-300/20 blur-lg rounded-xl" />

        {/* BUTTON */}
        <button
          onClick={() => setOpen((prev) => !prev)}
          className={`relative flex items-center justify-between gap-2 px-3 py-2 rounded-xl
          bg-white/80 backdrop-blur-xl
          border border-green-200
          text-sm shadow-md
          focus:outline-none focus:ring-2 focus:ring-green-400
          min-w-35
          ${fullWidth ? "w-full" : ""}`}
        >
          <span className="truncate">
            {selected?.label || placeholder}
          </span>

          <ChevronDown
            className={`w-4 h-4 transition ${
              open ? "rotate-180" : ""
            }`}
          />
        </button>
      </div>

      {/* ================= DROPDOWN ================= */}
      {mounted &&
        createPortal(
          <AnimatePresence>
            {open && (
              <motion.div
                ref={dropdownRef} // ✅ penting
                initial={{ opacity: 0, y: 10, scale: 0.96 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, y: 10, scale: 0.96 }}
                transition={{ duration: 0.15 }}
                style={{
                  position: "fixed",
                  top: pos.top,
                  left: pos.left,
                  width: pos.width,
                  zIndex: 9999,
                }}
                className="rounded-2xl overflow-hidden
                bg-linear-to-br from-white to-green-50
                border border-green-100
                shadow-[0_20px_50px_rgba(0,0,0,0.15)]"
              >
                {/* ✅ FIX SCROLL AREA */}
                <div
                  className="p-2 max-h-72 overflow-y-auto overscroll-contain"
                  onWheel={(e) => e.stopPropagation()}
                  onTouchMove={(e) => e.stopPropagation()}
                >
                  {options.map((opt) => {
                    const active = opt.value === value;

                    return (
                      <button
                        key={opt.value}
                        onClick={() => {
                          onChange(opt.value);
                          setOpen(false);
                        }}
                        className={`w-full text-left px-3 py-2 rounded-xl text-sm transition
                        ${
                          active
                            ? "bg-green-100 text-green-700"
                            : "hover:bg-green-50"
                        }`}
                      >
                        {opt.label}
                      </button>
                    );
                  })}
                </div>
              </motion.div>
            )}
          </AnimatePresence>,
          document.body
        )}
    </>
  );
}