"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";

export function ProviderRowActions({
  providerId,
  active,
  canManage = true,
  onDisable,
}: {
  providerId: number;
  active: boolean;
  canManage?: boolean;
  onDisable: () => void;
}) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    window.addEventListener("scroll", close, true);
    return () => {
      window.removeEventListener("click", close);
      window.removeEventListener("scroll", close, true);
    };
  }, [open]);

  const toggle = (event: React.MouseEvent) => {
    event.stopPropagation();
    if (btnRef.current) {
      const rect = btnRef.current.getBoundingClientRect();
      setPos({ top: rect.bottom + 4, left: Math.max(8, rect.right - 200) });
    }
    setOpen((value) => !value);
  };

  return (
    <>
      <button
        ref={btnRef}
        type="button"
        className="rounded-lg border border-[var(--border)] p-1.5 text-[var(--muted)] hover:bg-slate-50 hover:text-foreground"
        onClick={toggle}
        aria-label="عملیات"
      >
        <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden>
          <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z" />
        </svg>
      </button>
      {open ? (
        <div
          className="fixed z-50 min-w-[13rem] rounded-xl border border-[var(--border)] bg-white py-1 text-sm shadow-lg"
          style={{ top: pos.top, left: pos.left }}
          onClick={(event) => event.stopPropagation()}
        >
          <Link
            href={`/virtual-classes/rooms/new?providerId=${providerId}`}
            className="block px-4 py-2 text-right hover:bg-slate-50"
            onClick={() => setOpen(false)}
          >
            افزودن اتاق
          </Link>
          {canManage ? (
            <Link
              href={`/virtual-classes/providers/${providerId}`}
              className="block px-4 py-2 text-right hover:bg-slate-50"
              onClick={() => setOpen(false)}
            >
              ویرایش سرور
            </Link>
          ) : null}
          {canManage ? (
            <Link
              href={`/virtual-classes/providers/${providerId}/access`}
              className="block px-4 py-2 text-right hover:bg-slate-50"
              onClick={() => setOpen(false)}
            >
              دسترسی شعب
            </Link>
          ) : null}
          {canManage && active ? (
            <button
              type="button"
              className="block w-full px-4 py-2 text-right text-red-600 hover:bg-red-50"
              onClick={() => {
                setOpen(false);
                onDisable();
              }}
            >
              غیرفعال
            </button>
          ) : null}
        </div>
      ) : null}
    </>
  );
}