import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
  getVideoById,
  getVideoComments,
  postVideoComment,
  deleteComment,
  toggleVideoLike,
  isLoggedIn,
} from '../utils/api';
import { VideoDetailItem, CommentItem } from '../types/api';
import LoginPromptModal from './LoginPromptModal';

interface VideoDetailContentProps {
  videoId: string;
  isModal?: boolean;
  onClose?: () => void;
}

const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModal = false, onClose }) => {
  const { t } = useTranslation();
  const authed = isLoggedIn();

  const [video, setVideo] = useState<VideoDetailItem | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [likeCount, setLikeCount] = useState(0);
  const [isLiked, setIsLiked] = useState(false);

  const [copied, setCopied] = useState(false);
  const [shareMenuOpen, setShareMenuOpen] = useState(false);
  const [isLandscape, setIsLandscape] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);

  const [comments, setComments] = useState<CommentItem[]>([]);
  const [commentsTotal, setCommentsTotal] = useState(0);
  const [commentsPage, setCommentsPage] = useState(1);
  const [commentsHasNext, setCommentsHasNext] = useState(false);
  const [commentsLoading, setCommentsLoading] = useState(false);
  const [commentInput, setCommentInput] = useState('');
  const [commentSubmitting, setCommentSubmitting] = useState(false);
  const commentTextareaRef = useRef<HTMLTextAreaElement>(null);

  const [commentNickname, setCommentNickname] = useState('');
  const [commentAvatarSeedIdx, setCommentAvatarSeedIdx] = useState(0);

  // 고정 seed 목록: 브라우저가 캐싱하여 중복 요청 없음
  const AVATAR_SEEDS = ['42', '77', '123', '256', '512', '888', '1024', '2048', '3141', '9999'];
  const commentAvatarSeed = AVATAR_SEEDS[commentAvatarSeedIdx % AVATAR_SEEDS.length];

  const handleChangeAvatar = useCallback(() => {
    setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
  }, []);

  const fetchComments = useCallback(async (page: number, append = false) => {
    setCommentsLoading(true);
    try {
      const res = await getVideoComments(videoId, page, 20);
      const sorted = [...res.items].sort(
        (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
      );
      setComments(prev => append ? [...prev, ...sorted] : sorted);
      setCommentsTotal(res.total);
      setCommentsHasNext(res.has_next);
      setCommentsPage(page);
    } catch (err) {
      console.error('Failed to fetch comments:', err);
    } finally {
      setCommentsLoading(false);
    }
  }, [videoId]);

  useEffect(() => {
    const fetchVideo = async () => {
      setLoading(true);
      setError(null);
      try {
        const data = await getVideoById(videoId);
        setVideo(data);
        setLikeCount(data.like_count);
        setIsLiked(data.is_liked_by_me);
      } catch (err) {
        console.error('Failed to fetch video:', err);
        setError(t('ado2Contents.loadFailed'));
      } finally {
        setLoading(false);
      }
    };

    fetchVideo();
    fetchComments(1);
  }, [videoId, fetchComments]);

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
  };

  const formatCommentDate = (dateString: string) => {
    const date = new Date(dateString);
    return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
  };

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

  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: video?.store_name ?? 'ADO2 영상',
          description: `${video?.region ?? ''} · ADO2 AI 마케팅 영상`,
          imageUrl: 'https://demo.castad.net/favicon_48.svg',
          link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
        },
        buttons: [{ title: '영상 보기', 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 shareMenuRef = React.useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!shareMenuOpen) return;
    const handleClickOutside = (e: MouseEvent) => {
      if (shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node)) {
        setShareMenuOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [shareMenuOpen]);

  const likeDebounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleLike = () => {
    if (!authed) { setShowLoginModal(true); return; }

    // 1. UI 즉시 업데이트 (Optimistic)
    setIsLiked(prev => !prev);
    setLikeCount(prev => isLiked ? prev - 1 : prev + 1);

    // 2. 기존 debounce 타이머 취소 후 재설정
    if (likeDebounceRef.current) clearTimeout(likeDebounceRef.current);
    likeDebounceRef.current = setTimeout(async () => {
      const prevLiked = isLiked;
      const prevCount = likeCount;
      try {
        await toggleVideoLike(videoId);
      } catch (err) {
        // 3. 실패 시 롤백
        console.error('Failed to toggle like:', err);
        setIsLiked(prevLiked);
        setLikeCount(prevCount);
      }
    }, 500);
  };

  const handleHeaderAction = () => {
    if (!isModal && !authed) { setShowLoginModal(true); return; }
    onClose?.();
  };

  const handleCommentFocus = () => {
    if (!authed) setShowLoginModal(true);
  };

  const handleCommentSubmit = async () => {
    if (!authed) { setShowLoginModal(true); return; }
    if (!commentInput.trim() || commentSubmitting) return;
    setCommentSubmitting(true);
    try {
      await postVideoComment(videoId, commentInput.trim(), commentNickname);
      setCommentInput('');
      if (commentTextareaRef.current) {
        commentTextareaRef.current.style.height = 'auto';
      }
      setCommentNickname('');
      setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
      await fetchComments(1);
    } catch (err) {
      console.error('Failed to post comment:', err);
    } finally {
      setCommentSubmitting(false);
    }
  };

  const handleDeleteComment = async (commentId: number) => {
    try {
      await deleteComment(commentId);
      await fetchComments(commentsPage);
    } catch (err) {
      console.error('Failed to delete comment:', err);
    }
  };

  const renderCommentContent = (content: string | null, isDeleted: boolean) => {
    if (isDeleted) return <span style={{ color: '#6B9EA0', fontStyle: 'italic' }}>(삭제된 댓글입니다.)</span>;
    return content;
  };

  return (
    <div className={isModal ? 'video-detail-modal-content' : 'video-detail-page-content'}>
      {/* 헤더 */}
      <div className="video-detail-header">
        {isModal ? (
          <button className="video-detail-close-btn" onClick={handleHeaderAction} aria-label="닫기">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        ) : (
          <button className="video-detail-back-btn" onClick={handleHeaderAction}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M13 4l-6 6 6 6"/>
            </svg>
            {t('sidebar.ado2Contents')}
          </button>
        )}
      </div>

      {loading ? (
        <div className="ado2-contents-loading">
          <div className="loading-spinner"></div>
          <p>{t('ado2Contents.loading')}</p>
        </div>
      ) : error ? (
        <div className="ado2-contents-error"><p>{error}</p></div>
      ) : video ? (
        <div className={`video-detail-content ${isLandscape ? 'landscape' : ''}`}>
          <video
            src={video.result_movie_url}
            controls
            autoPlay
            controlsList="nodownload"
            onContextMenu={(e) => e.preventDefault()}
            className="video-detail-player"
            onLoadedMetadata={(e) => {
              const v = e.currentTarget;
              setIsLandscape(v.videoWidth > v.videoHeight);
            }}
          />

          <div className="video-detail-info">
            <h2 className="video-detail-store">{video.store_name}</h2>
            <p className="video-detail-date">{formatDate(video.created_at)}</p>

            {/* 좋아요 + 링크 복사 */}
            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
              <button
                className={`video-detail-like-btn ${isLiked ? 'liked' : ''}`}
                onClick={handleLike}
                disabled={false}
              >
                <svg width="16" height="16" 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>
              <div style={{ position: 'relative' }} ref={shareMenuRef}>
                <button
                  className="video-detail-copy-btn"
                  onClick={() => setShareMenuOpen(v => !v)}
                >
                  <svg width="16" height="16" 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>
                  {copied ? '복사됨!' : '공유하기'}
                </button>
                {shareMenuOpen && (
                  <div className="video-detail-share-menu">
                    {/* 카카오톡 */}
                    <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>
                      카카오톡
                    </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>
                      페이스북
                    </button>
                    {/* X (트위터) */}
                    <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>
                      X (트위터)
                    </button>
                    {/* URL 복사 */}
                    <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 ? '복사됨!' : 'URL 복사'}
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* 댓글 섹션 */}
            <div className="video-detail-comments">
              <div className="video-detail-comments-header">
                <h3 className="video-detail-comments-title">댓글</h3>
                <span className="video-detail-comments-count">{commentsTotal}</span>
              </div>

              {/* 댓글 작성자 프로필 선택 */}
              {authed && (
                <div className="video-detail-comment-profile">
                  <img
                    src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
                    alt="아바타 변경"
                    className="video-detail-comment-avatar"
                    onClick={handleChangeAvatar}
                    style={{ cursor: 'pointer' }}
                    title="클릭하여 아바타 변경"
                  />
                  <input
                    className="video-detail-nickname-input"
                    type="text"
                    placeholder="작성자 이름"
                    value={commentNickname}
                    onChange={(e) => setCommentNickname(e.target.value)}
                    maxLength={20}
                  />
                </div>
              )}

              <div className="video-detail-comment-input-wrap">
                <textarea
                  ref={commentTextareaRef}
                  className="video-detail-comment-input"
                  placeholder={authed ? '댓글을 입력하세요...' : '로그인 후 댓글을 작성할 수 있습니다'}
                  maxLength={500}
                  rows={1}
                  value={commentInput}
                  onChange={(e) => {
                    setCommentInput(e.target.value);
                    e.target.style.height = 'auto';
                    e.target.style.height = `${e.target.scrollHeight}px`;
                  }}
                  onFocus={handleCommentFocus}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleCommentSubmit();
                    }
                  }}
                  disabled={!authed}
                />
                <button
                  className="video-detail-comment-submit"
                  onClick={handleCommentSubmit}
                  disabled={!authed || !commentInput.trim() || commentSubmitting}
                >
                  {commentSubmitting ? '작성 중' : '작성'}
                </button>
              </div>

              {comments.length === 0 && !commentsLoading ? (
                <p className="video-detail-comments-empty">아직 댓글이 없습니다.</p>
              ) : (
                <ul className="video-detail-comment-list">
                  {comments.map((c) => (
                    <li key={c.id} className="video-detail-comment-item">
                      <img
                        src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${c.id}`}
                        alt="avatar"
                        className="video-detail-comment-avatar"
                      />
                      <div className="video-detail-comment-body">
                        <span className="video-detail-comment-nickname">
                          {c.nickname || '익명'}
                        </span>
                        <p className="video-detail-comment-text">
                          {renderCommentContent(c.content, c.is_deleted)}
                        </p>
                        <div className="video-detail-comment-bottom">
                          <span className="video-detail-comment-date">{formatCommentDate(c.created_at)}</span>
                          {c.is_mine && !c.is_deleted && (
                            <button
                              className="video-detail-comment-delete"
                              onClick={() => handleDeleteComment(c.id)}
                            >
                              삭제
                            </button>
                          )}
                        </div>

                        {/* 대댓글 (읽기 전용) */}
                        {c.replies && c.replies.length > 0 && (
                          <ul className="video-detail-reply-list">
                            {c.replies.map((r) => (
                              <li key={r.id} className="video-detail-reply-item">
                                <img
                                  src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${r.id}`}
                                  alt="avatar"
                                  className="video-detail-comment-avatar small"
                                />
                                <div className="video-detail-comment-body">
                                  <span className="video-detail-comment-nickname">
                                    {r.nickname || '익명'}
                                  </span>
                                  <p className="video-detail-comment-text">
                                    {renderCommentContent(r.content, r.is_deleted)}
                                  </p>
                                  <div className="video-detail-comment-bottom">
                                    <span className="video-detail-comment-date">{formatCommentDate(r.created_at)}</span>
                                    {r.is_mine && !r.is_deleted && (
                                      <button
                                        className="video-detail-comment-delete"
                                        onClick={() => handleDeleteComment(r.id)}
                                      >
                                        삭제
                                      </button>
                                    )}
                                  </div>
                                </div>
                              </li>
                            ))}
                          </ul>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              )}

              {commentsHasNext && (
                <button
                  className="video-detail-comments-more"
                  onClick={() => fetchComments(commentsPage + 1, true)}
                  disabled={commentsLoading}
                >
                  {commentsLoading ? '불러오는 중...' : '댓글 더 보기'}
                </button>
              )}
            </div>
          </div>
        </div>
      ) : null}

      {showLoginModal && (
        <LoginPromptModal onClose={() => setShowLoginModal(false)} />
      )}
    </div>
  );
};

export default VideoDetailContent;