"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 } 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 [isLoading, setIsLoading] = useState(false)

  // 데이터 로드 함수 (단순화)
  const loadData = React.useCallback(async () => {
    if (dataLoaded) return // 이미 로드되었으면 중복 방지
    
    setIsLoading(true)
    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)
    } finally {
      setIsLoading(false)
    }
  }, [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">
            {isLoading ? (
              <div className="flex items-center justify-center py-12">
                <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
                <span className="ml-2 text-gray-500">정보를 불러오는 중...</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-gray-500">{notices.length}개</span>
                    )}
                  </div>
                  {notices.length > 0 ? (
                    <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, "KR")}</span>
                                {notice.authorName && (
                                  <span>{notice.authorName}</span>
                                )}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="bg-gray-50 border rounded-lg p-4">
                      <div className="text-center text-gray-500">
                        공지사항이 없습니다
                      </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-gray-50 border rounded-lg p-4">
                    {information?.informationContent ? (
                      <div className="text-sm text-gray-600 whitespace-pre-wrap max-h-40 overflow-y-auto">
                        {information.informationContent}
                      </div>
                    ) : (
                      <div className="text-center text-gray-500">
                        안내사항이 없습니다
                      </div>
                    )}
                  </div>
                </div>

                {/* 첨부파일 */}
                <div className="space-y-3">
                  <h4 className="font-semibold">첨부파일</h4>
                  <div className="bg-gray-50 border rounded-lg p-4">
                    {information?.attachmentFileName ? (
                      <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 className="text-center text-gray-500">
                        첨부파일이 없습니다
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

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

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