"use client"

import React from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Loader2, MessageSquare } from "lucide-react"
import { toast } from "sonner"
import { useSession } from "next-auth/react"
import { addDocumentComment } from "./document-stages-service"
import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils"

interface DocumentCommentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  documentId: number
  docNumber: string
  currentComment: string | null
}

export function DocumentCommentDialog({
  open,
  onOpenChange,
  documentId,
  docNumber,
  currentComment,
}: DocumentCommentDialogProps) {
  const [newComment, setNewComment] = React.useState("")
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const { data: session } = useSession()
  const router = useRouter()

  // 기존 코멘트를 줄 단위로 파싱
  const existingComments = React.useMemo(() => {
    if (!currentComment) return []
    return currentComment.split('\n').filter(line => line.trim() !== '')
  }, [currentComment])

  const handleSubmit = async () => {
    if (!newComment.trim()) {
      toast.error("코멘트 내용을 입력해주세요.")
      return
    }

    if (!session?.user?.name || !session?.user?.email) {
      toast.error("사용자 정보를 가져올 수 없습니다.")
      return
    }

    setIsSubmitting(true)
    try {
      const result = await addDocumentComment({
        documentId,
        newComment: newComment.trim(),
        userInfo: {
          name: session.user.name,
          email: session.user.email,
        },
      })

      if (result.success) {
        toast.success("코멘트가 추가되었습니다.")
        setNewComment("")
        onOpenChange(false)
        router.refresh()
      } else {
        toast.error(result.error || "코멘트 추가 중 오류가 발생했습니다.")
      }
    } catch (error) {
      console.error("Error adding comment:", error)
      toast.error("코멘트 추가 중 오류가 발생했습니다.")
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleClose = () => {
    if (!isSubmitting) {
      setNewComment("")
      onOpenChange(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[600px] max-h-[80vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            Document Comment
          </DialogTitle>
          <DialogDescription>
            문서번호: <span className="font-mono font-medium">{docNumber}</span>
          </DialogDescription>
        </DialogHeader>

        <div className="flex-1 flex flex-col gap-4 min-h-0">
          {/* 기존 코멘트 표시 영역 (읽기 전용) */}
          <div className="space-y-2">
            <Label className="text-sm font-medium">기존 코멘트</Label>
            <ScrollArea className="h-[200px] w-full rounded-md border p-4 bg-gray-50 dark:bg-gray-900">
              {existingComments.length > 0 ? (
                <div className="space-y-2">
                  {existingComments.map((comment, index) => (
                    <div
                      key={index}
                      className={cn(
                        "text-sm p-2 rounded",
                        index % 2 === 0
                          ? "bg-white dark:bg-gray-800"
                          : "bg-gray-100 dark:bg-gray-850"
                      )}
                    >
                      {comment}
                    </div>
                  ))}
                </div>
              ) : (
                <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
                  기존 코멘트가 없습니다.
                </div>
              )}
            </ScrollArea>
          </div>

          {/* 새 코멘트 입력 영역 */}
          <div className="space-y-2">
            <Label htmlFor="new-comment" className="text-sm font-medium">
              새 코멘트 추가
            </Label>
            <Textarea
              id="new-comment"
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="새로운 코멘트를 입력하세요..."
              rows={4}
              className="resize-none"
              disabled={isSubmitting}
            />
            <p className="text-xs text-muted-foreground">
              작성자 정보와 함께 코멘트가 추가됩니다: [{session?.user?.name}·{session?.user?.email}]
            </p>
          </div>
        </div>

        <DialogFooter className="flex-shrink-0">
          <Button
            variant="outline"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            닫기
          </Button>
          <Button
            onClick={handleSubmit}
            disabled={isSubmitting || !newComment.trim()}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                추가 중...
              </>
            ) : (
              "코멘트 추가"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}