"use client";

import React, { useEffect, useRef, useState } from "react";
import {
  FiChevronDown,
  FiChevronUp,
  FiEye,
  FiEdit,
  FiMail,
  FiTrash2,
  FiCheckCircle,
} from "react-icons/fi";

export interface NcAction {
  key: string;
  label: string;
  icon: React.ReactNode;
  color?: string;      // text color
  danger?: boolean;    // red styling for destructive actions
  onClick: () => void;
}

interface Props {
  actions: NcAction[];
}

export default function NcActionButton({ actions }: Props) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);

  // Close on click outside / Escape
  useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (!actions.length) return null;

  return (
    <div ref={wrapRef} style={{ position: "relative", display: "inline-block" }}>
      {/* Arrow toggle — same look as the "+2 ⌄" standards chip */}
      <button
        onClick={(e) => {
          e.stopPropagation();
          setOpen((v) => !v);
        }}
        title="Actions"
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 3,
          padding: "3px 8px",
          borderRadius: 10,
          border: `1px solid ${open ? "#6d28d9" : "#e2e8f0"}`,
          background: open ? "#f5f3ff" : "#fff",
          color: open ? "#6d28d9" : "#64748b",
          fontSize: 11,
          fontWeight: 700,
          cursor: "pointer",
          transition: "all 0.12s",
        }}
      >
        {open ? <FiChevronUp size={12} /> : <FiChevronDown size={12} />}
      </button>

      {/* Dropdown — same white card style as ALL STANDARDS popup */}
      {open && (
        <div
          style={{
            position: "absolute",
            top: "calc(100% + 6px)",
            left: 0,
            zIndex: 100,
            minWidth: 180,
            background: "#fff",
            border: "1px solid #e2e8f0",
            borderRadius: 10,
            boxShadow: "0 8px 24px rgba(15,23,42,0.12)",
            padding: "6px 0",
            overflow: "hidden",
          }}
        >
          <div
            style={{
              padding: "6px 14px 8px",
              fontSize: 10,
              fontWeight: 700,
              color: "#94a3b8",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
              borderBottom: "1px solid #f1f5f9",
              marginBottom: 4,
            }}
          >
            Actions
          </div>
          {actions.map((a) => (
            <button
              key={a.key}
              onClick={(e) => {
                e.stopPropagation();
                setOpen(false);
                a.onClick();
              }}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 9,
                width: "100%",
                padding: "8px 14px",
                background: "transparent",
                border: "none",
                cursor: "pointer",
                fontSize: 12.5,
                fontWeight: 600,
                color: a.danger ? "#b91c1c" : a.color || "#334155",
                textAlign: "left",
                transition: "background 0.1s",
              }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.background = a.danger
                  ? "#fef2f2"
                  : "#f8fafc")
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.background = "transparent")
              }
            >
              <span style={{ display: "inline-flex", flexShrink: 0 }}>
                {a.icon}
              </span>
              {a.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}