"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { Search, Plus, Download, Upload, Trash2, Eye, Edit, FileText } from "lucide-react";
import { ScreenTemplate, LayoutData, ScreenDefinition } from "@/types/screen";
import { templateApi } from "@/lib/api/screen";
import { useAuth } from "@/hooks/useAuth";

interface TemplateManagerProps {
  selectedScreen: ScreenDefinition | null;
  onBackToList: () => void;
  onTemplateSelect?: (template: ScreenTemplate) => void;
  onTemplateApply?: (template: ScreenTemplate) => void;
  className?: string;
}

export default function TemplateManager({
  selectedScreen,
  onBackToList,
  onTemplateSelect,
  onTemplateApply,
  className,
}: TemplateManagerProps) {
  const { user } = useAuth();
  const [templates, setTemplates] = useState<ScreenTemplate[]>([]);
  const [selectedTemplate, setSelectedTemplate] = useState<ScreenTemplate | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [activeTab, setActiveTab] = useState("my");

  // 템플릿 목록 조회
  useEffect(() => {
    const fetchTemplates = async () => {
      try {
        setIsLoading(true);
        const templateList = await templateApi.getTemplates({
          companyCode: user?.company_code || "*",
        });
        setTemplates(templateList);
      } catch (error) {
        console.error("템플릿 목록 조회 실패:", error);
        // API 호출 실패 시 기본 템플릿 목록 사용
        const fallbackTemplates: ScreenTemplate[] = [
          {
            templateId: 1,
            templateName: "기본 CRUD 화면",
            templateType: "CRUD",
            companyCode: "*",
            description: "기본적인 CRUD 기능을 제공하는 화면 템플릿",
            layoutData: {
              components: [
                {
                  id: "search-container",
                  type: "container",
                  position: { x: 0, y: 0 },
                  size: { width: 12, height: 100 },
                  title: "검색 영역",
                  children: [],
                },
                {
                  id: "table-container",
                  type: "container",
                  position: { x: 0, y: 1 },
                  size: { width: 12, height: 300 },
                  title: "데이터 테이블",
                  children: [],
                },
                {
                  id: "form-container",
                  type: "container",
                  position: { x: 0, y: 2 },
                  size: { width: 12, height: 200 },
                  title: "입력 폼",
                  children: [],
                },
              ],
              gridSettings: { columns: 12, gap: 16, padding: 16 },
            },
            isPublic: true,
            createdBy: "admin",
            createdDate: new Date(),
          },
          {
            templateId: 2,
            templateName: "목록 화면",
            templateType: "LIST",
            companyCode: "*",
            description: "데이터 목록을 표시하는 화면 템플릿",
            layoutData: {
              components: [
                {
                  id: "filter-container",
                  type: "container",
                  position: { x: 0, y: 0 },
                  size: { width: 12, height: 80 },
                  title: "필터 영역",
                  children: [],
                },
                {
                  id: "list-container",
                  type: "container",
                  position: { x: 0, y: 1 },
                  size: { width: 12, height: 400 },
                  title: "목록 영역",
                  children: [],
                },
              ],
              gridSettings: { columns: 12, gap: 16, padding: 16 },
            },
            isPublic: true,
            createdBy: "admin",
            createdDate: new Date(),
          },
          {
            templateId: 3,
            templateName: "상세 화면",
            templateType: "DETAIL",
            companyCode: "*",
            description: "데이터 상세 정보를 표시하는 화면 템플릿",
            layoutData: {
              components: [
                {
                  id: "header-container",
                  type: "container",
                  position: { x: 0, y: 0 },
                  size: { width: 12, height: 60 },
                  title: "헤더 영역",
                  children: [],
                },
                {
                  id: "detail-container",
                  type: "container",
                  position: { x: 0, y: 1 },
                  size: { width: 12, height: 400 },
                  title: "상세 정보",
                  children: [],
                },
                {
                  id: "action-container",
                  type: "container",
                  position: { x: 0, y: 2 },
                  size: { width: 12, height: 80 },
                  title: "액션 버튼",
                  children: [],
                },
              ],
              gridSettings: { columns: 12, gap: 16, padding: 16 },
            },
            isPublic: true,
            createdBy: "admin",
            createdDate: new Date(),
          },
        ];
        setTemplates(fallbackTemplates);
      } finally {
        setIsLoading(false);
      }
    };

    fetchTemplates();
  }, [user?.company_code]);

  // 템플릿 검색
  const filteredTemplates = templates.filter(
    (template) =>
      template.templateName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (template.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
  );

  // 템플릿 선택
  const handleTemplateSelect = (template: ScreenTemplate) => {
    setSelectedTemplate(template);
    onTemplateSelect?.(template);
  };

  // 템플릿 적용
  const handleTemplateApply = (template: ScreenTemplate) => {
    onTemplateApply?.(template);
  };

  // 템플릿 삭제
  const handleTemplateDelete = async (templateId: number) => {
    if (!confirm("정말로 이 템플릿을 삭제하시겠습니까?")) return;

    try {
      await templateApi.deleteTemplate(templateId);
      setTemplates((prev) => prev.filter((t) => t.templateId !== templateId));
      if (selectedTemplate?.templateId === templateId) {
        setSelectedTemplate(null);
      }
      alert("템플릿이 삭제되었습니다.");
    } catch (error) {
      console.error("템플릿 삭제 실패:", error);
      alert("템플릿 삭제에 실패했습니다. 다시 시도해주세요.");
    }
  };

  // 새 템플릿 생성
  const handleCreateTemplate = () => {
    // TODO: 새 템플릿 생성 모달 또는 페이지로 이동
    console.log("새 템플릿 생성");
  };

  // 템플릿 내보내기
  const handleExportTemplate = (template: ScreenTemplate) => {
    const dataStr = JSON.stringify(template, null, 2);
    const dataBlob = new Blob([dataStr], { type: "application/json" });
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `${template.templateName}.json`;
    link.click();
    URL.revokeObjectURL(url);
  };

  // 화면이 선택되지 않았을 때 처리
  if (!selectedScreen) {
    return (
      <div className="py-12 text-center text-gray-500">
        <FileText className="mx-auto mb-4 h-16 w-16 text-gray-300" />
        <p className="mb-4 text-lg">템플릿을 적용할 화면을 선택해주세요</p>
        <p className="mb-6 text-sm">화면 목록에서 화면을 선택한 후 템플릿을 관리하세요</p>
        <Button onClick={onBackToList} variant="outline">
          화면 목록으로 돌아가기
        </Button>
      </div>
    );
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {/* 헤더 */}
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-sm font-medium">화면 템플릿 관리</CardTitle>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" onClick={handleCreateTemplate}>
                <Plus className="mr-1 h-3 w-3" />새 템플릿
              </Button>
              <Button variant="outline" size="sm">
                <Upload className="mr-1 h-3 w-3" />
                가져오기
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="relative">
            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="템플릿명 또는 설명으로 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

      {/* 템플릿 목록 */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        {/* 템플릿 카드 목록 */}
        <div className="space-y-3">
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="my">내 템플릿</TabsTrigger>
              <TabsTrigger value="public">공개 템플릿</TabsTrigger>
            </TabsList>
          </Tabs>

          <div className="max-h-96 space-y-3 overflow-y-auto">
            {filteredTemplates
              .filter((template) => (activeTab === "my" ? template.companyCode !== "*" : template.isPublic))
              .map((template) => (
                <Card
                  key={template.templateId}
                  className={`cursor-pointer transition-all hover:shadow-md ${
                    selectedTemplate?.templateId === template.templateId ? "ring-2 ring-blue-500" : ""
                  }`}
                  onClick={() => handleTemplateSelect(template)}
                >
                  <CardContent className="p-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h3 className="mb-1 text-sm font-medium">{template.templateName}</h3>
                        <p className="mb-2 text-xs text-gray-600">{template.description || "설명 없음"}</p>
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="text-xs">
                            {template.templateType}
                          </Badge>
                          {template.isPublic && (
                            <Badge variant="secondary" className="text-xs">
                              공개
                            </Badge>
                          )}
                          <span className="text-xs text-gray-500">
                            {template.createdBy} • {template.createdDate.toLocaleDateString()}
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleTemplateApply(template);
                          }}
                        >
                          <Eye className="h-3 w-3" />
                        </Button>
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleExportTemplate(template);
                          }}
                        >
                          <Download className="h-3 w-3" />
                        </Button>
                        {template.companyCode !== "*" && (
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={(e) => {
                              e.stopPropagation();
                              handleTemplateDelete(template.templateId);
                            }}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
          </div>
        </div>

        {/* 선택된 템플릿 상세 정보 */}
        <div>
          {selectedTemplate ? (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium">템플릿 상세 정보</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label className="text-sm font-medium">템플릿명</label>
                  <p className="text-sm text-gray-600">{selectedTemplate.templateName}</p>
                </div>
                <div>
                  <label className="text-sm font-medium">설명</label>
                  <p className="text-sm text-gray-600">{selectedTemplate.description}</p>
                </div>
                <div>
                  <label className="text-sm font-medium">타입</label>
                  <Badge variant="outline" className="text-xs">
                    {selectedTemplate.templateType}
                  </Badge>
                </div>
                <div>
                  <label className="text-sm font-medium">컴포넌트 수</label>
                  <p className="text-sm text-gray-600">{selectedTemplate.layoutData?.components?.length || 0}개</p>
                </div>
                <div>
                  <label className="text-sm font-medium">그리드 설정</label>
                  <p className="text-sm text-gray-600">
                    {selectedTemplate.layoutData?.gridSettings?.columns || 12} 컬럼, 간격:{" "}
                    {selectedTemplate.layoutData?.gridSettings?.gap || 16}px
                  </p>
                </div>
                <Separator />
                <div className="flex gap-2">
                  <Button className="flex-1" onClick={() => handleTemplateApply(selectedTemplate)}>
                    <Plus className="mr-1 h-3 w-3" />
                    템플릿 적용
                  </Button>
                  <Button variant="outline" className="flex-1">
                    <Edit className="mr-1 h-3 w-3" />
                    편집
                  </Button>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="p-8 text-center text-gray-500">
                <Eye className="mx-auto mb-4 h-12 w-12 text-gray-300" />
                <p>템플릿을 선택하면 상세 정보를 볼 수 있습니다</p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}