"use client"

import * as React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"

import { Eye, Copy, Check, Settings2 } from "lucide-react"
import { toast } from "sonner"
import { cn } from "@/lib/utils"

import { type GtcClauseTreeView } from "@/db/schema/gtc"

interface ViewClauseVariablesDialogProps
  extends React.ComponentPropsWithRef<typeof Dialog> {
  clause: GtcClauseTreeView | null
  onEditVariables?: () => void
}

export function ViewClauseVariablesDialog({ 
  clause, 
  onEditVariables,
  ...props 
}: ViewClauseVariablesDialogProps) {
  const [copiedField, setCopiedField] = React.useState<string | null>(null)

  const copyToClipboard = async (text: string, fieldName: string) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopiedField(fieldName)
      toast.success(`${fieldName} 변수명이 복사되었습니다.`)
      
      // 2초 후 복사 상태 초기화
      setTimeout(() => {
        setCopiedField(null)
      }, 2000)
    } catch (error) {
      toast.error("복사 중 오류가 발생했습니다.")
    }
  }

  const copyAllVariables = async () => {
    if (!clause) return
    
    const allVariables = [
      clause.autoNumberVariable,
      clause.autoSubtitleVariable, 
      clause.autoContentVariable
    ].filter(Boolean).join('\n')
    
    try {
      await navigator.clipboard.writeText(allVariables)
      toast.success("모든 변수명이 복사되었습니다.")
    } catch (error) {
      toast.error("복사 중 오류가 발생했습니다.")
    }
  }

  if (!clause) {
    return null
  }

  const variables = [
    {
      label: "채번 변수명",
      value: clause.autoNumberVariable,
      fieldName: "채번",
      description: "조항 번호를 표시하는 변수"
    },
    {
      label: "소제목 변수명", 
      value: clause.autoSubtitleVariable,
      fieldName: "소제목",
      description: "조항 제목을 표시하는 변수"
    },
    {
      label: "상세항목 변수명",
      value: clause.autoContentVariable, 
      fieldName: "상세항목",
      description: "조항 내용을 표시하는 변수"
    }
  ]

  return (
    <Dialog {...props}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Eye className="h-5 w-5" />
            PDFTron 변수명 보기
          </DialogTitle>
          <DialogDescription>
            현재 조항에 설정된 PDFTron 변수명을 확인하고 복사할 수 있습니다.
          </DialogDescription>
        </DialogHeader>

        {/* 조항 정보 */}
        <div className="p-3 bg-muted/50 rounded-lg">
          <div className="font-medium mb-2">조항 정보</div>
          <div className="space-y-1 text-sm text-muted-foreground">
            <div className="flex items-center gap-2">
              <Badge variant="outline">{clause.itemNumber}</Badge>
              <span>{clause.subtitle}</span>
              <Badge variant={clause.hasAllVariableNames ? "default" : "destructive"}>
                {clause.hasAllVariableNames ? "설정됨" : "미설정"}
              </Badge>
            </div>
            {clause.fullPath && (
              <div>경로: {clause.fullPath}</div>
            )}
            {clause.category && (
              <div>분류: {clause.category}</div>
            )}
          </div>
        </div>

        {/* 변수명 목록 */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium">설정된 변수명</h3>
            <Button
              variant="outline"
              size="sm"
              onClick={copyAllVariables}
              className="h-8"
            >
              <Copy className="mr-2 h-3 w-3" />
              전체 복사
            </Button>
          </div>

          <div className="space-y-3">
            {variables.map((variable, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-sm font-medium">{variable.label}</div>
                    <div className="text-xs text-muted-foreground">{variable.description}</div>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => copyToClipboard(variable.value, variable.fieldName)}
                    className="h-8 px-2"
                  >
                    {copiedField === variable.fieldName ? (
                      <Check className="h-3 w-3 text-green-500" />
                    ) : (
                      <Copy className="h-3 w-3" />
                    )}
                  </Button>
                </div>
                <div className="relative">
                  <Input
                    value={variable.value}
                    readOnly
                    className="font-mono text-xs bg-muted/30"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* PDFTron 템플릿 미리보기 */}
        <div className="space-y-2">
          <h3 className="text-sm font-medium">PDFTron 템플릿 미리보기</h3>
          <div className="p-3 bg-gray-50 border rounded-lg">
            <div className="space-y-2 text-xs font-mono">
              <div className="text-blue-600">
                {"{{" + clause.autoNumberVariable + "}}"}. {"{{" + clause.autoSubtitleVariable + "}}"}
              </div>
              <div className="text-gray-600 ml-4">
                {"{{" + clause.autoContentVariable + "}}"}
              </div>
            </div>
            <div className="text-xs text-muted-foreground mt-2">
              실제 문서에서 위와 같은 형태로 표시됩니다.
            </div>
          </div>
        </div>

        {/* 실제 값 미리보기 */}
        <div className="space-y-2">
          <h3 className="text-sm font-medium">실제 값 미리보기</h3>
          <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <div className="space-y-2 text-sm">
              <div className="font-medium text-blue-900">
                {clause.itemNumber}. {clause.subtitle}
              </div>
              {clause.content && (
                <div className="text-blue-800 ml-4">
                  {clause.content.length > 150 
                    ? `${clause.content.substring(0, 150)}...`
                    : clause.content
                  }
                </div>
              )}
              {!clause.content && (
                <div className="text-blue-600 ml-4 italic">
                  (그룹핑 조항 - 상세내용 없음)
                </div>
              )}
            </div>
          </div>
        </div>

        <DialogFooter>
          {onEditVariables && (
            <Button
              variant="outline"
              onClick={() => {
                props.onOpenChange?.(false)
                onEditVariables()
              }}
            >
              <Settings2 className="mr-2 h-4 w-4" />
              변수 설정 수정
            </Button>
          )}
          <Button
            onClick={() => props.onOpenChange?.(false)}
          >
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}