"use client"

import React, { useState, useEffect } from "react"
import { Info, Download, Edit } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { getCachedPageInformation, getCachedEditPermission } from "@/lib/information/service"
import { UpdateInformationDialog } from "@/lib/information/table/update-information-dialog"
import type { PageInformation } from "@/db/schema/information"
import { useSession } from "next-auth/react"

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

export function InformationButton({ 
  pageCode, 
  className,
  variant = "ghost",
  size = "icon"
}: InformationButtonProps) {
  const { data: session } = useSession()
  const [information, setInformation] = useState<PageInformation | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [isOpen, setIsOpen] = useState(false)
  const [hasEditPermission, setHasEditPermission] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)

  useEffect(() => {
    if (isOpen && !information) {
      loadInformation()
    }
  }, [isOpen, information])

  // 편집 권한 확인
  useEffect(() => {
    const checkEditPermission = async () => {
      if (session?.user?.id) {
        try {
          const permission = await getCachedEditPermission(pageCode, session.user.id)
          setHasEditPermission(permission)
        } catch (error) {
          console.error("Failed to check edit permission:", error)
          setHasEditPermission(false)
        }
      }
    }
    
    checkEditPermission()
  }, [pageCode, session?.user?.id])

  const loadInformation = async () => {
    setIsLoading(true)
    try {
      const data = await getCachedPageInformation(pageCode)
      setInformation(data)
    } catch (error) {
      console.error("Failed to load information:", error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleDownload = () => {
    if (information?.attachmentFilePath && information?.attachmentFileName) {
      const link = document.createElement('a')
      link.href = information.attachmentFilePath
      link.download = information.attachmentFileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }

  const handleEditClick = () => {
    setIsEditDialogOpen(true)
  }

  const handleEditClose = () => {
    setIsEditDialogOpen(false)
    refreshInformation()
  }

  const refreshInformation = () => {
    // 편집 후 정보 다시 로드
    setInformation(null)
    if (isOpen) {
      loadInformation()
    }
    // 캐시 무효화를 위해 다시 확인
    setTimeout(() => {
      loadInformation()
    }, 500)
  }

  // 인포메이션이 없으면 버튼을 숨김
  const [hasInformation, setHasInformation] = useState<boolean | null>(null)

  useEffect(() => {
    const checkInformation = async () => {
      try {
        const data = await getCachedPageInformation(pageCode)
        setHasInformation(!!data)
      } catch {
        setHasInformation(false)
      }
    }
    checkInformation()
  }, [pageCode])

  // 인포메이션이 없으면 버튼을 숨김
  if (hasInformation === false) {
    return null
  }

  return (
    <>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <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">
                {/* <Info className="h-5 w-5" /> */}
                <div>
                  <DialogTitle>{information?.title || "페이지 정보"}</DialogTitle>
                  <DialogDescription>{information?.pageName}</DialogDescription>
                </div>
              </div>
              {hasEditPermission && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleEditClick}
                  className="flex items-center gap-2 mr-2"
                >
                  <Edit className="h-4 w-4" />
                  편집
                </Button>
              )}
            </div>
          </DialogHeader>
          
          <div className="mt-4 space-y-6">
            {isLoading ? (
              <div className="flex items-center justify-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
              </div>
            ) : information ? (
              <>
                {/* 공지사항 */}
                {(information.noticeTitle || information.noticeContent) && (
                  <div className="space-y-4">
                    <div className="flex items-center gap-2">
                      <h4 className="font-semibold text-xl">공지사항</h4>
                    </div>
                    <div className="bg-blue-50 border-2 border-blue-200 rounded-xl p-6">
                      {information.noticeTitle && (
                        <div className="text-base font-semibold  mb-4">
                          제목: {information.noticeTitle}
                        </div>
                      )}
                      {information.noticeContent && (
                        <div className="bg-white border-2 border-blue-200 rounded-lg p-4 max-h-48 overflow-y-auto">
                          <div className="text-base  whitespace-pre-wrap leading-relaxed">
                            {information.noticeContent}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}

                {/* 페이지 정보 */}
                <div className="space-y-3">
                  <h4 className="font-medium text-lg">도움말</h4>
                  <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.description || "페이지 설명이 없습니다."}
                    </div>
                  </div>
                </div>

                {/* 첨부파일 */}
                <div className="space-y-3">
                  <h4 className="font-medium text-lg">첨부파일</h4>
                  {information.attachmentFileName ? (
                    <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 className="text-center py-6 text-gray-500 bg-gray-50 rounded-lg">
                      <Download className="h-6 w-6 mx-auto mb-2 text-gray-400" />
                      <p className="text-sm">첨부된 파일이 없습니다.</p>
                    </div>
                  )}
                </div>
              </>
            ) : (
              <div className="text-center py-8 text-gray-500">
                이 페이지에 대한 정보가 없습니다.
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

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