path: root/lib/approval-template/editor/approval-template-editor.tsx

"use client"

import * as React from "react"
import { toast } from "sonner"
import { Loader, Save, ArrowLeft, Code2, Eye } from "lucide-react"
import Link from "next/link"
import dynamic from "next/dynamic"
import type { Editor as ToastEditor } from "@toast-ui/editor"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { formatApprovalLine } from "@/lib/approval-line/utils/format"
import { getApprovalLineOptionsAction } from "@/lib/approval-line/service"

import { type ApprovalTemplate } from "@/lib/approval-template/service"
import { updateApprovalTemplateAction } from "@/lib/approval-template/service"
import { getActiveApprovalTemplateCategories, type ApprovalTemplateCategory } from "@/lib/approval-template/category-service"
import { useSession } from "next-auth/react"
import { useRouter, usePathname } from "next/navigation"

// Toast UI Editor를 dynamic import로 불러옴 (SSR 방지)
const Editor = dynamic(
  async () => {
    // CSS를 먼저 로드
    // @ts-expect-error - CSS 파일은 타입 선언이 없지만 런타임에 정상 작동
    await import("@toast-ui/editor/dist/toastui-editor.css")
    const mod = await import("@toast-ui/react-editor")
    return mod.Editor
  },
  {
    ssr: false,
    loading: () => <div className="flex items-center justify-center h-[400px] text-muted-foreground">에디터 로드 중...</div>,
  }
)

interface ApprovalTemplateEditorProps {
  templateId: string
  initialTemplate: ApprovalTemplate
  staticVariables?: Array<{ variableName: string }>
  approvalLineOptions: Array<{ id: string; name: string }>
}

