"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Plus, Grid3X3, Palette, Settings, FileText } from "lucide-react";
import ScreenList from "@/components/screen/ScreenList";
import ScreenDesigner from "@/components/screen/ScreenDesigner";
import TemplateManager from "@/components/screen/TemplateManager";
import { ScreenDefinition } from "@/types/screen";

export default function ScreenManagementPage() {
  const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
  const [activeTab, setActiveTab] = useState("screens");

  return (
    <div className="container mx-auto space-y-6 p-6">
      {/* 페이지 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">화면관리 시스템</h1>
          <p className="mt-2 text-gray-600">드래그앤드롭으로 화면을 설계하고 관리하세요</p>
        </div>
        <Button className="bg-blue-600 hover:bg-blue-700">
          <Plus className="mr-2 h-4 w-4" />새 화면 생성
        </Button>
      </div>

      {/* 메인 컨텐츠 */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="screens" className="flex items-center gap-2">
            <Grid3X3 className="h-4 w-4" />
            화면 관리
          </TabsTrigger>
          <TabsTrigger value="designer" className="flex items-center gap-2">
            <Palette className="h-4 w-4" />
            화면 설계기
          </TabsTrigger>
          <TabsTrigger value="templates" className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            템플릿 관리
          </TabsTrigger>
          <TabsTrigger value="settings" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            설정
          </TabsTrigger>
        </TabsList>

        {/* 화면 관리 탭 */}
        <TabsContent value="screens" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>화면 목록</CardTitle>
            </CardHeader>
            <CardContent>
              <ScreenList onScreenSelect={setSelectedScreen} selectedScreen={selectedScreen} />
            </CardContent>
          </Card>
        </TabsContent>

        {/* 화면 설계기 탭 */}
        <TabsContent value="designer" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>화면 설계기</CardTitle>
            </CardHeader>
            <CardContent>
              {selectedScreen ? (
                <ScreenDesigner screen={selectedScreen} />
              ) : (
                <div className="py-12 text-center text-gray-500">
                  <Palette className="mx-auto mb-4 h-16 w-16 text-gray-300" />
                  <p>설계할 화면을 선택해주세요</p>
                  <p className="text-sm">화면 관리 탭에서 화면을 선택한 후 설계기를 사용하세요</p>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 템플릿 관리 탭 */}
        <TabsContent value="templates" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>템플릿 관리</CardTitle>
            </CardHeader>
            <CardContent>
              <TemplateManager />
            </CardContent>
          </Card>
        </TabsContent>

        {/* 설정 탭 */}
        <TabsContent value="settings" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>화면관리 시스템 설정</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="mb-2 text-lg font-medium">테이블 타입 연계</h3>
                  <p className="text-sm text-gray-600">테이블 타입관리 시스템과의 연계 설정을 관리합니다.</p>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-medium">권한 관리</h3>
                  <p className="text-sm text-gray-600">회사별 화면 접근 권한을 설정합니다.</p>
                </div>
                <div>
                  <h3 className="mb-2 text-lg font-medium">기본 설정</h3>
                  <p className="text-sm text-gray-600">그리드 시스템, 기본 컴포넌트 등의 기본 설정을 관리합니다.</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}