"use client";

import { useState } from "react";
import { X, Link2, Mail, MessageCircle, Send } from "lucide-react";
import { useEscapeKey } from "@/lib/use-escape-key";
import { sfx } from "@/lib/sfx";

type Target = {
  key: string;
  label: string;
  bg: string;
  glyph: React.ReactNode;
  href?: (url: string, text: string) => string;
};

const TARGETS: Target[] = [
  {
    key: "whatsapp", label: "WhatsApp", bg: "linear-gradient(145deg,#5efc8d,#12a83e)",
    glyph: <MessageCircle size={24} />,
    href: (u, t) => `https://wa.me/?text=${encodeURIComponent(`${t} ${u}`)}`,
  },
  {
    key: "x", label: "X", bg: "linear-gradient(145deg,#4a4a4a,#000)",
    glyph: <span className="font-black text-lg">𝕏</span>,
    href: (u, t) => `https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}&url=${encodeURIComponent(u)}`,
  },
  {
    key: "facebook", label: "Facebook", bg: "linear-gradient(145deg,#5b8dfd,#1449b8)",
    glyph: <span className="font-black text-lg">f</span>,
    href: (u) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(u)}`,
  },
  {
    key: "telegram", label: "Telegram", bg: "linear-gradient(145deg,#5fd0ff,#0a7ec4)",
    glyph: <Send size={22} />,
    href: (u, t) => `https://t.me/share/url?url=${encodeURIComponent(u)}&text=${encodeURIComponent(t)}`,
  },
  {
    key: "reddit", label: "Reddit", bg: "linear-gradient(145deg,#ff9166,#e03d00)",
    glyph: <span className="font-black text-lg">r</span>,
    href: (u, t) => `https://reddit.com/submit?url=${encodeURIComponent(u)}&title=${encodeURIComponent(t)}`,
  },
  {
    key: "linkedin", label: "LinkedIn", bg: "linear-gradient(145deg,#4aa3e0,#00558f)",
    glyph: <span className="font-black text-base">in</span>,
    href: (u) => `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(u)}`,
  },
  {
    key: "email", label: "Email", bg: "linear-gradient(145deg,#b0b8c4,#5b6472)",
    glyph: <Mail size={22} />,
    href: (u, t) => `mailto:?subject=${encodeURIComponent(t)}&body=${encodeURIComponent(u)}`,
  },
  {
    key: "copy", label: "Copy link", bg: "linear-gradient(145deg,#a78bfa,#6d28d9)",
    glyph: <Link2 size={22} />,
  },
];

export function ShareSheet({
  url,
  text,
  onClose,
}: {
  url: string;
  text: string;
  onClose: () => void;
}) {
  const [toast, setToast] = useState<string | null>(null);
  useEscapeKey(onClose);

  function handle(t: Target) {
    sfx.repost();
    if (t.key === "copy") {
      navigator.clipboard?.writeText(url);
      setToast("Link copied");
      setTimeout(() => setToast(null), 1800);
      return;
    }
    if (t.href) window.open(t.href(url, text), "_blank", "noopener,noreferrer");
  }

  return (
    <div
      className="fixed inset-0 z-[70] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center p-4"
      onClick={onClose}
    >
      <div
        className="bg-white dark:bg-neutral-950 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-100 dark:border-neutral-800">
          <span className="font-semibold">Share</span>
          <button onClick={onClose} className="text-neutral-400 hover:text-neutral-600 transition-colors">
            <X size={18} />
          </button>
        </div>

        <div className="px-5 py-5">
          <div className="sh-grid">
            {TARGETS.map((t) => (
              <button key={t.key} className="sh-tile" onClick={() => handle(t)} title={t.label}>
                <span className="sh-ico" style={{ background: t.bg }}>
                  {t.glyph}
                </span>
                <span className="sh-lbl">{t.label}</span>
              </button>
            ))}
          </div>

          <div className="mt-5 flex items-center gap-2 bg-neutral-100 dark:bg-neutral-900 rounded-xl px-3 py-2.5">
            <span className="flex-1 text-xs text-neutral-500 truncate">{url}</span>
            <button
              onClick={() => handle(TARGETS[TARGETS.length - 1])}
              className="text-xs font-semibold bg-black text-white dark:bg-white dark:text-black rounded-lg px-3 py-1.5 shrink-0"
            >
              Copy
            </button>
          </div>
        </div>
      </div>

      {toast && <div className="sh-toast">{toast}</div>}
    </div>
  );
}