"use client";

import React, { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";
import { FieldRenderer } from "../Field/FieldRenderer";
import { DataViewRenderer } from "../DataView/DataViewRenderer";
import { ActionRenderer } from "../Action/ActionRenderer";
import { ReactiveBindingEngine } from "../bindings/ReactiveBindingEngine";
import {
  getFieldConfig,
  getTableColumns,
  saveLayout,
  getLayout,
  saveBindings,
  getBindings,
  type FieldConfigResponse,
  type TableColumnsResponse,
} from "@/lib/api/metaComponent";
import type { FieldConfig } from "../Field/fieldTypes";
import type { DataViewConfig } from "../DataView/dataViewTypes";
import type { ActionConfig } from "../Action/actionTypes";
import type { ReactiveBinding } from "../bindings/bindingTypes";

/**
 * 메타 컴포넌트 V3 사용 예시
 * 
 * Phase A 구현 범위:
 * 1. Field 자동 생성 (테이블 컬럼 기반)
 * 2. DataView 렌더링 (테이블/카드 뷰)
 * 3. Action 버튼 + 파이프라인
 * 4. Reactive Binding 설정 및 실행
 */
export function MetaComponentExample() {
  const [loading, setLoading] = useState(true);
  const [fieldConfigs, setFieldConfigs] = useState<FieldConfig[]>([]);
  const [dataViewConfig, setDataViewConfig] = useState<DataViewConfig | null>(null);
  const [bindingEngine] = useState(() => new ReactiveBindingEngine());

  // 예시: user_info 테이블 기반 화면 자동 생성
  useEffect(() => {
    loadMetaComponents();
  }, []);

  /**
   * 백엔드 API 호출하여 메타 컴포넌트 자동 생성
   */
  async function loadMetaComponents() {
    try {
      setLoading(true);

      // 1. 테이블 컬럼 목록 조회 (webType + FK 관계 자동 감지)
      const columnsResponse = await getTableColumns("user_info");
      
      if (!columnsResponse.success || !columnsResponse.data) {
        throw new Error("테이블 컬럼 조회 실패");
      }

      // 2. 각 컬럼별 Field Config 자동 생성
      const configs: FieldConfig[] = [];
      for (const column of columnsResponse.data.columns) {
        const configResponse = await getFieldConfig("user_info", column.columnName);
        
        if (configResponse.success && configResponse.data) {
          configs.push({
            id: `field_${column.columnName}`,
            type: "meta-field",
            webType: configResponse.data.webType,
            label: configResponse.data.label,
            binding: column.columnName,
            placeholder: configResponse.data.placeholder,
            defaultValue: configResponse.data.defaultValue,
            required: configResponse.data.required,
            maxLength: configResponse.data.maxLength,
            validation: configResponse.data.validation,
            options: configResponse.data.options,
            join: configResponse.data.join,
          });
        }
      }

      setFieldConfigs(configs);

      // 3. DataView 설정 (테이블 뷰)
      setDataViewConfig({
        id: "dataview_user_list",
        type: "meta-dataview",
        viewMode: "table",
        tableName: "user_info",
        columns: columnsResponse.data.columns.map(col => ({
          field: col.columnName,
          header: col.columnComment || col.columnName,
          webType: col.webType,
        })),
        pagination: {
          enabled: true,
          pageSize: 20,
          pageSizeOptions: [10, 20, 50, 100],
        },
        actions: {
          add: {
            enabled: true,
            label: "등록",
            icon: "plus",
          },
          edit: {
            enabled: true,
            label: "수정",
            icon: "pencil",
          },
          delete: {
            enabled: true,
            label: "삭제",
            icon: "trash",
            confirmMessage: "정말로 삭제하시겠습니까?",
          },
        },
      });

      // 4. Reactive Binding 설정 (예시: 부서 선택 → 사용자 목록 필터링)
      const bindings: ReactiveBinding[] = [
        {
          id: "binding_dept_filter",
          sourceComponent: "field_dept_code",
          sourceEvent: "onChange",
          targetComponent: "dataview_user_list",
          targetAction: "filter",
          condition: {
            type: "expression",
            expression: "source.value !== ''",
          },
          transform: {
            config: {
              filterField: "dept_code",
              filterOperator: "equals",
              filterValue: "{{source.value}}",
            },
          },
          priority: 10,
          enabled: true,
        },
      ];

      bindingEngine.setBindings(bindings);

      toast.success("메타 컴포넌트 로드 완료!");
    } catch (error: any) {
      console.error("메타 컴포넌트 로드 실패:", error);
      toast.error(error.message || "메타 컴포넌트 로드 실패");
    } finally {
      setLoading(false);
    }
  }

  /**
   * 레이아웃 저장 (screen_layouts_v3 테이블에 version "3.0"로 저장)
   */
  async function handleSaveLayout() {
    try {
      const layoutData = {
        version: "3.0" as const,
        screenId: 123, // 실제 화면 ID
        layerId: 1,
        components: [
          ...fieldConfigs,
          ...(dataViewConfig ? [dataViewConfig] : []),
        ],
        layers: [
          { id: 1, name: "기본", visible: true, order: 1 },
        ],
        metadata: {
          lastModified: new Date().toISOString(),
          description: "사용자 관리 화면 (메타 컴포넌트 V3)",
        },
      };

      const response = await saveLayout(layoutData);

      if (response.success) {
        toast.success("레이아웃 저장 완료!");
      } else {
        throw new Error(response.error || "저장 실패");
      }
    } catch (error: any) {
      console.error("레이아웃 저장 실패:", error);
      toast.error(error.message || "레이아웃 저장 실패");
    }
  }

  /**
   * Reactive Binding 저장
   */
  async function handleSaveBindings() {
    try {
      const bindings = bindingEngine.getBindings();
      const response = await saveBindings({
        screenId: 123,
        bindings,
      });

      if (response.success) {
        toast.success("바인딩 저장 완료!");
      } else {
        throw new Error(response.error || "저장 실패");
      }
    } catch (error: any) {
      console.error("바인딩 저장 실패:", error);
      toast.error(error.message || "바인딩 저장 실패");
    }
  }

  if (loading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <p className="text-sm text-muted-foreground">메타 컴포넌트 로딩 중...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto space-y-6 p-4 sm:p-6">
      {/* 헤더 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-2xl sm:text-3xl">메타 컴포넌트 V3 예시</CardTitle>
          <CardDescription className="text-sm sm:text-base">
            테이블 컬럼 기반 자동 화면 생성 (Phase A)
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2">
          <Button onClick={handleSaveLayout} variant="default">
            레이아웃 저장
          </Button>
          <Button onClick={handleSaveBindings} variant="outline">
            바인딩 저장
          </Button>
          <Button onClick={loadMetaComponents} variant="ghost">
            새로고침
          </Button>
        </CardContent>
      </Card>

      {/* Field 컴포넌트들 (자동 생성) */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg sm:text-xl">필드 목록</CardTitle>
          <CardDescription className="text-xs sm:text-sm">
            table_type_columns의 webType 기반 자동 생성
          </CardDescription>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {fieldConfigs.map((config) => (
            <div key={config.id} className="space-y-2">
              <FieldRenderer
                config={config}
                value={config.defaultValue}
                onChange={(value) => {
                  console.log(`${config.binding} 변경:`, value);
                  // Reactive Binding 실행
                  bindingEngine.emitEvent(config.id, "onChange", { value });
                }}
              />
            </div>
          ))}
        </CardContent>
      </Card>

      {/* DataView 컴포넌트 (자동 생성) */}
      {dataViewConfig && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg sm:text-xl">데이터 뷰</CardTitle>
            <CardDescription className="text-xs sm:text-sm">
              테이블/카드/리스트 뷰 전환 가능
            </CardDescription>
          </CardHeader>
          <CardContent>
            <DataViewRenderer
              config={dataViewConfig}
              data={[
                { user_id: "admin", user_name: "관리자", dept_code: "IT" },
                { user_id: "user1", user_name: "홍길동", dept_code: "HR" },
              ]}
              onActionClick={(action, rowData) => {
                console.log("액션 클릭:", action, rowData);
                toast.info(`${action} 액션 실행`);
              }}
            />
          </CardContent>
        </Card>
      )}

      {/* Action 컴포넌트 예시 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg sm:text-xl">액션 버튼</CardTitle>
          <CardDescription className="text-xs sm:text-sm">
            버튼 + steps 파이프라인 (Phase B에서 완전 구현 예정)
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2">
          <ActionRenderer
            config={{
              id: "action_save",
              type: "meta-action",
              label: "저장",
              buttonType: "primary",
              icon: "save",
              confirmDialog: {
                enabled: true,
                title: "저장 확인",
                message: "변경 사항을 저장하시겠습니까?",
              },
              steps: [
                {
                  id: "step1",
                  type: "validate",
                  name: "유효성 검증",
                  config: { fields: ["user_name", "dept_code"] },
                },
                {
                  id: "step2",
                  type: "api",
                  name: "API 호출",
                  config: {
                    endpoint: "/api/users",
                    method: "POST",
                  },
                },
              ],
            }}
            onClick={async () => {
              console.log("저장 버튼 클릭");
              toast.success("저장 완료!");
            }}
          />

          <ActionRenderer
            config={{
              id: "action_delete",
              type: "meta-action",
              label: "삭제",
              buttonType: "danger",
              icon: "trash",
              confirmDialog: {
                enabled: true,
                title: "삭제 확인",
                message: "정말로 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
              },
            }}
            onClick={async () => {
              console.log("삭제 버튼 클릭");
              toast.error("삭제 완료!");
            }}
          />
        </CardContent>
      </Card>
    </div>
  );
}