"use client";

/**
 * V2ComponentsDemo
 * 
 * V2 컴포넌트들을 테스트하고 미리볼 수 있는 데모 페이지
 */

import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { ArrowLeft } from "lucide-react";

// V2 컴포넌트들 (옛 입력/선택은 Phase D.3 에서 폐기 — canonical `input` 으로 흡수됨)
import { V2List } from "./V2List";
import { V2Layout } from "./V2Layout";
import { V2Group } from "./V2Group";
// V2Media — Phase D.5 폐기. canonical input 의 file 분기로 흡수.
import { V2Biz } from "./V2Biz";
import { V2Hierarchy } from "./V2Hierarchy";

// 조건부 로직 데모는 Phase D.3 에서 폐기 (옛 입력/선택 의존이 핵심이었음)

// 타입
import { HierarchyNode } from "@/types/v2-components";

interface V2ComponentsDemoProps {
  onBack?: () => void;
}

export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
  const [activeTab, setActiveTab] = useState("list");
  
  // 데모용 상태 (옛 입력/선택 데모 state — Phase D.3 에서 제거됨)

  // 샘플 데이터
  const sampleTableData = [
    { id: 1, name: "홍길동", email: "hong@test.com", status: "active", date: "2024-01-15" },
    { id: 2, name: "김철수", email: "kim@test.com", status: "inactive", date: "2024-02-20" },
    { id: 3, name: "이영희", email: "lee@test.com", status: "active", date: "2024-03-10" },
    { id: 4, name: "박민수", email: "park@test.com", status: "pending", date: "2024-04-05" },
  ];

  const sampleHierarchyData: HierarchyNode[] = [
    {
      id: "1",
      label: "본사",
      children: [
        {
          id: "1-1",
          label: "영업부",
          children: [
            { id: "1-1-1", label: "영업1팀" },
            { id: "1-1-2", label: "영업2팀" },
          ],
        },
        {
          id: "1-2",
          label: "개발부",
          children: [
            { id: "1-2-1", label: "프론트엔드팀" },
            { id: "1-2-2", label: "백엔드팀" },
          ],
        },
      ],
    },
  ];

  return (
    <div className="flex h-full flex-col bg-background">
      {/* 헤더 */}
      <div className="flex items-center gap-4 border-b p-4">
        {onBack && (
          <Button variant="outline" size="sm" onClick={onBack}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            뒤로
          </Button>
        )}
        <div className="flex-1">
          <h1 className="text-2xl font-bold">V2 컴포넌트 테스트</h1>
          <p className="text-sm text-muted-foreground">
            10개의 통합 컴포넌트를 테스트합니다
          </p>
        </div>
        <Badge variant="secondary">Phase 1-3 완료</Badge>
      </div>

      {/* 탭 컨텐츠 */}
      <div className="flex-1 overflow-auto p-4">
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-2 lg:grid-cols-6">
            <TabsTrigger value="list">List</TabsTrigger>
            <TabsTrigger value="layout">Layout</TabsTrigger>
            <TabsTrigger value="group" className="hidden lg:flex">Group</TabsTrigger>
            <TabsTrigger value="biz" className="hidden lg:flex">Biz</TabsTrigger>
            <TabsTrigger value="hierarchy" className="hidden lg:flex">Hierarchy</TabsTrigger>
          </TabsList>

          {/* 조건부 동작 데모 탭 — Phase D.3 에서 폐기 (옛 입력/선택 의존) */}
          {/* 옛 입력/선택 탭 — Phase D.3 에서 폐기. canonical `input` 데모는 별도 화면에서 확인 */}

          {/* V2List 탭 */}
          <TabsContent value="list" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>V2List</CardTitle>
                <CardDescription>
                  통합 리스트 컴포넌트 - table, card, list
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <V2List
                  id="demo-list"
                  label="사용자 목록"
                  v2Type="V2List"
                  config={{
                    view_mode: "table",
                    searchable: true,
                    pageable: true,
                    page_size: 5,
                    columns: [
                      { field: "id", header: "ID", width: 60, sortable: true },
                      { field: "name", header: "이름", sortable: true },
                      { field: "email", header: "이메일" },
                      { field: "status", header: "상태" },
                      { field: "date", header: "등록일", format: "date", sortable: true },
                    ],
                  }}
                  data={sampleTableData}
                  onRowClick={(row) => console.log("Row clicked:", row)}
                />
              </CardContent>
            </Card>
          </TabsContent>

          {/* V2Layout 탭 */}
          <TabsContent value="layout" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>V2Layout</CardTitle>
                <CardDescription>
                  통합 레이아웃 컴포넌트 - 12컬럼 그리드 시스템, split, flex
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* 12컬럼 그리드 시스템 */}
                <div>
                  <h4 className="text-sm font-medium mb-3">12컬럼 그리드 시스템</h4>
                  <p className="text-xs text-muted-foreground mb-4">
                    shadcn/Tailwind 표준 12컬럼 시스템. 자식 요소에 col-span-* 클래스로 너비 조절
                  </p>
                  
                  {/* 12컬럼 전체 보기 */}
                  <V2Layout
                    id="demo-grid-12"
                    v2Type="V2Layout"
                    config={{ type: "grid", columns: 12, gap: "4px", use_12_column: true }}
                  >
                    {Array.from({ length: 12 }).map((_, i) => (
                      <div key={i} className="p-2 bg-primary/20 rounded text-center text-xs">
                        {i + 1}
                      </div>
                    ))}
                  </V2Layout>
                </div>

                <Separator />

                {/* col-span 예시 */}
                <div>
                  <h4 className="text-sm font-medium mb-3">col-span 활용 예시</h4>
                  <V2Layout
                    id="demo-grid-span"
                    v2Type="V2Layout"
                    config={{ type: "grid", columns: 12, gap: "8px", use_12_column: true }}
                  >
                    <div className="col-span-12 p-3 bg-primary/10 rounded text-center text-sm">
                      col-span-12 (전체)
                    </div>
                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                      col-span-6 (절반)
                    </div>
                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                      col-span-6 (절반)
                    </div>
                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                      col-span-4 (1/3)
                    </div>
                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                      col-span-4 (1/3)
                    </div>
                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                      col-span-4 (1/3)
                    </div>
                    <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                      col-span-3 (1/4)
                    </div>
                    <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                      col-span-3 (1/4)
                    </div>
                    <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                      col-span-3 (1/4)
                    </div>
                    <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                      col-span-3 (1/4)
                    </div>
                    <div className="col-span-8 p-3 bg-destructive/10 rounded text-center text-sm">
                      col-span-8 (2/3)
                    </div>
                    <div className="col-span-4 p-3 bg-destructive/10 rounded text-center text-sm">
                      col-span-4 (1/3)
                    </div>
                  </V2Layout>
                </div>

                <Separator />

                {/* Split Layout */}
                <div>
                  <h4 className="text-sm font-medium mb-3">Split Layout (리사이즈 가능)</h4>
                  <V2Layout
                    id="demo-split"
                    v2Type="V2Layout"
                    config={{ type: "split", direction: "horizontal", split_ratio: [30, 70] }}
                    style={{ height: "200px" }}
                  >
                    <div className="p-4 bg-primary/10 h-full flex items-center justify-center">
                      왼쪽 패널
                    </div>
                    <div className="p-4 bg-emerald-100 h-full flex items-center justify-center">
                      오른쪽 패널
                    </div>
                  </V2Layout>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* V2Group 탭 */}
          <TabsContent value="group" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>V2Group</CardTitle>
                <CardDescription>
                  통합 그룹 컴포넌트 - tabs, accordion, section, card-section
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Tabs */}
                <V2Group
                  id="demo-tabs"
                  v2Type="V2Group"
                  config={{
                    type: "tabs",
                    tabs: [
                      { id: "tab1", title: "탭 1", content: <div className="p-4">탭 1 내용</div> },
                      { id: "tab2", title: "탭 2", content: <div className="p-4">탭 2 내용</div> },
                      { id: "tab3", title: "탭 3", content: <div className="p-4">탭 3 내용</div> },
                    ],
                  }}
                />

                <Separator />

                {/* Accordion */}
                <V2Group
                  id="demo-accordion"
                  v2Type="V2Group"
                  config={{
                    type: "accordion",
                    title: "접을 수 있는 섹션",
                    collapsible: true,
                    default_expanded: true,
                  }}
                >
                  <p>이 내용은 접었다 펼 수 있습니다.</p>
                </V2Group>

                <Separator />

                {/* Card Section */}
                <V2Group
                  id="demo-card"
                  v2Type="V2Group"
                  config={{
                    type: "card-section",
                    title: "카드 섹션",
                  }}
                >
                  <p>카드 스타일 섹션 내용입니다.</p>
                </V2Group>
              </CardContent>
            </Card>
          </TabsContent>

          {/* V2Media 탭 — Phase D.5 에서 폐기. canonical input 의 file 분기로 흡수 */}

          {/* V2Biz 탭 */}
          <TabsContent value="biz" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>V2Biz</CardTitle>
                <CardDescription>
                  통합 비즈니스 컴포넌트 - numbering, category, flow 등 (플레이스홀더)
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  <V2Biz
                    id="demo-numbering"
                    v2Type="V2Biz"
                    config={{ type: "numbering" }}
                  />
                  <V2Biz
                    id="demo-category"
                    v2Type="V2Biz"
                    config={{ type: "category" }}
                  />
                  <V2Biz
                    id="demo-related"
                    v2Type="V2Biz"
                    config={{ type: "related-buttons" }}
                  />
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* V2Hierarchy 탭 */}
          <TabsContent value="hierarchy" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>V2Hierarchy</CardTitle>
                <CardDescription>
                  통합 계층 구조 컴포넌트 - tree, org, bom, cascading
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Tree View */}
                  <div>
                    <h4 className="text-sm font-medium mb-3">트리 뷰</h4>
                    <V2Hierarchy
                      id="demo-tree"
                      v2Type="V2Hierarchy"
                      config={{ type: "tree", view_mode: "tree", editable: false }}
                      data={sampleHierarchyData}
                    />
                  </div>

                  {/* Cascading Dropdowns */}
                  <div>
                    <h4 className="text-sm font-medium mb-3">연쇄 드롭다운</h4>
                    <V2Hierarchy
                      id="demo-cascading"
                      v2Type="V2Hierarchy"
                      config={{ type: "cascading", view_mode: "dropdown", max_level: 3 }}
                      data={sampleHierarchyData}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}

export default V2ComponentsDemo;

