"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 {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { 
  Save, 
  Trash2, 
  AlertTriangle, 
  Info, 
  Calendar,
  User,
  Hash,
  Copy
} from "lucide-react"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { type TemplateWithVariables } from "@/db/schema"
import { deleteTemplate, duplicateTemplate, updateTemplateAction } from "../service"
import { TEMPLATE_CATEGORY_OPTIONS, getCategoryDisplayName } from "../validations"


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

export function TemplateSettings({ template, onUpdate }: TemplateSettingsProps) {
  const router = useRouter()
  const [isLoading, setIsLoading] = React.useState(false)
  const [formData, setFormData] = React.useState({
    name: template.name,
    description: template.description || '',
    category: template.category || '',
    sampleData: JSON.stringify(template.sampleData || {}, null, 2)
  })

  // 폼 데이터 업데이트
  const updateFormData = (field: keyof typeof formData, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  // 기본 정보 저장
  const handleSaveBasicInfo = async () => {
    setIsLoading(true)
    try {
      // 샘플 데이터 JSON 파싱 검증
      let parsedSampleData = {}
      if (formData.sampleData.trim()) {
        try {
          parsedSampleData = JSON.parse(formData.sampleData)
        } catch (error) {
          toast.error('샘플 데이터 JSON 형식이 올바르지 않습니다.')
          setIsLoading(false)
          return
        }
      }

      const result = await updateTemplateAction(template.slug, {
        name: formData.name,
        description: formData.description || undefined,
        sampleData: parsedSampleData,
        updatedBy: 'current-user-id' // TODO: 실제 사용자 ID
      })

      if (result.success) {
        toast.success('템플릿 설정이 저장되었습니다.')
        onUpdate({
          ...template,
          name: formData.name,
          description: formData.description,
          sampleData: parsedSampleData,
          version: template.version + 1
        })
      } else {
        toast.error(result.error || '저장에 실패했습니다.')
      }
    } catch (error) {
      toast.error('저장 중 오류가 발생했습니다.')
    } finally {
      setIsLoading(false)
    }
  }

  // 템플릿 복제
  const handleDuplicate = async () => {
    setIsLoading(true)
    try {
      const copyName = `${template.name} (복사본)`
      const copySlug = `${template.slug}-copy-${Date.now()}`
      
      const result = await duplicateTemplate(
        template.id,
        copyName,
        copySlug,
        'current-user-id' // TODO: 실제 사용자 ID
      )

      if (result.success && result.data) {
        toast.success('템플릿이 복제되었습니다.')
        router.push(`/evcp/templates/${result.data.slug}`)
      } else {
        toast.error(result.error || '복제에 실패했습니다.')
      }
    } catch (error) {
      toast.error('복제 중 오류가 발생했습니다.')
    } finally {
      setIsLoading(false)
    }
  }

  // 템플릿 삭제
  const handleDelete = async () => {
    setIsLoading(true)
    try {
      const result = await deleteTemplate(template.id)

      if (result.success) {
        toast.success('템플릿이 삭제되었습니다.')
        router.push('/evcp/templates')
      } else {
        toast.error(result.error || '삭제에 실패했습니다.')
      }
    } catch (error) {
      toast.error('삭제 중 오류가 발생했습니다.')
    } finally {
      setIsLoading(false)
    }
  }

  // 샘플 데이터 포맷팅
  const formatSampleData = () => {
    try {
      const parsed = JSON.parse(formData.sampleData)
      const formatted = JSON.stringify(parsed, null, 2)
      updateFormData('sampleData', formatted)
      toast.success('JSON이 포맷팅되었습니다.')
    } catch (error) {
      toast.error('유효한 JSON이 아닙니다.')
    }
  }

  // 기본 샘플 데이터 생성
  const generateDefaultSampleData = () => {
    const defaultData: Record<string, any> = {}
    
    template.variables.forEach(variable => {
      switch (variable.variableType) {
        case 'string':
          defaultData[variable.variableName] = variable.defaultValue || `샘플 ${variable.variableName}`
          break
        case 'number':
          defaultData[variable.variableName] = variable.defaultValue ? parseFloat(variable.defaultValue) : 123
          break
        case 'boolean':
          defaultData[variable.variableName] = variable.defaultValue ? variable.defaultValue === 'true' : true
          break
        case 'date':
          defaultData[variable.variableName] = variable.defaultValue || new Date().toLocaleDateString('ko-KR')
          break
      }
    })

    const formatted = JSON.stringify(defaultData, null, 2)
    updateFormData('sampleData', formatted)
    toast.success('기본 샘플 데이터가 생성되었습니다.')
  }

  return (
    <div className="space-y-6">
      {/* 기본 정보 */}
      <Card>
        <CardHeader>
          <CardTitle>기본 정보</CardTitle>
          <CardDescription>
            템플릿의 기본 정보를 수정할 수 있습니다.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="name">템플릿 이름</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) => updateFormData('name', e.target.value)}
              placeholder="템플릿 이름을 입력하세요"
            />
          </div>

          <div>
            <Label htmlFor="description">설명</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => updateFormData('description', e.target.value)}
              placeholder="템플릿에 대한 설명을 입력하세요"
              className="min-h-[100px]"
            />
          </div>

          <div>
  <Label htmlFor="category">카테고리</Label>
  <Select
    value={formData.category || "none"} // 빈 문자열일 때 "none"으로 표시
    onValueChange={(value) => {
      // "none"이 선택되면 빈 문자열로 변환
      updateFormData('category', value === "none" ? "" : value)
    }}
  >
    <SelectTrigger>
      <SelectValue placeholder="카테고리를 선택하세요" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="none">카테고리 없음</SelectItem> {/* ✅ "none" 사용 */}
      {TEMPLATE_CATEGORY_OPTIONS.map((option) => (
        <SelectItem key={option.value} value={option.value}>
          {option.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
</div>

          <div className="flex justify-end">
            <Button onClick={handleSaveBasicInfo} disabled={isLoading}>
              <Save className="mr-2 h-4 w-4" />
              {isLoading ? '저장 중...' : '기본 정보 저장'}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 샘플 데이터 */}
      <Card>
        <CardHeader>
          <CardTitle>샘플 데이터</CardTitle>
          <CardDescription>
            미리보기에서 사용될 기본 샘플 데이터를 설정합니다.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={formatSampleData}
            >
              JSON 포맷팅
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={generateDefaultSampleData}
            >
              기본 데이터 생성
            </Button>
          </div>

          <div>
            <Label htmlFor="sampleData">샘플 데이터 (JSON)</Label>
            <Textarea
              id="sampleData"
              value={formData.sampleData}
              onChange={(e) => updateFormData('sampleData', e.target.value)}
              placeholder='{"userName": "홍길동", "email": "user@example.com"}'
              className="min-h-[200px] font-mono text-sm"
            />
          </div>

          <div className="bg-blue-50 p-3 rounded-lg">
            <p className="text-sm text-blue-800">
              <Info className="inline h-4 w-4 mr-1" />
              샘플 데이터는 템플릿 미리보기에서 기본값으로 사용됩니다.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 메타 정보 */}
      <Card>
        <CardHeader>
          <CardTitle>메타 정보</CardTitle>
          <CardDescription>
            템플릿의 상세 정보를 확인할 수 있습니다.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <Hash className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium">Slug:</span>
                <code className="text-sm bg-muted px-2 py-1 rounded">
                  {template.slug}
                </code>
              </div>

              <div className="flex items-center gap-2">
                <Badge variant="outline">버전 {template.version}</Badge>
                <Badge variant={template.category ? "default" : "secondary"}>
                  {getCategoryDisplayName(template.category)}
                </Badge>
              </div>

              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm">
                  생성일: {new Date(template.createdAt).toLocaleString('ko-KR')}
                </span>
              </div>

              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm">
                  수정일: {new Date(template.updatedAt).toLocaleString('ko-KR')}
                </span>
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <User className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm">
                  생성자: {template.createdBy}
                </span>
              </div>

              <div>
                <span className="text-sm font-medium">변수 개수:</span>
                <span className="ml-2 text-sm">{template.variables.length}개</span>
              </div>

              <div>
                <span className="text-sm font-medium">필수 변수:</span>
                <span className="ml-2 text-sm">
                  {template.variables.filter(v => v.isRequired).length}개
                </span>
              </div>

              <div>
                <span className="text-sm font-medium">콘텐츠 길이:</span>
                <span className="ml-2 text-sm">{template.content.length} 문자</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Separator />

      {/* 위험한 작업 */}
      <Card className="border-destructive">
        <CardHeader>
          <CardTitle className="text-destructive">위험한 작업</CardTitle>
          <CardDescription>
            다음 작업들은 신중히 수행해주세요. 일부는 되돌릴 수 없습니다.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div>
              <h4 className="font-medium">템플릿 복제</h4>
              <p className="text-sm text-muted-foreground">
                현재 템플릿을 복사하여 새로운 템플릿을 생성합니다.
              </p>
            </div>
            <Button
              variant="outline"
              onClick={handleDuplicate}
              disabled={isLoading}
            >
              <Copy className="mr-2 h-4 w-4" />
              복제
            </Button>
          </div>

          <div className="flex items-center justify-between p-4 border border-destructive rounded-lg bg-destructive/5">
            <div>
              <h4 className="font-medium text-destructive">템플릿 삭제</h4>
              <p className="text-sm text-muted-foreground">
                이 템플릿을 완전히 삭제합니다. 이 작업은 되돌릴 수 없습니다.
              </p>
            </div>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="destructive" disabled={isLoading}>
                  <Trash2 className="mr-2 h-4 w-4" />
                  삭제
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>템플릿 삭제 확인</AlertDialogTitle>
                  <AlertDialogDescription>
                    정말로 <strong>"{template.name}"</strong> 템플릿을 삭제하시겠습니까?
                    <br />
                    <br />
                    이 작업은 되돌릴 수 없으며, 다음 항목들이 함께 삭제됩니다:
                    <br />
                    • 템플릿 내용 및 설정
                    <br />
                    • 모든 변수 ({template.variables.length}개)
                    <br />
                    • 변경 이력
                    <br />
                    <br />
                    <span className="text-destructive font-medium">
                      삭제하려면 "영구 삭제"를 클릭하세요.
                    </span>
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>취소</AlertDialogCancel>
                  <AlertDialogAction
                    onClick={handleDelete}
                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    영구 삭제
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </CardContent>
      </Card>

      {/* 주의사항 */}
      <div className="bg-amber-50 border border-amber-200 p-4 rounded-lg">
        <div className="flex items-start gap-3">
          <AlertTriangle className="h-5 w-5 text-amber-600 mt-0.5" />
          <div>
            <h3 className="font-semibold text-amber-800">주의사항</h3>
            <div className="mt-2 text-sm text-amber-700 space-y-1">
              <p>• 템플릿 설정 변경 시 기존 미리보기가 무효화될 수 있습니다.</p>
              <p>• 샘플 데이터는 유효한 JSON 형식이어야 합니다.</p>
              <p>• 템플릿 삭제는 되돌릴 수 없으니 신중히 결정하세요.</p>
              <p>• 카테고리 변경 시 관련 기본 변수가 영향받을 수 있습니다.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}