saju-web/app/components/ShareButtons.tsx

'use client';

import { useState } from 'react';

interface ShareButtonsProps {
  title: string;
  description: string;
  url?: string;
}

export default function ShareButtons({ title, description, url }: ShareButtonsProps) {
  const [showShareMenu, setShowShareMenu] = useState(false);
  const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');

  const handleKakaoShare = () => {
    if (typeof window !== 'undefined' && (window as any).Kakao) {
      (window as any).Kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: title,
          description: description,
          imageUrl: 'https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png',
          link: {
            mobileWebUrl: shareUrl,
            webUrl: shareUrl,
          },
        },
        buttons: [
          {
            title: '자세히 보기',
            link: {
              mobileWebUrl: shareUrl,
              webUrl: shareUrl,
            },
          },
        ],
      });
    } else {
      alert('카카오톡 공유 기능을 사용할 수 없습니다.');
    }
  };

  const handleFacebookShare = () => {
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
    window.open(facebookUrl, '_blank', 'width=600,height=400');
  };

  const handleTwitterShare = () => {
    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`;
    window.open(twitterUrl, '_blank', 'width=600,height=400');
  };

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      alert('링크가 복사되었습니다!');
      setShowShareMenu(false);
    } catch (err) {
      alert('링크 복사에 실패했습니다.');
    }
  };

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: title,
          text: description,
          url: shareUrl,
        });
        setShowShareMenu(false);
      } catch (err) {
        console.log('Share cancelled or failed', err);
      }
    } else {
      setShowShareMenu(true);
    }
  };

  return (
    <div className="relative">
      <button
        onClick={handleNativeShare}
        className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full"
      >
        <div className="text-4xl mb-3">📤</div>
        <h3 className="text-xl font-bold text-gray-900 mb-2">공유하기</h3>
        <p className="text-gray-600 text-sm">결과를 친구에게 공유</p>
      </button>

      {/* 공유 메뉴 (모바일에서 네이티브 공유가 안 될 때) */}
      {showShareMenu && (
        <>
          {/* 배경 오버레이 */}
          <div
            className="fixed inset-0 bg-black bg-opacity-50 z-40"
            onClick={() => setShowShareMenu(false)}
          ></div>

          {/* 공유 메뉴 */}
          <div className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-2xl z-50 p-6 animate-slide-up">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-gray-900">공유하기</h3>
              <button
                onClick={() => setShowShareMenu(false)}
                className="text-gray-500 hover:text-gray-700 text-2xl"
              >
                ✕
              </button>
            </div>

            <div className="grid grid-cols-4 gap-4 mb-4">
              {/* 카카오톡 */}
              <button
                onClick={handleKakaoShare}
                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
              >
                <div className="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center text-2xl">
                  💬
                </div>
                <span className="text-xs text-gray-700">카카오톡</span>
              </button>

              {/* 페이스북 */}
              <button
                onClick={handleFacebookShare}
                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
              >
                <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-2xl text-white">
                  f
                </div>
                <span className="text-xs text-gray-700">페이스북</span>
              </button>

              {/* 트위터 */}
              <button
                onClick={handleTwitterShare}
                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
              >
                <div className="w-12 h-12 bg-blue-400 rounded-full flex items-center justify-center text-2xl text-white">
                  𝕏
                </div>
                <span className="text-xs text-gray-700">트위터</span>
              </button>

              {/* 링크 복사 */}
              <button
                onClick={handleCopyLink}
                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
              >
                <div className="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center text-2xl text-white">
                  🔗
                </div>
                <span className="text-xs text-gray-700">링크 복사</span>
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}