"use client";

import React from "react";
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
import { FlowComponent } from "@/types/screen-management";

/**
 * 플로우 위젯 테스트 페이지
 * 문서 승인 플로우 (ID: 8)를 테스트합니다
 */
export default function TestFlowPage() {
  // 문서 승인 플로우
  const documentFlow: FlowComponent = {
    id: "test-flow-1",
    type: "flow",
    flowId: 8, // 문서 승인 플로우
    flowName: "문서 승인 플로우",
    showStepCount: true,
    allowDataMove: true,
    displayMode: "horizontal",
    position: { x: 0, y: 0 },
    size: { width: 1200, height: 600 },
    style: {},
  };

  // 작업 요청 워크플로우
  const workRequestFlow: FlowComponent = {
    id: "test-flow-2",
    type: "flow",
    flowId: 12, // 작업 요청 워크플로우
    flowName: "작업 요청 워크플로우",
    showStepCount: true,
    allowDataMove: true,
    displayMode: "horizontal",
    position: { x: 0, y: 0 },
    size: { width: 1200, height: 600 },
    style: {},
  };

  return (
    <div className="min-h-screen bg-muted p-8">
      <div className="mx-auto max-w-7xl space-y-8">
        {/* 헤더 */}
        <div>
          <h1 className="text-3xl font-bold text-foreground">플로우 위젯 테스트</h1>
          <p className="mt-2 text-muted-foreground">두 가지 플로우를 테스트할 수 있습니다</p>
        </div>

        {/* 문서 승인 플로우 */}
        <div className="rounded-lg bg-background p-6 shadow-lg">
          <h2 className="mb-4 text-xl font-semibold text-foreground">문서 승인 플로우 (4단계)</h2>
          <FlowWidget component={documentFlow} />
        </div>

        {/* 작업 요청 워크플로우 */}
        <div className="rounded-lg bg-background p-6 shadow-lg">
          <h2 className="mb-4 text-xl font-semibold text-foreground">작업 요청 워크플로우 (6단계)</h2>
          <FlowWidget component={workRequestFlow} />
        </div>

        {/* 사용 안내 */}
        <div className="mt-8 rounded-lg border border-primary/20 bg-primary/5 p-6">
          <h3 className="mb-2 text-lg font-semibold text-primary">사용 방법</h3>
          <ul className="list-inside list-disc space-y-1 text-primary/80">
            <li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li>
            <li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li>
            <li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li>
          </ul>
        </div>
      </div>
    </div>
  );
}