"use client";

import React, { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Link2, Layers, Filter, FormInput, Ban, Tags, Columns } from "lucide-react";

// 탭별 컴포넌트
import CascadingRelationsTab from "./tabs/CascadingRelationsTab";
import AutoFillTab from "./tabs/AutoFillTab";
import HierarchyTab from "./tabs/HierarchyTab";
import ConditionTab from "./tabs/ConditionTab";
import MutualExclusionTab from "./tabs/MutualExclusionTab";
import CategoryValueCascadingTab from "./tabs/CategoryValueCascadingTab";
import HierarchyColumnTab from "./tabs/HierarchyColumnTab";

export default function CascadingManagementPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [activeTab, setActiveTab] = useState("relations");

  // URL 쿼리 파라미터에서 탭 설정
  useEffect(() => {
    const tab = searchParams.get("tab");
    if (tab && ["relations", "hierarchy", "condition", "autofill", "exclusion", "category-value", "hierarchy-column"].includes(tab)) {
      setActiveTab(tab);
    }
  }, [searchParams]);

  // 탭 변경 시 URL 업데이트
  const handleTabChange = (value: string) => {
    setActiveTab(value);
    const url = new URL(window.location.href);
    url.searchParams.set("tab", value);
    router.replace(url.pathname + url.search);
  };

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">연쇄 드롭다운 통합 관리</h1>
          <p className="text-sm text-muted-foreground">
            연쇄 드롭다운, 자동 입력, 다단계 계층, 조건부 필터 등을 관리합니다.
          </p>
        </div>

        {/* 탭 네비게이션 */}
        <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="relations" className="gap-2">
              <Link2 className="h-4 w-4" />
              <span className="hidden sm:inline">2단계 연쇄관계</span>
              <span className="sm:hidden">연쇄</span>
            </TabsTrigger>
            <TabsTrigger value="hierarchy" className="gap-2">
              <Layers className="h-4 w-4" />
              <span className="hidden sm:inline">다단계 계층</span>
              <span className="sm:hidden">계층</span>
            </TabsTrigger>
            <TabsTrigger value="condition" className="gap-2">
              <Filter className="h-4 w-4" />
              <span className="hidden sm:inline">조건부 필터</span>
              <span className="sm:hidden">조건</span>
            </TabsTrigger>
            <TabsTrigger value="autofill" className="gap-2">
              <FormInput className="h-4 w-4" />
              <span className="hidden sm:inline">자동 입력</span>
              <span className="sm:hidden">자동</span>
            </TabsTrigger>
            <TabsTrigger value="exclusion" className="gap-2">
              <Ban className="h-4 w-4" />
              <span className="hidden sm:inline">상호 배제</span>
              <span className="sm:hidden">배제</span>
            </TabsTrigger>
            <TabsTrigger value="category-value" className="gap-2">
              <Tags className="h-4 w-4" />
              <span className="hidden sm:inline">카테고리값</span>
              <span className="sm:hidden">카테고리</span>
            </TabsTrigger>
          </TabsList>

          {/* 탭 컨텐츠 */}
          <div className="mt-6">
            <TabsContent value="relations">
              <CascadingRelationsTab />
            </TabsContent>

            <TabsContent value="hierarchy">
              <HierarchyTab />
            </TabsContent>

            <TabsContent value="condition">
              <ConditionTab />
            </TabsContent>

            <TabsContent value="autofill">
              <AutoFillTab />
            </TabsContent>

            <TabsContent value="exclusion">
              <MutualExclusionTab />
            </TabsContent>

            <TabsContent value="category-value">
              <CategoryValueCascadingTab />
            </TabsContent>
          </div>
        </Tabs>
      </div>
    </div>
  );
}