'use client';

/**
 * 게시글 상세 보기 컴포넌트
 *
 * 디자인 스펙 기준:
 * - 페이지 타이틀: 게시글 상세
 * - 페이지 설명: 게시글을 조회합니다.
 * - 삭제/수정 버튼 (본인 글만 표시)
 * - 게시판명 라벨
 * - 제목
 * - 메타 정보 (작성자 | 날짜 | 조회수)
 * - 내용 (HTML 렌더링)
 * - 첨부파일 다운로드 링크
 * - 댓글 섹션 (댓글 사용함 설정 시만 표시)
 */

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { format } from 'date-fns';
import { FileText, Download, ArrowLeft } from 'lucide-react';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Card,
  CardContent,
  CardHeader,
} from '@/components/ui/card';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { CommentSection } from '../CommentSection';
import type { Post, Comment } from '../types';

interface BoardDetailProps {
  post: Post;
  comments: Comment[];
  currentUserId: string;
}

export function BoardDetail({ post, comments: initialComments, currentUserId }: BoardDetailProps) {
  const router = useRouter();
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [comments, setComments] = useState<Comment[]>(initialComments);

  const isMyPost = post.authorId === currentUserId;

  // ===== 액션 핸들러 =====
  const handleBack = useCallback(() => {
    router.push('/ko/board');
  }, [router]);

  const handleEdit = useCallback(() => {
    router.push(`/ko/board/${post.id}/edit`);
  }, [router, post.id]);

  const handleConfirmDelete = useCallback(() => {
    // TODO: API 호출
    console.log('Delete post:', post.id);
    setShowDeleteDialog(false);
    router.push('/ko/board');
  }, [post.id, router]);

  // ===== 댓글 핸들러 =====
  const handleAddComment = useCallback((content: string) => {
    const newComment: Comment = {
      id: `comment-${Date.now()}`,
      postId: post.id,
      authorId: currentUserId,
      authorName: '홍길동', // 실제로는 사용자 정보에서 가져옴
      authorDepartment: '개발팀',
      authorPosition: '과장',
      content,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };
    setComments((prev) => [...prev, newComment]);
    // TODO: API 호출
  }, [post.id, currentUserId]);

  const handleUpdateComment = useCallback((id: string, content: string) => {
    setComments((prev) =>
      prev.map((c) =>
        c.id === id ? { ...c, content, updatedAt: new Date().toISOString() } : c
      )
    );
    // TODO: API 호출
  }, []);

  const handleDeleteComment = useCallback((id: string) => {
    setComments((prev) => prev.filter((c) => c.id !== id));
    // TODO: API 호출
  }, []);

  // 파일 크기 포맷
  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  return (
    <PageLayout>
      {/* 헤더 */}
      <PageHeader
        title="게시글 상세"
        description="게시글을 조회합니다."
        icon={FileText}
        actions={
          <div className="flex gap-2">
            <Button variant="outline" onClick={handleBack}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              목록
            </Button>
            {isMyPost && (
              <>
                <Button
                  variant="outline"
                  className="text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
                  onClick={() => setShowDeleteDialog(true)}
                >
                  삭제
                </Button>
                <Button onClick={handleEdit}>수정</Button>
              </>
            )}
          </div>
        }
      />

      {/* 게시글 카드 */}
      <Card className="mb-6">
        <CardHeader className="pb-4">
          {/* 게시판명 라벨 */}
          <Badge variant="secondary" className="w-fit mb-2">
            {post.boardName}
          </Badge>

          {/* 제목 */}
          <h2 className="text-xl font-bold text-gray-900">{post.title}</h2>

          {/* 메타 정보: 작성자 | 날짜 | 조회수 */}
          <div className="flex items-center gap-2 text-sm text-gray-500 mt-2">
            <span>{post.authorName}</span>
            <span className="text-gray-300">|</span>
            <span>{format(new Date(post.createdAt), 'yyyy-MM-dd HH:mm')}</span>
            <span className="text-gray-300">|</span>
            <span>조회수 {post.viewCount}</span>
          </div>
        </CardHeader>

        <CardContent className="space-y-6">
          {/* 내용 (HTML 렌더링) */}
          <div
            className="prose prose-sm max-w-none"
            dangerouslySetInnerHTML={{ __html: post.content }}
          />

          {/* 첨부파일 */}
          {post.attachments.length > 0 && (
            <div className="space-y-2 pt-4 border-t border-gray-100">
              {post.attachments.map((file) => (
                <a
                  key={file.id}
                  href={file.fileUrl}
                  download={file.fileName}
                  className="flex items-center gap-2 p-2 bg-gray-50 rounded-md hover:bg-gray-100 transition-colors"
                >
                  <Download className="h-4 w-4 text-gray-500" />
                  <span className="text-sm text-blue-600 hover:underline">
                    {file.fileName}
                  </span>
                  <span className="text-xs text-gray-400">
                    ({formatFileSize(file.fileSize)})
                  </span>
                </a>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 댓글 섹션 (댓글 사용함 설정 시만 표시) */}
      {post.allowComments && (
        <CommentSection
          postId={post.id}
          comments={comments}
          currentUserId={currentUserId}
          onAddComment={handleAddComment}
          onUpdateComment={handleUpdateComment}
          onDeleteComment={handleDeleteComment}
        />
      )}

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>게시글 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              정말 삭제하시겠습니까?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleConfirmDelete}
              className="bg-red-600 hover:bg-red-700"
            >
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </PageLayout>
  );
}

export default BoardDetail;