"use client";

import React, { useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ImprovedButtonControlConfigPanel } from "../ImprovedButtonControlConfigPanel";
import { FlowVisibilityConfigPanel } from "../FlowVisibilityConfigPanel";
import type { ButtonTabProps } from "./types";

/**
 * AdvancedTab - 행 선택 활성화, 제어 기능, 플로우 표시 제어
 */
export const AdvancedTab: React.FC<ButtonTabProps> = ({
  component,
  onUpdateProperty,
  allComponents,
}) => {
  // 플로우 위젯이 화면에 있는지 확인
  const hasFlowWidget = useMemo(() => {
    return allComponents.some((comp: { componentType?: string; widgetType?: string }) => {
      const compType = comp.componentType || comp.widgetType || "";
      return compType === "flow-widget" || compType?.toLowerCase().includes("flow");
    });
  }, [allComponents]);

  const actionType = component.componentConfig?.action?.type;

  return (
    <div className="space-y-4">
      {/* 행 선택 시에만 활성화 설정 */}
      <div className="space-y-4 rounded-lg border bg-muted/50 p-4">
        <h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
        <p className="text-xs text-muted-foreground">
          테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
        </p>

        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label>행 선택 시에만 활성화</Label>
            <p className="text-xs text-muted-foreground">
              체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
            </p>
          </div>
          <Switch
            checked={component.componentConfig?.action?.requireRowSelection || false}
            onCheckedChange={(checked) => {
              onUpdateProperty("componentConfig.action.requireRowSelection", checked);
            }}
          />
        </div>

        {component.componentConfig?.action?.requireRowSelection && (
          <div className="space-y-3 border-l-2 border-primary/20 pl-4">
            <div>
              <Label htmlFor="row-selection-source">선택 데이터 소스</Label>
              <Select
                value={component.componentConfig?.action?.rowSelectionSource || "auto"}
                onValueChange={(value) => {
                  onUpdateProperty("componentConfig.action.rowSelectionSource", value);
                }}
              >
                <SelectTrigger id="row-selection-source" className="h-8 text-xs">
                  <SelectValue placeholder="데이터 소스 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="auto">자동 감지 (권장)</SelectItem>
                  <SelectItem value="tableList">테이블 리스트 선택</SelectItem>
                  <SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
                  <SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
                </SelectContent>
              </Select>
              <p className="mt-1 text-xs text-muted-foreground">
                자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
              </p>
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>다중 선택 허용</Label>
                <p className="text-xs text-muted-foreground">
                  여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
                </p>
              </div>
              <Switch
                checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
                onCheckedChange={(checked) => {
                  onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
                }}
              />
            </div>

            {!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
              <div className="rounded-md bg-muted p-2">
                <p className="text-xs text-muted-foreground">
                  정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
                </p>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 제어 기능 섹션 - 엑셀 업로드 계열이 아닐 때만 표시 */}
      {actionType !== "excel_upload" && actionType !== "multi_table_excel_upload" && (
        <div className="border-t border-border pt-6">
          <ImprovedButtonControlConfigPanel
            component={component}
            onUpdateProperty={onUpdateProperty}
          />
        </div>
      )}

      {/* 플로우 단계별 표시 제어 (플로우 위젯이 있을 때만) */}
      {hasFlowWidget && (
        <div className="border-t border-border pt-6">
          <FlowVisibilityConfigPanel
            component={component}
            allComponents={allComponents}
            onUpdateProperty={onUpdateProperty}
          />
        </div>
      )}
    </div>
  );
};