export function ApprovalTemplateEditor({ templateId, initialTemplate, staticVariables = [], approvalLineOptions }: ApprovalTemplateEditorProps) {
    const { data: session } = useSession()
    const router = useRouter()
    const pathname = usePathname()
  const editorRef = React.useRef<ToastEditor | null>(null)
  const [template, setTemplate] = React.useState(initialTemplate)
  const [isSaving, startSaving] = React.useTransition()
  const [previewContent, setPreviewContent] = React.useState(initialTemplate.content)
  const [editMode, setEditMode] = React.useState<"wysiwyg" | "html">("wysiwyg")
  const [htmlSource, setHtmlSource] = React.useState(initialTemplate.content)
  const [editorKey, setEditorKey] = React.useState(0) // 에디터 재마운트를 위한 키

  // 편집기에 전달할 변수 목록
  // 템플릿(DB) 변수 + 정적(config) 변수 병합
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const dbVariables: string[] = Array.isArray((template as any).variables)
    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (template as any).variables.map((v: any) => v.variableName)
    : []

  const mergedVariables = Array.from(new Set([...dbVariables, ...staticVariables.map((v) => v.variableName)]))

  const variableOptions = mergedVariables.map((name) => ({ label: name, html: `{{${name}}}` }))

  const [form, setForm] = React.useState({
    name: template.name,
    subject: template.subject,
    description: template.description ?? "",
    category: template.category ?? "",
    approvalLineId: (template as { approvalLineId?: string | null }).approvalLineId ?? "",
  })

  const [categories, setCategories] = React.useState<ApprovalTemplateCategory[]>([])
  const [isLoadingCategories, setIsLoadingCategories] = React.useState(false)
  const [category, setCategory] = React.useState(form.category ?? "")
  const [isInitialLoad, setIsInitialLoad] = React.useState(true)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [lineOptions, setLineOptions] = React.useState(approvalLineOptions as Array<{ id: string; name: string; aplns?: any[]; category?: string | null }>)
  const [isLoadingLines, setIsLoadingLines] = React.useState(false)

  // 카테고리 목록 로드 (초기 한 번만)
  React.useEffect(() => {
    let active = true
    const loadCategories = async () => {
      setIsLoadingCategories(true)
      try {
        const data = await getActiveApprovalTemplateCategories()
        if (active) {
          setCategories(data)
          // 초기 로드 시에만 기본 카테고리 설정 (템플릿의 카테고리가 없고 카테고리가 선택되지 않은 경우)
          if (isInitialLoad && !category && data.length > 0) {
            const defaultCategory = form.category || data[0].name
            setCategory(defaultCategory)
          }
          setIsInitialLoad(false)
        }
      } catch (error) {
        console.error('카테고리 로드 실패:', error)
      } finally {
        if (active) setIsLoadingCategories(false)
      }
    }
    loadCategories()
    return () => {
      active = false
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []) // 빈 의존성 배열로 초기 한 번만 실행

  // 결재선 옵션 로드
  React.useEffect(() => {
    let active = true
    const run = async () => {
      setIsLoadingLines(true)
      const { success, data } = await getApprovalLineOptionsAction(category || undefined)
      if (active) {
        setIsLoadingLines(false)
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        if (success && data) setLineOptions(data as any)
        // 카테고리 바뀌면 결재선 선택 초기화
        setForm((prev) => ({ ...prev, category, approvalLineId: "" }))
      }
    }
    run()
    return () => {
      active = false
    }
  }, [category])

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    const { name, value } = e.target
    setForm((prev) => ({ ...prev, [name]: value }))
  }

  // 편집 모드 토글
  function toggleEditMode() {
    if (editMode === "wysiwyg") {
      // WYSIWYG → HTML: 에디터에서 HTML 가져오기
      const currentHtml = editorRef.current?.getHTML() || ""
      setHtmlSource(currentHtml)
      setEditMode("html")
    } else {
      // HTML → WYSIWYG: 에디터를 재마운트하여 수정된 HTML 반영
      setEditorKey(prev => prev + 1)
      setEditMode("wysiwyg")
    }
  }

  function handleSave() {
    startSaving(async () => {
      if (!session?.user?.id) {
        toast.error("로그인이 필요합니다")
        return
      }

      // 현재 모드에 따라 HTML 가져오기
      const content = editMode === "wysiwyg" 
        ? editorRef.current?.getHTML() || ""
        : htmlSource

      const { success, error, data } = await updateApprovalTemplateAction(templateId, {
        name: form.name,
        subject: form.subject,
        content,
        description: form.description,
        category: form.category || undefined,
        approvalLineId: form.approvalLineId ? form.approvalLineId : null,
        updatedBy: Number(session.user.id),
      })

      if (!success || error || !data) {
        toast.error(error ?? "저장에 실패했습니다")
        return
      }

      setTemplate(data)
      toast.success("저장되었습니다")

      // 저장 후 목록 페이지로 이동 (back-button.tsx 로직 참고)
      if (pathname) {
        const segments = pathname.split('/').filter(Boolean)
        const newSegments = segments.slice(0, -1) // 마지막 세그먼트(ID) 제거
        const targetPath = newSegments.length > 0 ? `/${newSegments.join('/')}` : '/'
        router.push(targetPath)
      }
    })
  }

  return (
    <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/evcp/approval/template">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div className="flex-1">
          <div className="flex items-center gap-3">
            <h1 className="text-2xl font-semibold">{template.name}</h1>
            <Badge variant="outline" className="text-xs">
              최근 수정: {new Date(template.updatedAt).toLocaleDateString("ko-KR")}
            </Badge>
            {template.category && (
              <Badge variant="secondary" className="text-xs">{template.category}</Badge>
            )}
          </div>
          <p className="text-sm text-muted-foreground">{template.description || "결재 템플릿 편집"}</p>
        </div>
        <Button onClick={handleSave} disabled={isSaving}>
          {isSaving && <Loader className="mr-2 h-4 w-4 animate-spin" />}
          <Save className="mr-2 h-4 w-4" /> 저장
        </Button>
      </div>

      <Separator />

      <Tabs 
        defaultValue="editor" 
        className="flex-1"
        onValueChange={(value) => {
          if (value === "preview") {
            const currentHtml = editMode === "wysiwyg"
              ? editorRef.current?.getHTML() || ""
              : htmlSource
            setPreviewContent(currentHtml)
          }
        }}
      >
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="editor">편집</TabsTrigger>
          <TabsTrigger value="preview">미리보기</TabsTrigger>
        </TabsList>

        <TabsContent value="editor" className="mt-4 flex flex-col gap-4">
          <Card>
            <CardHeader>
              <CardTitle>기본 정보</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">이름</label>
                  <Input name="name" value={form.name} onChange={handleChange} />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">카테고리</label>
                  <Select
                    value={category || "none"}
                    onValueChange={(value) => setCategory(value === "none" ? "" : value)}
                    disabled={isLoadingCategories}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder={isLoadingCategories ? "카테고리 로드 중..." : "카테고리를 선택하세요"} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">선택 안함</SelectItem>
                      {categories
                        .sort((a, b) => a.sortOrder - b.sortOrder)
                        .map((cat) => (
                          <SelectItem key={`category-${cat.id}`} value={cat.name}>
                            {cat.name}
                            {cat.description && (
                              <span className="text-muted-foreground ml-2">({cat.description})</span>
                            )}
                          </SelectItem>
                        ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">설명 (선택)</label>
                <Input name="description" value={form.description} onChange={handleChange} />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">제목</label>
                <Input name="subject" value={form.subject} onChange={handleChange} />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">결재선</label>
                <Select
                  value={form.approvalLineId}
                  onValueChange={(value) => setForm((prev) => ({ ...prev, approvalLineId: value }))}
                  disabled={!category || isLoadingLines}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={category ? (isLoadingLines ? "불러오는 중..." : "결재선을 선택하세요") : "카테고리를 먼저 선택하세요"} />
                  </SelectTrigger>
                  <SelectContent>
                    {lineOptions.map((opt) => {
                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
                      const label = opt.aplns ? `${opt.name} — ${formatApprovalLine(opt.aplns as any)}` : opt.name
                      return (
                        <SelectItem key={opt.id} value={opt.id}>
                          {label}
                        </SelectItem>
                      )
                    })}
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>HTML 내용</CardTitle>
                  <CardDescription>표, 이미지, 변수 등을 자유롭게 편집하세요.</CardDescription>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={toggleEditMode}
                  className="flex items-center gap-2"
                >
                  {editMode === "wysiwyg" ? (
                    <>
                      <Code2 className="h-4 w-4" />
                      HTML로 수정
                    </>
                  ) : (
                    <>
                      <Eye className="h-4 w-4" />
                      에디터로 수정
                    </>
                  )}
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {variableOptions.length > 0 && (
                <div className="mb-4 flex flex-wrap gap-2">
                  {variableOptions.map((v: { label: string; html: string }) => (
                    <Button
                      key={v.label}
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        if (editMode === "wysiwyg" && editorRef.current) {
                          editorRef.current.insertText(v.html)
                        } else if (editMode === "html") {
                          // HTML 모드에서는 텍스트 끝에 추가
                          setHtmlSource((prev) => prev + v.html)
                        }
                      }}
                    >
                      {`{{${v.label}}}`}
                    </Button>
                  ))}
                </div>
              )}
              
              {editMode === "wysiwyg" ? (
                <Editor
                  key={editorKey}
                  initialValue={htmlSource}
                  previewStyle="vertical"
                  height="500px"
                  initialEditType="wysiwyg"
                  useCommandShortcut={true}
                  hideModeSwitch={true}
                  toolbarItems={[
                    ["heading", "bold", "italic", "strike"],
                    ["hr", "quote"],
                    ["ul", "ol", "task"],
                    ["table", "link"],
                    ["code", "codeblock"],
                  ]}
                  onLoad={(editor) => {
                    editorRef.current = editor
                  }}
                />
              ) : (
                <Textarea
                  value={htmlSource}
                  onChange={(e) => setHtmlSource(e.target.value)}
                  className="font-mono text-sm min-h-[500px] resize-y"
                  placeholder="HTML 소스를 직접 편집하세요..."
                />
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="preview" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle>미리보기</CardTitle>
            </CardHeader>
            <CardContent className="border rounded-md p-4 overflow-auto bg-background">
              <div dangerouslySetInnerHTML={{ __html: previewContent }} />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}