// lib/project-doc-template/template-detail-dialog.tsx
"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ProjectDocTemplateEditor } from "./project-doc-template-editor";
import { getProjectDocTemplateById } from "@/lib/project-doc-templates/service";
import type { ProjectDocTemplate } from "@/db/schema/project-doc-templates";
import { formatDateTime } from "@/lib/utils";
import { FileText, Clock, User, GitBranch, Variable } from "lucide-react";

interface TemplateDetailDialogProps {
  template: ProjectDocTemplate;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function TemplateDetailDialog({
  template,
  open,
  onOpenChange,
}: TemplateDetailDialogProps) {
  const [templateDetail, setTemplateDetail] = React.useState<any>(null);
  const [isLoading, setIsLoading] = React.useState(true);

  // 템플릿 상세 정보 로드
  React.useEffect(() => {
    if (open && template.id) {
      setIsLoading(true);
      getProjectDocTemplateById(template.id)
        .then(setTemplateDetail)
        .catch(console.error)
        .finally(() => setIsLoading(false));
    }
  }, [open, template.id]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-7xl h-[90vh] p-0 flex flex-col">
        <DialogHeader className="px-6 py-4 border-b">
          <DialogTitle className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              {template.templateName}
            </div>
            <div className="flex gap-2">
              <Badge variant="outline">v{template.version}</Badge>
              {template.isLatest && <Badge variant="default">최신</Badge>}
              <Badge variant="secondary">{template.status}</Badge>
            </div>
          </DialogTitle>
        </DialogHeader>

        <Tabs defaultValue="viewer" className="flex-1 flex flex-col">
          <TabsList className="mx-6 mt-2">
            <TabsTrigger value="viewer">문서 보기</TabsTrigger>
            <TabsTrigger value="history">버전 히스토리</TabsTrigger>
          </TabsList>

          <TabsContent value="viewer" className="flex-1 mt-0">
            <div className="h-full">
              <ProjectDocTemplateEditor
                templateId={template.id}
                filePath={template.filePath}
                fileName={template.fileName}
                // mode="view" // 읽기 전용 모드
              />
            </div>
          </TabsContent>


          <TabsContent value="history" className="flex-1 overflow-y-auto px-6">
            <div className="space-y-4 py-4">
              {templateDetail?.versionHistory && templateDetail.versionHistory.length > 0 ? (
                templateDetail.versionHistory.map((version: any) => (
                  <Card key={version.id} className={version.id === template.id ? "border-primary" : ""}>
                    <CardHeader>
                      <CardTitle className="text-base flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <GitBranch className="h-4 w-4" />
                          버전 {version.version}
                        </div>
                        <div className="flex gap-2">
                          {version.isLatest && <Badge variant="default">최신</Badge>}
                          {version.id === template.id && <Badge variant="secondary">현재</Badge>}
                        </div>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="text-sm space-y-1">
                        <p>
                          <span className="text-muted-foreground">생성일:</span> {formatDateTime(version.createdAt, "KR")}
                        </p>
                        <p>
                          <span className="text-muted-foreground">생성자:</span> {version.createdByName || '-'}
                        </p>
                        <p>
                          <span className="text-muted-foreground">파일:</span> {version.fileName}
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                ))
              ) : (
                <p className="text-sm text-muted-foreground">버전 히스토리가 없습니다.</p>
              )}
            </div>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}