"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, Link2, Check } from "lucide-react";

interface Props {
  open: boolean;
  onClose: () => void;
  url: string;
  title: string;
}

const OPTIONS = [
  {
    label: "WhatsApp",
    bg: "#25D366",
    emoji: "💬",
    href: (u: string, t: string) =>
      `https://wa.me/?text=${encodeURIComponent(t + " " + u)}`,
  },
  {
    label: "Facebook",
    bg: "#1877F2",
    emoji: "📘",
    href: (u: string) =>
      `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(u)}`,
  },
  {
    label: "Twitter",
    bg: "#1DA1F2",
    emoji: "🐦",
    href: (u: string, t: string) =>
      `https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}&url=${encodeURIComponent(u)}`,
  },
  {
    label: "Telegram",
    bg: "#0088cc",
    emoji: "✈️",
    href: (u: string, t: string) =>
      `https://t.me/share/url?url=${encodeURIComponent(u)}&text=${encodeURIComponent(t)}`,
  },
  {
    label: "Email",
    bg: "#EA4335",
    emoji: "📧",
    href: (u: string, t: string) =>
      `mailto:?subject=${encodeURIComponent(t)}&body=${encodeURIComponent(u)}`,
  },
];

export function ShareModal({ open, onClose, url, title }: Props) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-[200] flex items-end sm:items-center justify-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
          <motion.div
            className="relative w-full sm:max-w-sm rounded-t-3xl sm:rounded-2xl border border-[var(--border)] bg-[var(--card)] overflow-hidden"
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", stiffness: 320, damping: 30 }}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Handle (mobile) */}
            <div className="flex justify-center pt-3 pb-1 sm:hidden">
              <div
                className="w-10 h-1 rounded-full"
                style={{ background: "var(--border)" }}
              />
            </div>

            {/* Header */}
            <div className="flex items-center justify-between px-5 py-4">
              <span className="font-bold text-[var(--text-primary)] text-base">
                Share Listing
              </span>
              <button
                onClick={onClose}
                className="w-8 h-8 rounded-full flex items-center justify-center"
                style={{ background: "var(--deep)" }}
              >
                <X size={15} className="text-[var(--text-muted)]" />
              </button>
            </div>

            {/* Share options */}
            <div className="grid grid-cols-5 gap-2 px-5 pb-5">
              {OPTIONS.map((opt) => (
                <a
                  key={opt.label}
                  href={opt.href(url, title)}
                  target="_blank"
                  rel="noreferrer"
                  onClick={onClose}
                  className="flex flex-col items-center gap-1.5"
                >
                  <div
                    className="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl"
                    style={{
                      background: opt.bg + "22",
                      border: `1px solid ${opt.bg}55`,
                    }}
                  >
                    {opt.emoji}
                  </div>
                  <span
                    className="text-[10px]"
                    style={{ color: "var(--text-muted)" }}
                  >
                    {opt.label}
                  </span>
                </a>
              ))}
            </div>

            {/* Copy link */}
            <div className="px-5 pb-7">
              <div
                className="flex items-center gap-2 rounded-xl px-3 py-2.5 border"
                style={{
                  background: "var(--deep)",
                  borderColor: "var(--border)",
                }}
              >
                <Link2 size={13} className="text-[var(--text-muted)] shrink-0" />
                <span
                  className="text-xs flex-1 truncate"
                  style={{ color: "var(--text-muted)" }}
                >
                  {url}
                </span>
                <motion.button
                  whileTap={{ scale: 0.9 }}
                  onClick={copy}
                  className="shrink-0 text-xs font-bold px-3 py-1.5 rounded-lg text-white transition-colors"
                  style={{ background: copied ? "#22c55e" : "var(--accent)" }}
                >
                  <AnimatePresence mode="wait">
                    <motion.span
                      key={copied ? "done" : "copy"}
                      initial={{ opacity: 0, y: 4 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -4 }}
                      className="flex items-center gap-1"
                    >
                      {copied ? (
                        <>
                          <Check size={11} /> Done
                        </>
                      ) : (
                        "Copy"
                      )}
                    </motion.span>
                  </AnimatePresence>
                </motion.button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}