"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { canManageStudents } from "@/lib/permissions";

export function StudentRowActions({
  studentId,
  onImpersonate,
  onDelete,
  onReleasePlacement,
  pendingPlacement,
}: {
  studentId: number;
  onImpersonate: () => void;
  onDelete: () => void;
  onReleasePlacement?: (mode: "unassign_class" | "release_school") => void;
  pendingPlacement?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);
  const canManage = canManageStudents();

  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]);

  if (!canManage) {
    return <span className="text-xs text-[var(--muted)]">—</span>;
  }

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

  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={(e) => e.stopPropagation()}
        >
          <button type="button" className="block w-full px-4 py-2 text-right text-primary hover:bg-slate-50" onClick={() => { setOpen(false); onImpersonate(); }}>
            ورود با این دانش‌آموز
          </button>
          <Link href={`/students/${studentId}/edit`} className="block px-4 py-2 text-right hover:bg-slate-50" onClick={() => setOpen(false)}>
            ویرایش
          </Link>
          <Link href={`/students/${studentId}/guardians`} className="block px-4 py-2 text-right hover:bg-slate-50" onClick={() => setOpen(false)}>
            اولیا
          </Link>
          <button type="button" className="block w-full px-4 py-2 text-right text-red-600 hover:bg-red-50" onClick={() => { setOpen(false); onDelete(); }}>
            حذف
          </button>
          <div className="my-1 border-t border-[var(--border)]" />
          <Link href={`/students/${studentId}/reset-password`} className="block px-4 py-2 text-right hover:bg-slate-50" onClick={() => setOpen(false)}>
            بازنشانی رمز
          </Link>
          {onReleasePlacement ? (
            <>
              <div className="my-1 border-t border-[var(--border)]" />
              {!pendingPlacement ? (
                <button
                  type="button"
                  className="block w-full px-4 py-2 text-right hover:bg-slate-50"
                  onClick={() => { setOpen(false); onReleasePlacement("unassign_class"); }}
                >
                  خروج از کلاس (بازگشت به استخر)
                </button>
              ) : null}
              <button
                type="button"
                className="block w-full px-4 py-2 text-right text-amber-700 hover:bg-amber-50"
                onClick={() => { setOpen(false); onReleasePlacement("release_school"); }}
              >
                آزادسازی برای مدرسه دیگر
              </button>
            </>
          ) : null}
        </div>
      ) : null}
    </>
  );
}