// lib/project-doc-template/template-edit-sheet.tsx
"use client";

import * as React from "react";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetFooter,
} from "@/components/ui/sheet";
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 { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { toast } from "sonner";
import { updateProjectDocTemplate } from "@/lib/project-doc-templates/service";
import type { ProjectDocTemplate, DocTemplateVariable } from "@/db/schema/project-doc-templates";
import { Plus, X, Save, Loader2 } from "lucide-react";

interface TemplateEditSheetProps {
  template: ProjectDocTemplate | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

export function TemplateEditSheet({
  template,
  open,
  onOpenChange,
  onSuccess,
}: TemplateEditSheetProps) {
  const [isLoading, setIsLoading] = React.useState(false);
  const [formData, setFormData] = React.useState({
    templateName: "",
    description: "",
    variables: [] as DocTemplateVariable[],
    status: "ACTIVE",
  });

  // 템플릿 데이터 로드
  React.useEffect(() => {
    if (template && open) {
      setFormData({
        templateName: template.templateName || "",
        description: template.description || "",
        variables: template.variables || [],
        status: template.status || "ACTIVE",
      });
    }
  }, [template, open]);

  // 변수 추가
  const addVariable = () => {
    setFormData({
      ...formData,
      variables: [
        ...formData.variables,
        {
          name: "",
          displayName: "",
          type: "text",
          required: false,
          defaultValue: "",
          description: "",
        },
      ],
    });
  };

  // 변수 제거
  const removeVariable = (index: number) => {
    setFormData({
      ...formData,
      variables: formData.variables.filter((_, i) => i !== index),
    });
  };

  // 변수 업데이트
  const updateVariable = (index: number, field: string, value: any) => {
    const updatedVariables = [...formData.variables];
    updatedVariables[index] = {
      ...updatedVariables[index],
      [field]: value,
    };
    setFormData({
      ...formData,
      variables: updatedVariables,
    });
  };

  // 저장 처리
  const handleSave = async () => {
    if (!template) return;

    setIsLoading(true);
    try {
      const result = await updateProjectDocTemplate(template.id, {
        templateName: formData.templateName,
        description: formData.description,
        variables: formData.variables,
        status: formData.status,
      });

      if (result.success) {
        toast.success("템플릿이 수정되었습니다.");
        onOpenChange(false);
        onSuccess?.();
      } else {
        throw new Error(result.error);
      }
    } catch (error) {
      console.error("Failed to update template:", error);
      toast.error(error instanceof Error ? error.message : "템플릿 수정에 실패했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-[600px] sm:max-w-[600px] overflow-y-auto">
        <SheetHeader>
          <SheetTitle>템플릿 수정</SheetTitle>
          <SheetDescription>
            템플릿 정보와 변수를 수정할 수 있습니다. 파일을 변경하려면 새 버전을 생성하세요.
          </SheetDescription>
        </SheetHeader>

        <div className="space-y-6 py-6">
          {/* 기본 정보 */}
          <div className="space-y-4">
            <div>
              <Label htmlFor="templateName">템플릿 이름</Label>
              <Input
                id="templateName"
                value={formData.templateName}
                onChange={(e) => setFormData({ ...formData, templateName: e.target.value })}
                placeholder="템플릿 이름을 입력하세요"
              />
            </div>

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

            <div>
              <Label htmlFor="status">상태</Label>
              <select
                id="status"
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
              >
                <option value="ACTIVE">활성</option>
                <option value="INACTIVE">비활성</option>
                <option value="DRAFT">초안</option>
                <option value="ARCHIVED">보관</option>
              </select>
            </div>
          </div>

          {/* 변수 관리 */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <Label>템플릿 변수</Label>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={addVariable}
              >
                <Plus className="mr-2 h-4 w-4" />
                변수 추가
              </Button>
            </div>

            {/* 기본 변수 표시 */}
            <div className="mb-4 p-3 bg-muted/50 rounded-lg">
              <p className="text-xs font-medium mb-2">기본 변수 (수정 불가)</p>
              <div className="space-y-1">
                <Badge variant="secondary">document_number</Badge>
                <Badge variant="secondary" className="ml-2">project_code</Badge>
                <Badge variant="secondary" className="ml-2">project_name</Badge>
              </div>
            </div>

            {/* 사용자 정의 변수 */}
            {formData.variables.length > 0 ? (
              <div className="space-y-3">
                {formData.variables.map((variable, index) => (
                  <div key={index} className="p-3 border rounded-lg space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">변수 #{index + 1}</span>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => removeVariable(index)}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label>변수명</Label>
                        <Input
                          value={variable.name}
                          onChange={(e) => updateVariable(index, "name", e.target.value)}
                          placeholder="예: vendor_name"
                        />
                      </div>
                      <div>
                        <Label>표시명</Label>
                        <Input
                          value={variable.displayName}
                          onChange={(e) => updateVariable(index, "displayName", e.target.value)}
                          placeholder="예: 벤더명"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <Label>타입</Label>
                        <select
                          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                          value={variable.type}
                          onChange={(e) => updateVariable(index, "type", e.target.value)}
                        >
                          <option value="text">텍스트</option>
                          <option value="number">숫자</option>
                          <option value="date">날짜</option>
                          <option value="select">선택</option>
                        </select>
                      </div>
                      <div className="flex items-center justify-between rounded-lg border p-2">
                        <Label className="text-sm">필수</Label>
                        <Switch
                          checked={variable.required}
                          onCheckedChange={(checked) => updateVariable(index, "required", checked)}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>설명</Label>
                      <Input
                        value={variable.description || ""}
                        onChange={(e) => updateVariable(index, "description", e.target.value)}
                        placeholder="변수 설명 (선택사항)"
                      />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-4 text-sm text-muted-foreground">
                사용자 정의 변수가 없습니다.
              </div>
            )}
          </div>
        </div>

        <SheetFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isLoading}
          >
            취소
          </Button>
          <Button
            onClick={handleSave}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                저장 중...
              </>
            ) : (
              <>
                <Save className="mr-2 h-4 w-4" />
                저장
              </>
            )}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}