"use client";

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

export interface SchoolAction {
  label: string;
  href?: string;
  onClick?: () => void;
  tone?: "default" | "danger";
  divider?: boolean;
}

export function SchoolRowActions({
  schoolId,
  onDelete,
}: {
  schoolId: number;
  onDelete: () => void;
}) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const router = useRouter();

  useLayoutEffect(() => {
    if (!open || !btnRef.current || !menuRef.current) return;
    const btn = btnRef.current.getBoundingClientRect();
    const menu = menuRef.current.getBoundingClientRect();
    const gap = 4;
    const viewportPad = 8;
    const spaceBelow = window.innerHeight - btn.bottom - gap;
    const openUp = menu.height > spaceBelow && btn.top > menu.height + gap;

    let top = openUp ? btn.top - menu.height - gap : btn.bottom + gap;
    top = Math.max(
      viewportPad,
      Math.min(top, window.innerHeight - menu.height - viewportPad),
    );

    let left = btn.right - menu.width;
    left = Math.max(
      viewportPad,
      Math.min(left, window.innerWidth - menu.width - viewportPad),
    );

    setPos({ top, left });
  }, [open]);

  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 = (e: React.MouseEvent) => {
    e.stopPropagation();
    setOpen((v) => !v);
  };

  const items: SchoolAction[] = [
    { label: "ویرایش", href: `/schools/${schoolId}/edit` },
    { label: "حذف", onClick: onDelete, tone: "danger", divider: true },
    { label: "داشبورد مدرسه", href: `/schools/${schoolId}/dashboard` },
    { label: "فهرست کلاس‌ها", href: `/schools/${schoolId}/classes` },
    { label: "فهرست زنگ‌ها", href: `/schools/${schoolId}/periods` },
    {
      label: "تنظیمات پیش‌ثبت‌نام",
      href: `/pre-registration/settings?branchId=${schoolId}`,
    },
    {
      label: "مدیریت کلاس‌های مجازی",
      onClick: () => router.push(`/virtual-classes?branchId=${schoolId}`),
    },
  ];

  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
          ref={menuRef}
          className="fixed z-50 max-h-[min(24rem,calc(100vh-1rem))] min-w-[12rem] overflow-y-auto rounded-xl border border-[var(--border)] bg-white py-1 text-sm shadow-lg"
          style={{ top: pos.top, left: pos.left }}
          onClick={(e) => e.stopPropagation()}
        >
          {items.map((item) => (
            <div key={item.label}>
              {item.divider ? <div className="my-1 border-t border-[var(--border)]" /> : null}
              {item.href ? (
                <Link
                  href={item.href}
                  className="block px-4 py-2 text-right hover:bg-slate-50"
                  onClick={() => setOpen(false)}
                >
                  {item.label}
                </Link>
              ) : (
                <button
                  type="button"
                  className={`block w-full px-4 py-2 text-right hover:bg-slate-50 ${item.tone === "danger" ? "text-red-600 hover:bg-red-50" : ""}`}
                  onClick={() => {
                    setOpen(false);
                    item.onClick?.();
                  }}
                >
                  {item.label}
                </button>
              )}
            </div>
          ))}
        </div>
      ) : null}
    </>
  );
}