"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, Loader2,Eye, EyeIcon } from "lucide-react"
import { getPageInformationDirect, getEditPermissionDirect } from "@/lib/information/service"
import { getPageNotices } from "@/lib/notice/service"
import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog"
import { NoticeViewDialog } from "@/components/notice/notice-view-dialog"
// import { PDFTronViewerDialog } from "@/components/document-viewer/pdftron-viewer-dialog" // 주석 처리 - 브라우저 내장 뷰어 사용
import type { PageInformation, InformationAttachment } from "@/db/schema/information"

type PageInformationWithUpdatedBy = PageInformation & {
  updatedByName?: string | null
  updatedByEmail?: string | null
}
import type { Notice } from "@/db/schema/notice"
import { useSession } from "next-auth/react"
import { formatDate } from "@/lib/utils"
import prettyBytes from "pretty-bytes"
// downloadFile은 동적으로 import

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<PageInformationWithUpdatedBy & { attachments: InformationAttachment[] } | 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 [isLoading, setIsLoading] = useState(false)
  const [retryCount, setRetryCount] = useState(0)
  // const [viewerDialogOpen, setViewerDialogOpen] = useState(false) // 주석 처리 - 브라우저 내장 뷰어 사용
  // const [selectedFile, setSelectedFile] = useState<InformationAttachment | null>(null) // 주석 처리 - 브라우저 내장 뷰어 사용

  // 데이터 로드 함수
  const loadData = React.useCallback(async () => {
    if (dataLoaded) return
    
    setIsLoading(true)
    try {
      // 경로 정규화 - 더 안전한 방식
      let normalizedPath = pagePath
      if (normalizedPath.startsWith('/')) {
        normalizedPath = normalizedPath.slice(1)
      }
      // 빈 문자열이면 기본값 설정
      if (!normalizedPath) {
        normalizedPath = 'home'
      }
      
      // 약간의 지연 추가 (프로덕션에서 DB 연결 안정성)
      if (retryCount > 0) {
        await new Promise(resolve => setTimeout(resolve, 500 * retryCount))
      }
      
      // 순차적으로 데이터 조회 (프로덕션 안정성)
      const infoResult = await getPageInformationDirect(normalizedPath)
      const noticesResult = await getPageNotices(normalizedPath)
      
      setInformation(infoResult)
      setNotices(noticesResult)
      setDataLoaded(true)
      setRetryCount(0) // 성공시 재시도 횟수 리셋
      
      // 권한 확인 - 세션이 확실히 있을 때만
      if (session?.user?.id && infoResult) {
        try {
          const hasPermission = await getEditPermissionDirect(normalizedPath, session.user.id)
          setHasEditPermission(hasPermission)
        } catch (permError) {
          setHasEditPermission(false)
        }
      }
    } catch (error) {
      // 재시도 로직
      if (retryCount < 2) {
        setRetryCount(prev => prev + 1)
        setIsLoading(false)
        return
      }
      
      // 최대 재시도 후 기본값 설정
      setInformation(null)
      setNotices([])
      setHasEditPermission(false)
      setDataLoaded(true)
      setRetryCount(0)
    } finally {
      setIsLoading(false)
    }
  }, [pagePath, session?.user?.id, dataLoaded, retryCount])

  // 세션이 준비되면 자동으로 데이터 로드
  React.useEffect(() => {
    if (isOpen && !dataLoaded && session !== undefined) {
      loadData()
    }
  }, [isOpen, dataLoaded, session])

  // 재시도 처리
  React.useEffect(() => {
    if (retryCount > 0 && retryCount <= 2) {
      const timer = setTimeout(() => {
        setDataLoaded(false) // 재시도를 위해 리셋
      }, 500 * retryCount)
      return () => clearTimeout(timer)
    }
  }, [retryCount])

  // 다이얼로그 열기
  const handleDialogOpen = (open: boolean) => {
    setIsOpen(open)
    // useEffect에서 데이터 로딩 처리하므로 여기서는 제거
  }

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

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

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

  // 파일 확장자 확인 함수
  const getFileExtension = (fileName: string): string => {
    return fileName.split('.').pop()?.toLowerCase() || ''
  }

  // 뷰어 지원 파일 형식 확인
  const isViewerSupported = (fileName: string): boolean => {
    const extension = getFileExtension(fileName)
    return ['pdf', 'docx', 'doc'].includes(extension)
  }

  // 파일 클릭 핸들러 (뷰어 또는 다운로드)
  const handleFileClick = async (attachment: InformationAttachment) => {
    if (isViewerSupported(attachment.fileName)) {
      // PDF/DOCX 파일은 브라우저 내장 뷰어로 열기
      // 동적으로 quickPreview 함수 import
      const { quickPreview } = await import('@/lib/file-download')
      await quickPreview(attachment.filePath, attachment.fileName)
    } else {
      // 기타 파일은 다운로드
      await handleDownload(attachment)
    }
  }

  // 파일 다운로드 핸들러
  const handleDownload = async (attachment: InformationAttachment) => {
    try {
      // 동적으로 downloadFile 함수 import
      const { downloadFile } = await import('@/lib/file-download')
      
      await downloadFile(
        attachment.filePath,
        attachment.fileName,
        {
          action: 'download',
          showToast: true,
          showSuccessToast: true
        }
      )
    } catch (error) {
      console.error('파일 다운로드 실패:', error)
    }
  }




  
  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></DialogTitle>
                </div>
              </div>
            </div>
          </DialogHeader>
          
          <div className="mt-4">
            {isLoading ? (
              <div className="flex items-center justify-center py-12">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                <span className="ml-2 text-muted-foreground">정보를 불러오는 중...</span>
              </div>
            ) : (
              <div className="space-y-6">
                {/* 공지사항 섹션 */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <h4 className="font-semibold">공지사항</h4>
                    {notices.length > 0 && (
                      <span className="text-xs text-muted-foreground">{notices.length}개</span>
                    )}
                  </div>
                  {notices.length > 0 ? (
                    <div className="max-h-60 overflow-y-auto border rounded-lg bg-muted/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-muted/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-muted-foreground">
                                <span>{formatDate(notice.createdAt, "KR")}</span>
                                {notice.authorName && (
                                  <span>{notice.authorName}</span>
                                )}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="bg-muted/50 border rounded-lg p-4">
                      <div className="text-center text-muted-foreground">
                        공지사항이 없습니다
                      </div>
                    </div>
                  )}
                </div>

                {/* 안내사항 컨텐츠 */}
                <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-muted/50 border rounded-lg p-4">
                    {information?.informationContent ? (
                      <div className="space-y-3">
                        <div className="text-sm text-muted-foreground whitespace-pre-wrap max-h-40 overflow-y-auto">
                          {information.informationContent}
                        </div>
                        <div className="flex items-center justify-between text-xs text-muted-foreground border-t pt-2">
                          <div className="flex items-center gap-4">
                            <span>
                              <strong>수정자:</strong> {information.updatedByName || '시스템'}
                            </span>
                            <span>
                              <strong>수정일:</strong> {formatDate(information.updatedAt, "KR")}
                            </span>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="text-center text-muted-foreground">
                        안내사항이 없습니다
                      </div>
                    )}
                  </div>
                </div>

                {/* 첨부파일 */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <h4 className="font-semibold">첨부파일</h4>
                    {information?.attachments && information.attachments.length > 0 && (
                      <span className="text-xs text-muted-foreground">{information.attachments.length}개</span>
                    )}
                  </div>
                  <div className="bg-muted/50 border rounded-lg p-4">
                    {information?.attachments && information.attachments.length > 0 ? (
                      <div className="space-y-3">
                        {information.attachments.map((attachment) => (
                          <div 
                            key={attachment.id} 
                            className="flex items-center justify-between p-3 bg-white rounded border"
                          >
                            <div 
                              className="flex-1"
                            >
                              <div className="text-sm font-medium flex items-center gap-2">
                                {attachment.fileName}
                              
                              </div>
                              {attachment.fileSize && (
                                <div className="text-xs text-muted-foreground mt-1">
                                  {prettyBytes(Number(attachment.fileSize))}
                                </div>
                              )}
                            </div>
                            <div className="flex gap-2">
                              {isViewerSupported(attachment.fileName) && (
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => handleFileClick(attachment)}
                                  className="flex items-center gap-1"
                                >
                                  <EyeIcon className="h-3 w-3" />
                                  미리보기
                                </Button>
                              )}
                            <Button
                              size="sm"
                              variant="outline"
                              
                              onClick={() => handleDownload(attachment)}
                              className="flex items-center gap-1"
                            >
                              <Download className="h-3 w-3" />
                              다운로드
                            </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="text-center text-muted-foreground">
                        첨부파일이 없습니다
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

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

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

      {/* PDFTron 뷰어 다이얼로그 - 주석 처리 (브라우저 내장 뷰어 사용) */}
      {/* <PDFTronViewerDialog
        open={viewerDialogOpen}
        onOpenChange={setViewerDialogOpen}
        fileUrl={selectedFile?.filePath}
        fileName={selectedFile?.fileName}
      /> */}
    </>
  )
}