import { useState, useEffect } from 'react'
import { useAuthStore } from '@common/store/authStore'
import { fetchBoardPost, type BoardPostDetail } from '../services/boardApi'

// 카테고리 코드 → 표시명
const CATEGORY_LABELS: Record<string, string> = {
  NOTICE: '공지사항',
  DATA: '자료실',
  QNA: 'Q&A',
  MANUAL: '해경매뉴얼',
}

// 카테고리별 배지 색상
const CATEGORY_COLORS: Record<string, string> = {
  NOTICE: 'bg-red-500/20 text-red-400',
  DATA: 'bg-green-500/20 text-green-400',
  QNA: 'bg-purple-500/20 text-purple-400',
  MANUAL: 'bg-blue-500/20 text-blue-400',
}

interface BoardDetailViewProps {
  postSn: number
  onBack: () => void
  onEdit: () => void
  onDelete: () => void
}

export function BoardDetailView({ postSn, onBack, onEdit, onDelete }: BoardDetailViewProps) {
  const user = useAuthStore((s) => s.user)
  const [post, setPost] = useState<BoardPostDetail | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    const load = async () => {
      setIsLoading(true)
      try {
        const data = await fetchBoardPost(postSn)
        if (!cancelled) setPost(data)
      } catch {
        if (!cancelled) {
          alert('게시글을 불러오는데 실패했습니다.')
          onBack()
        }
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }
    load()
    return () => { cancelled = true }
  }, [postSn, onBack])

  if (isLoading || !post) {
    return (
      <div className="flex flex-col h-full bg-bg-0 items-center justify-center">
        <p className="text-text-3 text-sm">게시글을 불러오는 중...</p>
      </div>
    )
  }

  // 본인 게시글 여부
  const isAuthor = user?.id === post.authorId

  return (
    <div className="flex flex-col h-full bg-bg-0">
      {/* 헤더 */}
      <div className="flex items-center justify-between px-8 py-4 border-b border-border bg-bg-1">
        <button
          onClick={onBack}
          className="flex items-center gap-2 text-sm font-semibold text-text-2 hover:text-text-1 transition-colors"
        >
          <span>←</span>
          <span>목록으로</span>
        </button>
        {isAuthor && (
          <div className="flex items-center gap-2">
            <button
              onClick={onEdit}
              className="px-4 py-2 text-sm font-semibold rounded bg-bg-2 text-text-1 border border-border hover:bg-bg-3 transition-colors"
            >
              수정
            </button>
            <button
              onClick={onDelete}
              className="px-4 py-2 text-sm font-semibold rounded bg-red-500/20 text-red-400 border border-red-500/30 hover:bg-red-500/30 transition-colors"
            >
              삭제
            </button>
          </div>
        )}
      </div>

      {/* 게시글 내용 */}
      <div className="flex-1 overflow-auto">
        <div className="max-w-4xl mx-auto px-8 py-8">
          {/* 게시글 헤더 */}
          <div className="pb-6 border-b border-border">
            <div className="flex items-center gap-3 mb-3">
              <span className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-semibold ${CATEGORY_COLORS[post.categoryCd] || 'bg-blue-500/20 text-blue-400'}`}>
                {CATEGORY_LABELS[post.categoryCd] || post.categoryCd}
              </span>
              {post.pinnedYn === 'Y' && (
                <span className="inline-flex items-center px-2.5 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">
                  📌 고정
                </span>
              )}
            </div>
            <h1 className="text-2xl font-bold text-text-1 mb-4">{post.title}</h1>
            <div className="flex items-center gap-4 text-sm text-text-3">
              <span>작성자: <span className="text-text-2 font-semibold">{post.authorName}</span></span>
              <span>|</span>
              <span>작성일: {new Date(post.regDtm).toLocaleDateString('ko-KR')}</span>
              <span>|</span>
              <span>조회수: {post.viewCnt}</span>
              {post.mdfcnDtm && (
                <>
                  <span>|</span>
                  <span>수정일: {new Date(post.mdfcnDtm).toLocaleDateString('ko-KR')}</span>
                </>
              )}
            </div>
          </div>

          {/* 본문 */}
          <div className="py-8">
            <div className="prose prose-invert max-w-none">
              <div className="text-text-1 text-[15px] leading-relaxed whitespace-pre-wrap">
                {post.content || '(내용 없음)'}
              </div>
            </div>
          </div>

          {/* 댓글 섹션 (향후 구현 예정) */}
          <div className="py-6 border-t border-border">
            <div className="text-center py-8">
              <p className="text-text-3 text-sm">댓글 기능은 향후 업데이트 예정입니다.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
