path: root/components/information/information-button.tsx

"use client"

import * as React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Info, Download, Edit } from "lucide-react"
import { getCachedPageInformation, getCachedEditPermission } from "@/lib/information/service"
import { getCachedPageNotices } from "@/lib/notice/service"
import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog"
import { NoticeViewDialog } from "@/components/notice/notice-view-dialog"
import type { PageInformation } from "@/db/schema/information"
import type { Notice } from "@/db/schema/notice"
import { useSession } from "next-auth/react"
import { formatDate } from "@/lib/utils"

interface InformationButtonProps {
  pagePath: string
  className?: string
  variant?: "default" | "outline" | "ghost" | "secondary"
  size?: "default" | "sm" | "lg" | "icon"
}

type NoticeWithAuthor = Notice & {
  authorName: string | null
  authorEmail: string | null
}

export function InformationButton({ 
  pagePath, 
  className,
  variant = "ghost",
  size = "icon"
}: InformationButtonProps) {
  const { data: session } = useSession()
  const [isOpen, setIsOpen] = useState(false)
  const [information, setInformation] = useState<PageInformation | null>(null)
  const [notices, setNotices] = useState<NoticeWithAuthor[]>([])
  const [hasEditPermission, setHasEditPermission] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [selectedNotice, setSelectedNotice] = useState<NoticeWithAuthor | null>(null)
  const [isNoticeViewDialogOpen, setIsNoticeViewDialogOpen] = useState(false)
  const [dataLoaded, setDataLoaded] = useState(false)

  // 데이터 로드 함수 (단순화)
  const loadData = React.useCallback(async () => {
    if (dataLoaded) return // 이미 로드되었으면 중복 방지
    
    try {
      // pagePath 정규화 (앞의 / 제거)
      const normalizedPath = pagePath.startsWith('/') ? pagePath.slice(1) : pagePath
      
      // 병렬로 데이터 조회
      const [infoResult, noticesResult] = await Promise.all([
        getCachedPageInformation(normalizedPath),
        getCachedPageNotices(normalizedPath)
      ])
      
      setInformation(infoResult)
      setNotices(noticesResult)
      setDataLoaded(true)
      
      // 권한 확인
      if (session?.user?.id) {
        const hasPermission = await getCachedEditPermission(normalizedPath, session.user.id)
        setHasEditPermission(hasPermission)
      }
    } catch (error) {
      console.error("데이터 로딩 중 오류:", error)
    }
  }, [pagePath, session?.user?.id, dataLoaded])

  // 다이얼로그 열기
  const handleDialogOpen = (open: boolean) => {
    setIsOpen(open)
    
    if (open && !dataLoaded) {
      loadData()
    }
  }

  // 편집 관련 핸들러
  const handleEditClick = () => {
    setIsEditDialogOpen(true)
  }

  const handleEditSuccess = () => {
    setIsEditDialogOpen(false)
    // 편집 후 데이터 다시 로드
    setDataLoaded(false)
    loadData()
  }

  // 공지사항 클릭 핸들러
  const handleNoticeClick = (notice: NoticeWithAuthor) => {
    setSelectedNotice(notice)
    setIsNoticeViewDialogOpen(true)
  }

  // 파일 다운로드 핸들러
  const handleDownload = () => {
    if (information?.attachmentFilePath) {
      window.open(information.attachmentFilePath, '_blank')
    }
  }




  
  return (
    <>
      <Dialog open={isOpen} onOpenChange={handleDialogOpen}>
        <DialogTrigger asChild>
          <Button 
            variant={variant} 
            size={size} 
            className={className}
            title="인포메이션"
          >
            <Info className="h-4 w-4" />
            {size !== "icon" && <span className="ml-1">정보</span>}
          </Button>
        </DialogTrigger>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div>
                  <DialogTitle>{information?.pageName}</DialogTitle>
                </div>
              </div>
            </div>
          </DialogHeader>
          
          <div className="mt-4 space-y-6">
            {/* 공지사항 섹션 */}
            {notices.length > 0 && (
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="font-semibold">공지사항</h4>
                  <span className="text-xs text-gray-500">{notices.length}개</span>
                </div>
                <div className="max-h-60 overflow-y-auto border rounded-lg bg-gray-50 p-2">
                  <div className="space-y-2">
                    {notices.map((notice) => (
                      <div
                        key={notice.id}
                        className="p-3 bg-white border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
                        onClick={() => handleNoticeClick(notice)}
                      >
                        <div className="space-y-1">
                          <h5 className="font-medium text-sm line-clamp-2">
                            {notice.title}
                          </h5>
                          <div className="flex items-center gap-3 text-xs text-gray-500">
                            <span>{formatDate(notice.createdAt)}</span>
                            {notice.authorName && (
                              <span>{notice.authorName}</span>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* 인포메이션 컨텐츠 */}
            {information?.informationContent && (
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                <h4 className="font-semibold">안내사항</h4>
                {hasEditPermission && information && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleEditClick}
                  className="flex items-center gap-2 mr-2"
                >
                  <Edit className="h-4 w-4" />
                  편집
                </Button>
              )}
              </div>
                <div className="bg-gray-50 border rounded-lg p-4">
                  <div className="text-sm text-gray-600 whitespace-pre-wrap max-h-40 overflow-y-auto">
                    {information.informationContent}
                  </div>
                </div>
              </div>
            )}

            {/* 첨부파일 */}
            {information?.attachmentFileName && (
              <div className="space-y-3">
                <h4 className="font-semibold">첨부파일</h4>
                <div className="bg-gray-50 border rounded-lg p-4">
                  <div className="flex items-center justify-between p-3 bg-white rounded border">
                    <div className="flex-1">
                      <div className="text-sm font-medium">
                        {information.attachmentFileName}
                      </div>
                      {information.attachmentFileSize && (
                        <div className="text-xs text-gray-500 mt-1">
                          {information.attachmentFileSize}
                        </div>
                      )}
                    </div>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={handleDownload}
                      className="flex items-center gap-1"
                    >
                      <Download className="h-3 w-3" />
                      다운로드
                    </Button>
                  </div>
                </div>
              </div>
            )}

            {!information && notices.length === 0 && (
              <div className="text-center py-8 text-gray-500">
                <p>이 페이지에 대한 정보가 없습니다.</p>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

      {/* 공지사항 보기 다이얼로그 */}
      <NoticeViewDialog
        open={isNoticeViewDialogOpen}
        onOpenChange={setIsNoticeViewDialogOpen}
        notice={selectedNotice}
      />

      {/* 편집 다이얼로그 */}
      {information && (
        <UpdateInformationDialog
          open={isEditDialogOpen}
          onOpenChange={setIsEditDialogOpen}
          information={information}
          onSuccess={handleEditSuccess}
        />
      )}
    </>
  )
}