"use client";

import { BaseModal } from "@/components/modal";
import { useTranslations } from "next-intl";
import {
  Facebook,
  Twitter,
  Send,
  MessageCircle,
  Link2,
  Check,
} from "lucide-react";
import { useState } from "react";

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  url: string;
  description?: string;
  image?: string;
}

export default function ShareModal({
  isOpen,
  onClose,
  title,
  url,
  description,
}: ShareModalProps) {
  const t = useTranslations("SHARE_MODAL");
  const [copied, setCopied] = useState(false);

  const encodedUrl = encodeURIComponent(url);
  const encodedTitle = encodeURIComponent(title);

  const shareLinks = [
    {
      name: t("platforms.whatsapp"),
      icon: <MessageCircle className="w-6 h-6" />,
      color: "bg-green-500 hover:bg-green-600",
      href: `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
    },
    {
      name: t("platforms.telegram"),
      icon: <Send className="w-6 h-6" />,
      color: "bg-sky-500 hover:bg-sky-600",
      href: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
    },
    {
      name: t("platforms.facebook"),
      icon: <Facebook className="w-6 h-6" />,
      color: "bg-blue-600 hover:bg-blue-700",
      href: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
    },
    {
      name: t("platforms.twitter"),
      icon: <Twitter className="w-6 h-6" />,
      color: "bg-black hover:bg-gray-800",
      href: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
    },
  ];

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback for older browsers
      const textArea = document.createElement("textarea");
      textArea.value = url;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <BaseModal
      isOpen={isOpen}
      onOpenChange={onClose}
      title={t("title")}
      contentClassName="w-[min(100vw,400px)] rounded-2xl"
    >
      <div className="space-y-4">
        <p className="text-sm text-gray-600">{t("description")}</p>

        <div className="grid grid-cols-4 gap-3">
          {shareLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              className={`flex flex-col items-center justify-center p-4 rounded-xl text-white transition-all ${link.color}`}
            >
              {link.icon}
              <span className="text-xs mt-1 font-medium">{link.name}</span>
            </a>
          ))}
        </div>

        <div className="border-t pt-4">
          <p className="text-sm text-gray-600 mb-2">{t("copy_link")}</p>
          <div className="flex items-center gap-2">
            <input
              type="text"
              value={url}
              readOnly
              className="flex-1 px-3 py-2 border rounded-lg text-sm bg-gray-50 text-gray-700 truncate"
              dir="ltr"
            />
            <button
              type="button"
              onClick={handleCopyLink}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
                copied
                  ? "bg-green-500 text-white"
                  : "bg-[#0F5132] text-white hover:bg-[#0F5132]/90"
              }`}
            >
              {copied ? (
                <>
                  <Check className="w-4 h-4" />
                  {t("copied")}
                </>
              ) : (
                <>
                  <Link2 className="w-4 h-4" />
                  {t("copy")}
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </BaseModal>
  );
}