/**
 * 템플릿 상세 보기
 * 
 * 디자인시스템관리 -> 템플릿 클릭 시 전체 페이지로 상세 정보 표시
 */

import { ArrowLeft, Code, Copy, Check, Edit, Trash2 } from "lucide-react";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "./ui/card";
import { Badge } from "./ui/badge";
import { Separator } from "./ui/separator";
import { useState } from "react";
import { toast } from "sonner@2.0.3";

interface TemplateDetailViewProps {
  template: {
    name: string;
    path: string;
    category: string;
    description: string;
    structure?: string;
    preview: string;
    code: string;
  };
  onBack: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
}

export function TemplateDetailView({ template, onBack, onEdit, onDelete }: TemplateDetailViewProps) {
  const [copiedCode, setCopiedCode] = useState(false);

  const handleCopyCode = () => {
    navigator.clipboard.writeText(template.code);
    setCopiedCode(true);
    toast.success("코드가 복사되었습니다");
    setTimeout(() => setCopiedCode(false), 2000);
  };

  return (
    <div className="flex-1 overflow-auto bg-gray-50">
      {/* 헤더 */}
      <div className="bg-white border-b border-border p-6 sticky top-0 z-10">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="sm" onClick={onBack}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              뒤로 가기
            </Button>
            <Separator orientation="vertical" className="h-6" />
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-semibold">{template.name}</h1>
                <Badge variant="outline">{template.category}</Badge>
              </div>
              <p className="text-sm text-muted-foreground mt-1">{template.description}</p>
            </div>
          </div>
          {(onEdit || onDelete) && (
            <div className="flex gap-2">
              {onEdit && (
                <Button variant="outline" size="sm" onClick={onEdit}>
                  <Edit className="h-4 w-4 mr-2" />
                  수정
                </Button>
              )}
              {onDelete && (
                <Button variant="destructive" size="sm" onClick={onDelete}>
                  <Trash2 className="h-4 w-4 mr-2" />
                  삭제
                </Button>
              )}
            </div>
          )}
        </div>
      </div>

      <div className="p-6 space-y-6 max-w-7xl mx-auto">
        {/* 기본 정보 */}
        <Card>
          <CardHeader>
            <CardTitle>기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium text-muted-foreground">템플릿 이름</label>
                <p className="mt-1">{template.name}</p>
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">카테고리</label>
                <p className="mt-1">{template.category}</p>
              </div>
              <div className="col-span-2">
                <label className="text-sm font-medium text-muted-foreground">파일 경로</label>
                <p className="mt-1">
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">{template.path}</code>
                </p>
              </div>
              {template.structure && (
                <div className="col-span-2">
                  <label className="text-sm font-medium text-muted-foreground">구조</label>
                  <p className="mt-1 text-sm">{template.structure}</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* 미리보기 */}
        <Card>
          <CardHeader>
            <CardTitle>미리보기</CardTitle>
            <CardDescription>템플릿의 시각적 구조를 확인할 수 있습니다</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="bg-white rounded-lg border border-border p-6">
              <div className="whitespace-pre-wrap text-sm text-muted-foreground">
                {template.preview || "미리보기 정보가 없습니다"}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 사용 예제 코드 */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>사용 예제</CardTitle>
                <CardDescription>이 템플릿을 사용하는 방법</CardDescription>
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={handleCopyCode}
              >
                {copiedCode ? (
                  <Check className="w-4 h-4 mr-2 text-green-600" />
                ) : (
                  <Copy className="w-4 h-4 mr-2" />
                )}
                {copiedCode ? "복사됨" : "코드 복사"}
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
              <pre className="text-sm">
                <code>{template.code}</code>
              </pre>
            </div>
          </CardContent>
        </Card>

        {/* 사용 가이드 */}
        <Card>
          <CardHeader>
            <CardTitle>사용 가이드</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="text-sm">
              <h4 className="font-medium mb-2">📋 적용 방법</h4>
              <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
                <li>위의 예제 코드를 복사합니다</li>
                <li>새 페이지 컴포넌트를 생성합니다</li>
                <li>필요한 props와 데이터를 준비합니다</li>
                <li>템플릿을 import하고 props를 전달합니다</li>
              </ol>
            </div>
            <Separator />
            <div className="text-sm">
              <h4 className="font-medium mb-2">⚠️ 주의사항</h4>
              <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
                <li>템플릿의 구조를 변경하지 마세요</li>
                <li>필수 props는 반드시 전달해야 합니다</li>
                <li>스타일 커스터마이징은 className prop을 사용하세요</li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
