import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { toggleVideoLike } from '../utils/api';

interface ContentCardSocialActionsProps {
  videoId: number;
  storeName: string;
  region?: string;
  commentCount: number;
  initialLikeCount: number;
  initialIsLiked?: boolean;
}

const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
  videoId,
  storeName,
  region,
  commentCount,
  initialLikeCount,
  initialIsLiked = false,
}) => {
  const { t } = useTranslation();

  const [likeCount, setLikeCount] = useState(initialLikeCount);
  const [isLiked, setIsLiked] = useState(initialIsLiked);
  const [copied, setCopied] = useState(false);
  const [shareMenuOpen, setShareMenuOpen] = useState(false);
  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
  const [anchorRect, setAnchorRect] = useState<{ top: number; bottom: number; left: number } | null>(null);

  const shareBtnRef = useRef<HTMLButtonElement>(null);
  const shareMenuRef = useRef<HTMLDivElement>(null);
  const likeDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const shareUrl = `${window.location.origin}/video/${videoId}`;

  useEffect(() => {
    if (!shareMenuOpen) return;

    const closeMenu = () => setShareMenuOpen(false);

    const handleClickOutside = (e: MouseEvent) => {
      if (
        shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node) &&
        shareBtnRef.current && !shareBtnRef.current.contains(e.target as Node)
      ) {
        closeMenu();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    window.addEventListener('scroll', closeMenu, true);
    window.addEventListener('resize', closeMenu);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      window.removeEventListener('scroll', closeMenu, true);
      window.removeEventListener('resize', closeMenu);
    };
  }, [shareMenuOpen]);

  // 메뉴가 뷰포트 밖으로 넘어가지 않도록 실제 렌더된 크기 기준으로 위치 보정
  useLayoutEffect(() => {
    if (!shareMenuOpen || !anchorRect || !shareMenuRef.current) return;
    const margin = 8;
    const menuRect = shareMenuRef.current.getBoundingClientRect();

    let left = anchorRect.left;
    if (left + menuRect.width > window.innerWidth - margin) {
      left = window.innerWidth - menuRect.width - margin;
    }
    left = Math.max(margin, left);

    let top = anchorRect.bottom + 6;
    if (top + menuRect.height > window.innerHeight - margin) {
      top = anchorRect.top - menuRect.height - 6;
    }
    top = Math.max(margin, top);

    setMenuPos((prev) => (prev && prev.top === top && prev.left === left ? prev : { top, left }));
  }, [shareMenuOpen, anchorRect]);

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
    } catch {
      // clipboard API 미지원 환경에서는 무시
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleKakaoShare = () => {
    const kakao = window.Kakao;
    if (kakao?.Share) {
      kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: storeName || t('videoDetail.kakaoDefaultTitle'),
          description: t('videoDetail.kakaoDescription', { region: region ?? '' }),
          imageUrl: 'https://demo.castad.net/favicon_48.svg',
          link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
        },
        buttons: [{ title: t('videoDetail.kakaoButtonTitle'), link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
      });
    } else if (navigator.share) {
      navigator.share({ url: shareUrl }).catch(() => {});
    } else {
      handleCopyLink();
    }
    setShareMenuOpen(false);
  };

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

  const handleTwitterShare = () => {
    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
    setShareMenuOpen(false);
  };

  const handleLikeClick = (e: React.MouseEvent) => {
    e.stopPropagation();

    const prevLiked = isLiked;
    const prevCount = likeCount;

    setIsLiked(!prevLiked);
    setLikeCount(prevLiked ? prevCount - 1 : prevCount + 1);

    if (likeDebounceRef.current) clearTimeout(likeDebounceRef.current);
    likeDebounceRef.current = setTimeout(async () => {
      try {
        const res = await toggleVideoLike(String(videoId));
        setIsLiked(res.is_liked);
        setLikeCount(res.like_count);
      } catch (err) {
        console.error('Failed to toggle like:', err);
        setIsLiked(prevLiked);
        setLikeCount(prevCount);
      }
    }, 500);
  };

  const handleShareBtnClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    const rect = shareBtnRef.current?.getBoundingClientRect();
    if (rect) {
      // 초기 추정 위치(측정 전 첫 렌더용) — useLayoutEffect가 실제 크기 기준으로 다시 보정한다
      setAnchorRect({ top: rect.top, bottom: rect.bottom, left: rect.left });
      setMenuPos({ top: rect.bottom + 6, left: rect.left });
    }
    setShareMenuOpen((v) => !v);
  };

  return (
    <div className="content-card-social" onClick={(e) => e.stopPropagation()}>
      <button
        className={`content-card-like-btn ${isLiked ? 'liked' : ''}`}
        onClick={handleLikeClick}
      >
        <svg width="15" height="15" viewBox="0 0 24 24" fill={isLiked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
        </svg>
        {likeCount}
      </button>

      <span className="content-card-comment">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
        </svg>
        {commentCount}
      </span>

      <button
        ref={shareBtnRef}
        className="content-card-share-btn"
        onClick={handleShareBtnClick}
        title={t('videoDetail.share')}
      >
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" />
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
        </svg>
      </button>

      {shareMenuOpen && menuPos && createPortal(
        <div
          ref={shareMenuRef}
          className="video-detail-share-menu"
          style={{ position: 'fixed', top: menuPos.top, left: menuPos.left }}
        >
          <button className="video-detail-share-item" onClick={handleKakaoShare}>
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="20" height="20" rx="4" fill="#FEE500" />
              <path fillRule="evenodd" clipRule="evenodd" d="M10 3.5C6.134 3.5 3 6.01 3 9.1c0 1.98 1.2 3.72 3.01 4.76l-.74 2.75a.19.19 0 0 0 .28.21l3.37-2.23c.34.04.69.06 1.06.06 3.866 0 7-2.51 7-5.6S13.866 3.5 10 3.5z" fill="#3C1E1E" />
            </svg>
            {t('videoDetail.shareKakao')}
          </button>
          <button className="video-detail-share-item" onClick={handleFacebookShare}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
              <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.887v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z" />
            </svg>
            {t('videoDetail.shareFacebook')}
          </button>
          <button className="video-detail-share-item" onClick={handleTwitterShare}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
            </svg>
            {t('videoDetail.shareTwitter')}
          </button>
          <button className="video-detail-share-item" onClick={() => { handleCopyLink(); setShareMenuOpen(false); }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="9" y="9" width="13" height="13" rx="2" />
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
            </svg>
            {copied ? t('videoDetail.copied') : t('videoDetail.copyUrl')}
          </button>
        </div>,
        document.body
      )}
    </div>
  );
};

export default ContentCardSocialActions;
