"use client";

/** Bale-style attachment menu — popover on desktop, sheet on mobile */
export function SocialAttachSheet({
  open,
  onClose,
  onPickMedia,
  onPickFile,
  onPickVoice,
  onPoll,
  variant = "sheet",
}: {
  open: boolean;
  onClose: () => void;
  onPickMedia: () => void;
  onPickFile: () => void;
  onPickVoice?: () => void;
  onPoll?: () => void;
  variant?: "sheet" | "popover";
}) {
  if (!open) return null;

  const items = [
    {
      id: "media",
      label: "عکس و ویدیو",
      tint: "bg-violet-50 text-violet-600",
      icon: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z",
      action: onPickMedia,
    },
    {
      id: "voice",
      label: "پیام صوتی",
      tint: "bg-rose-50 text-rose-600",
      icon: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z",
      action: onPickVoice ?? (() => undefined),
      soon: !onPickVoice,
    },
    {
      id: "file",
      label: "فایل",
      tint: "bg-sky-50 text-sky-600",
      icon: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z",
      action: onPickFile,
    },
    {
      id: "poll",
      label: "نظرسنجی",
      tint: "bg-amber-50 text-amber-600",
      icon: "M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z",
      action: onPoll ?? (() => undefined),
      soon: !onPoll,
    },
  ];

  const list = (
    <ul className={variant === "popover" ? "py-1" : "py-2"}>
      {items.map((item) => (
        <li key={item.id}>
          <button
            type="button"
            disabled={item.soon}
            onClick={() => {
              if (item.soon) return;
              item.action();
              onClose();
            }}
            className="flex w-full items-center gap-3 px-4 py-3 text-right text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:opacity-45"
          >
            <span className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${item.tint}`}>
              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden>
                <path d={item.icon} />
              </svg>
            </span>
            <span className="flex-1">
              {item.label}
              {item.soon ? <span className="mr-2 text-xs text-slate-400">به‌زودی</span> : null}
            </span>
          </button>
        </li>
      ))}
    </ul>
  );

  if (variant === "popover") {
    return (
      <>
        <div className="fixed inset-0 z-[55]" onClick={onClose} aria-hidden />
        <div className="absolute bottom-full left-0 z-[60] mb-2 w-56 overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-xl shadow-slate-300/30">
          {list}
        </div>
      </>
    );
  }

  return (
    <div className="fixed inset-0 z-[60] flex items-end bg-black/35 lg:items-center lg:justify-center" onClick={onClose}>
      <div
        className="w-full rounded-t-3xl bg-white pb-[env(safe-area-inset-bottom)] shadow-2xl lg:max-w-sm lg:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mx-auto mt-2 h-1 w-10 rounded-full bg-slate-200 lg:hidden" />
        <div className="flex items-center justify-between border-b border-slate-100 px-4 py-3">
          <div className="text-sm font-bold text-slate-800">پیوست</div>
          <button
            type="button"
            className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-lg text-slate-500"
            onClick={onClose}
          >
            ×
          </button>
        </div>
        {list}
      </div>
    </div>
  );
}