"use client";
import { useEffect, useRef, useState } from "react";
import { Eye, EyeOff, Gem, Star, MinusCircle, ChevronDown, Tag } from "lucide-react";
import { cn } from "@/lib/utils";

type Action = "watched" | "unwatched" | "vip" | "favorite" | "unmark";

export function MarkAsMenu({
  onAction,
  disabled,
}: {
  onAction: (action: Action) => void;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  function pick(action: Action) {
    setOpen(false);
    onAction(action);
  }

  return (
    <div className="relative" ref={wrapRef}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        disabled={disabled}
        className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg glass hover:text-[var(--color-fg)] disabled:opacity-40"
      >
        <Tag className="w-3.5 h-3.5" />
        Mark As
        <ChevronDown className="w-3 h-3 opacity-70" />
      </button>

      {open && (
        <div
          className="absolute right-0 bottom-[calc(100%+6px)] z-30 bg-[var(--color-bg-0)] border border-[var(--color-glass-border-strong)] rounded-xl shadow-2xl p-1 w-52"
          onClick={(e) => e.stopPropagation()}
        >
          <Row icon={Eye} label="Watched" colorClass="text-[var(--color-mint)]" onClick={() => pick("watched")} />
          <Row icon={EyeOff} label="Unwatched" onClick={() => pick("unwatched")} />
          <div className="h-px bg-[var(--color-glass-border)] my-1" />
          <Row icon={Gem} label="VIP" colorClass="text-[var(--color-cyan)]" onClick={() => pick("vip")} />
          <Row icon={Star} label="Favorite" colorClass="text-amber-300" iconStyle={{ fill: "#fbbf24" }} onClick={() => pick("favorite")} />
          <Row icon={MinusCircle} label="Unmark" colorClass="text-[var(--color-fg-muted)]" onClick={() => pick("unmark")} />
        </div>
      )}
    </div>
  );
}

function Row({
  icon: Icon,
  label,
  onClick,
  colorClass,
  iconStyle,
}: {
  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
  label: string;
  onClick: () => void;
  colorClass?: string;
  iconStyle?: React.CSSProperties;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "w-full flex items-center gap-2.5 px-2 py-1.5 rounded-md text-sm text-left transition-colors hover:bg-[var(--color-glass)]",
        colorClass ?? "text-[var(--color-fg-dim)]",
      )}
    >
      <Icon className="w-3.5 h-3.5" style={iconStyle} />
      <span className="flex-1">{label}</span>
    </button>
  );
}