path: root/lib/email-template/editor/template-variable-manager.tsx

"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, GripVertical, Copy } from "lucide-react"
import { toast } from "sonner"
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
import { type TemplateWithVariables, type TemplateVariable } from "@/db/schema"
import { addTemplateVariableAction } from "../service"

interface TemplateVariableManagerProps {
    template: TemplateWithVariables
    onUpdate: (template: TemplateWithVariables) => void
}

interface VariableFormData {
    variableName: string
    variableType: 'string' | 'number' | 'boolean' | 'date'
    defaultValue: string
    isRequired: boolean
    description: string
}

export function TemplateVariableManager({ template, onUpdate }: TemplateVariableManagerProps) {
    const [variables, setVariables] = React.useState(template.variables)
    //   const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false)
    const [editingVariable, setEditingVariable] = React.useState<TemplateVariable | null>(null)
    const [isSubmitting, setIsSubmitting] = React.useState(false)
    const [isDialogOpen, setIsDialogOpen] = React.useState(false) // 이름 변경

    const [formData, setFormData] = React.useState<VariableFormData>({
        variableName: '',
        variableType: 'string',
        defaultValue: '',
        isRequired: false,
        description: ''
    })

    const isEditMode = editingVariable !== null

    // 폼 초기화
    const resetForm = () => {
        setFormData({
            variableName: '',
            variableType: 'string',
            defaultValue: '',
            isRequired: false,
            description: ''
        })
        setEditingVariable(null)
    }

    const handleEditVariable = (variable: TemplateVariable) => {
        setEditingVariable(variable)
        setFormData({
            variableName: variable.variableName,
            variableType: variable.variableType as any,
            defaultValue: variable.defaultValue || '',
            isRequired: variable.isRequired || false,
            description: variable.description || ''
        })
        setIsDialogOpen(true)
    }


    const handleSubmitVariable = async () => {
        if (!formData.variableName.trim()) {
            toast.error('변수명을 입력해주세요.')
            return
        }

        // 편집 모드가 아닐 때만 중복 검사
        if (!isEditMode && variables.some(v => v.variableName === formData.variableName)) {
            toast.error('이미 존재하는 변수명입니다.')
            return
        }

        // 편집 모드일 때 다른 변수와 중복되는지 검사
        if (isEditMode && variables.some(v => v.id !== editingVariable!.id && v.variableName === formData.variableName)) {
            toast.error('이미 존재하는 변수명입니다.')
            return
        }

        // 변수명 유효성 검사
        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(formData.variableName)) {
            toast.error('변수명은 영문자, 숫자, 언더스코어만 사용 가능하며 숫자로 시작할 수 없습니다.')
            return
        }

        setIsSubmitting(true)
        try {
            if (isEditMode) {
                // 편집 모드 - TODO: updateTemplateVariableAction 구현 필요
                // const result = await updateTemplateVariableAction(template.slug, editingVariable!.id, formData)

                // 임시로 클라이언트 사이드에서 업데이트
                const updatedVariables = variables.map(v =>
                    v.id === editingVariable!.id
                        ? { ...v, ...formData }
                        : v
                )
                setVariables(updatedVariables)
                onUpdate({ ...template, variables: updatedVariables })
                toast.success('변수가 수정되었습니다.')
            } else {
                // 추가 모드
                const result = await addTemplateVariableAction(template.slug, {
                    variableName: formData.variableName,
                    variableType: formData.variableType,
                    defaultValue: formData.defaultValue || undefined,
                    isRequired: formData.isRequired,
                    description: formData.description || undefined,
                })

                if (result.success) {
                    const newVariable = result.data
                    const updatedVariables = [...variables, newVariable]
                    setVariables(updatedVariables)
                    onUpdate({ ...template, variables: updatedVariables })
                    toast.success('변수가 추가되었습니다.')
                } else {
                    toast.error(result.error || '변수 추가에 실패했습니다.')
                    return
                }
            }

            setIsDialogOpen(false)
            resetForm()
        } catch (error) {
            toast.error(`변수 ${isEditMode ? '수정' : '추가'} 중 오류가 발생했습니다.`)
        } finally {
            setIsSubmitting(false)
        }
    }

    // Dialog 닫기 처리
    const handleDialogClose = (open: boolean) => {
        setIsDialogOpen(open)
        if (!open) {
            resetForm()
        }
    }

    // 변수 추가
    // const handleAddVariable = async () => {
    //     if (!formData.variableName.trim()) {
    //         toast.error('변수명을 입력해주세요.')
    //         return
    //     }

    //     // 변수명 중복 검사
    //     if (variables.some(v => v.variableName === formData.variableName)) {
    //         toast.error('이미 존재하는 변수명입니다.')
    //         return
    //     }

    //     // 변수명 유효성 검사
    //     if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(formData.variableName)) {
    //         toast.error('변수명은 영문자, 숫자, 언더스코어만 사용 가능하며 숫자로 시작할 수 없습니다.')
    //         return
    //     }

    //     setIsSubmitting(true)
    //     try {
    //         const result = await addTemplateVariableAction(template.slug, {
    //             variableName: formData.variableName,
    //             variableType: formData.variableType,
    //             defaultValue: formData.defaultValue || undefined,
    //             isRequired: formData.isRequired,
    //             description: formData.description || undefined,
    //         })

    //         if (result.success) {
    //             const newVariable = result.data
    //             const updatedVariables = [...variables, newVariable]
    //             setVariables(updatedVariables)
    //             onUpdate({ ...template, variables: updatedVariables })

    //             toast.success('변수가 추가되었습니다.')
    //             setIsAddDialogOpen(false)
    //             resetForm()
    //         } else {
    //             toast.error(result.error || '변수 추가에 실패했습니다.')
    //         }
    //     } catch (error) {
    //         toast.error('변수 추가 중 오류가 발생했습니다.')
    //     } finally {
    //         setIsSubmitting(false)
    //     }
    // }

    // 변수 순서 변경
    const handleDragEnd = (result: any) => {
        if (!result.destination) return

        const items = Array.from(variables)
        const [reorderedItem] = items.splice(result.source.index, 1)
        items.splice(result.destination.index, 0, reorderedItem)

        // displayOrder 업데이트
        const updatedItems = items.map((item, index) => ({
            ...item,
            displayOrder: index
        }))

        setVariables(updatedItems)
        onUpdate({ ...template, variables: updatedItems })

        // TODO: 서버에 순서 변경 요청
        toast.success('변수 순서가 변경되었습니다.')
    }

    // 변수 복사
    const handleCopyVariable = (variable: TemplateVariable) => {
        const copyName = `${variable.variableName}_copy`
        setFormData({
            variableName: copyName,
            variableType: variable.variableType as any,
            defaultValue: variable.defaultValue || '',
            isRequired: variable.isRequired || false,
            description: variable.description || ''
        })
        setIsDialogOpen(true)
    }

    // 변수 삭제
    const handleDeleteVariable = async (variableId: string) => {
        // TODO: 서버에서 변수 삭제 구현
        const updatedVariables = variables.filter(v => v.id !== variableId)
        setVariables(updatedVariables)
        onUpdate({ ...template, variables: updatedVariables })
        toast.success('변수가 삭제되었습니다.')
    }

    // 변수 타입에 따른 기본값 예시
    const getDefaultValuePlaceholder = (type: string) => {
        switch (type) {
            case 'string': return '예: 홍길동'
            case 'number': return '예: 123'
            case 'boolean': return 'true 또는 false'
            case 'date': return '예: 2025-01-01'
            default: return ''
        }
    }

    // 변수 타입별 아이콘
    const getVariableTypeIcon = (type: string) => {
        switch (type) {
            case 'string': return '📝'
            case 'number': return '🔢'
            case 'boolean': return '✅'
            case 'date': return '📅'
            default: return '❓'
        }
    }

    return (
        <div className="space-y-6">
            {/* 헤더 */}
            <div className="flex items-center justify-between">
                <div>
                    {/* <h3 className="text-lg font-semibold">변수 관리</h3> */}
                    <p className="text-sm text-muted-foreground">
                        총 {variables.length}개의 변수가 등록되어 있습니다.
                    </p>
                </div>

                <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
                    <DialogTrigger asChild>
                        <Button onClick={() => { resetForm(); setIsDialogOpen(true) }}>
                            <Plus className="mr-2 h-4 w-4" />
                            변수 추가
                        </Button>
                    </DialogTrigger>
                    <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                            <DialogTitle>
                                {isEditMode ? '변수 수정' : '새 변수 추가'}
                            </DialogTitle>
                            <DialogDescription>
                                {isEditMode
                                    ? '기존 변수의 정보를 수정합니다.'
                                    : '템플릿에서 사용할 새로운 변수를 추가합니다.'
                                }
                            </DialogDescription>
                        </DialogHeader>

                        <div className="space-y-4">
                            <div>
                                <Label htmlFor="variableName">변수명</Label>
                                <Input
                                    id="variableName"
                                    value={formData.variableName}
                                    onChange={(e) => setFormData(prev => ({ ...prev, variableName: e.target.value }))}
                                    placeholder="예: userName, orderDate"
                                />
                            </div>

                            <div>
                                <Label htmlFor="variableType">타입</Label>
                                <Select
                                    value={formData.variableType}
                                    onValueChange={(value) => setFormData(prev => ({ ...prev, variableType: value as any }))}
                                >
                                    <SelectTrigger>
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="string">📝 문자열</SelectItem>
                                        <SelectItem value="number">🔢 숫자</SelectItem>
                                        <SelectItem value="boolean">✅ 불린</SelectItem>
                                        <SelectItem value="date">📅 날짜</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            <div>
                                <Label htmlFor="defaultValue">기본값</Label>
                                <Input
                                    id="defaultValue"
                                    value={formData.defaultValue}
                                    onChange={(e) => setFormData(prev => ({ ...prev, defaultValue: e.target.value }))}
                                    placeholder={getDefaultValuePlaceholder(formData.variableType)}
                                />
                            </div>

                            <div>
                                <Label htmlFor="description">설명</Label>
                                <Textarea
                                    id="description"
                                    value={formData.description}
                                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                                    placeholder="변수에 대한 설명을 입력하세요"
                                    className="min-h-[80px]"
                                />
                            </div>

                            <div className="flex items-center space-x-2">
                                <Checkbox
                                    id="isRequired"
                                    checked={formData.isRequired}
                                    onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isRequired: !!checked }))}
                                />
                                <Label htmlFor="isRequired">필수 변수</Label>
                            </div>
                        </div>

                        <DialogFooter>
                            <Button
                                variant="outline"
                                onClick={() => handleDialogClose(false)}
                            >
                                취소
                            </Button>
                            <Button
                                onClick={handleSubmitVariable}
                                disabled={isSubmitting}
                            >
                                {isSubmitting
                                    ? `${isEditMode ? '수정' : '추가'} 중...`
                                    : isEditMode ? '수정' : '추가'
                                }
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            </div>

            {/* 변수 목록 */}
            {variables.length === 0 ? (
                <div className="text-center py-12 border border-dashed rounded-lg">
                    <div className="text-muted-foreground">
                        <Plus className="h-12 w-12 mx-auto mb-4 opacity-50" />
                        <p className="text-lg font-medium">등록된 변수가 없습니다</p>
                        <p className="text-sm">첫 번째 변수를 추가해보세요.</p>
                    </div>
                </div>
            ) : (
                <DragDropContext onDragEnd={handleDragEnd}>
                    <Droppable droppableId="variables">
                        {(provided) => (
                            <div
                                {...provided.droppableProps}
                                ref={provided.innerRef}
                                className="border rounded-lg"
                            >
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead className="w-10"></TableHead>
                                            <TableHead>변수명</TableHead>
                                            <TableHead>타입</TableHead>
                                            <TableHead>기본값</TableHead>
                                            <TableHead>필수</TableHead>
                                            <TableHead>설명</TableHead>
                                            <TableHead className="w-24">작업</TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {variables.map((variable, index) => (
                                            <Draggable
                                                key={variable.id}
                                                draggableId={variable.id}
                                                index={index}
                                            >
                                                {(provided, snapshot) => (
                                                    <TableRow
                                                        ref={provided.innerRef}
                                                        {...provided.draggableProps}
                                                        className={snapshot.isDragging ? 'bg-muted' : ''}
                                                    >
                                                        <TableCell>
                                                            <div
                                                                {...provided.dragHandleProps}
                                                                className="cursor-grab hover:cursor-grabbing"
                                                            >
                                                                <GripVertical className="h-4 w-4 text-muted-foreground" />
                                                            </div>
                                                        </TableCell>
                                                        <TableCell>
                                                            <div className="font-mono text-sm">
                                                                {variable.variableName}
                                                            </div>
                                                        </TableCell>
                                                        <TableCell>
                                                            <Badge variant="outline" className="gap-1">
                                                                {getVariableTypeIcon(variable.variableType)}
                                                                {variable.variableType}
                                                            </Badge>
                                                        </TableCell>
                                                        <TableCell>
                                                            <div className="text-sm text-muted-foreground max-w-[100px] truncate">
                                                                {variable.defaultValue || '-'}
                                                            </div>
                                                        </TableCell>
                                                        <TableCell>
                                                            {variable.isRequired ? (
                                                                <Badge variant="destructive" className="text-xs">필수</Badge>
                                                            ) : (
                                                                <Badge variant="secondary" className="text-xs">선택</Badge>
                                                            )}
                                                        </TableCell>
                                                        <TableCell>
                                                            <div className="text-sm text-muted-foreground max-w-[200px] truncate">
                                                                {variable.description || '-'}
                                                            </div>
                                                        </TableCell>
                                                        <TableCell>
                                                            <div className="flex items-center gap-1">
                                                                <Button
                                                                    variant="ghost"
                                                                    size="icon"
                                                                    className="h-8 w-8"
                                                                    onClick={() => handleCopyVariable(variable)}
                                                                >
                                                                    <Copy className="h-3 w-3" />
                                                                </Button>
                                                                <Button
                                                                    variant="ghost"
                                                                    size="icon"
                                                                    className="h-8 w-8"
                                                                    onClick={() => handleEditVariable(variable)}
                                                                >
                                                                    <Edit className="h-3 w-3" />
                                                                </Button>
                                                                <AlertDialog>
                                                                    <AlertDialogTrigger asChild>
                                                                        <Button
                                                                            variant="ghost"
                                                                            size="icon"
                                                                            className="h-8 w-8 text-destructive hover:text-destructive"
                                                                        >
                                                                            <Trash2 className="h-3 w-3" />
                                                                        </Button>
                                                                    </AlertDialogTrigger>
                                                                    <AlertDialogContent>
                                                                        <AlertDialogHeader>
                                                                            <AlertDialogTitle>변수 삭제</AlertDialogTitle>
                                                                            <AlertDialogDescription>
                                                                                정말로 '{variable.variableName}' 변수를 삭제하시겠습니까?
                                                                                이 작업은 되돌릴 수 없습니다.
                                                                            </AlertDialogDescription>
                                                                        </AlertDialogHeader>
                                                                        <AlertDialogFooter>
                                                                            <AlertDialogCancel>취소</AlertDialogCancel>
                                                                            <AlertDialogAction
                                                                                onClick={() => handleDeleteVariable(variable.id)}
                                                                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                                                            >
                                                                                삭제
                                                                            </AlertDialogAction>
                                                                        </AlertDialogFooter>
                                                                    </AlertDialogContent>
                                                                </AlertDialog>
                                                            </div>
                                                        </TableCell>
                                                    </TableRow>
                                                )}
                                            </Draggable>
                                        ))}
                                        {provided.placeholder}
                                    </TableBody>
                                </Table>
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
            )}

            {/* 도움말 */}
            <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-medium text-blue-900 mb-2">변수 사용법</h4>
                <div className="text-sm text-blue-800 space-y-1">
                    <p>• 템플릿에서 <code className="bg-blue-100 px-1 rounded">{`{{variableName}}`}</code> 형태로 사용</p>
                    <p>• 드래그 앤 드롭으로 변수 순서 변경 가능</p>
                    <p>• 필수 변수는 반드시 값이 제공되어야 함</p>
                    <p>• 변수명은 영문자, 숫자, 언더스코어만 사용 가능</p>
                </div>
            </div>
        </div>
    )
}