"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Save, Trash2 } from "lucide-react";
import { TableInfo, ColumnInfo } from "@/lib/api/dataflow";
import { DataSaveSettings as DataSaveSettingsType } from "@/types/connectionTypes";
import { ActionConditionsSection } from "./ActionConditionsSection";
import { ActionFieldMappings } from "./ActionFieldMappings";
import { ActionSplitConfig } from "./ActionSplitConfig";

interface DataSaveSettingsProps {
  settings: DataSaveSettingsType;
  onSettingsChange: (settings: DataSaveSettingsType) => void;
  availableTables: TableInfo[];
  fromTableColumns: ColumnInfo[];
  toTableColumns: ColumnInfo[];
  tableColumnsCache: { [tableName: string]: ColumnInfo[] };
}

export const DataSaveSettings: React.FC<DataSaveSettingsProps> = ({
  settings,
  onSettingsChange,
  availableTables,
  fromTableColumns,
  toTableColumns,
  tableColumnsCache,
}) => {
  const addAction = () => {
    const newAction = {
      id: `action_${settings.actions.length + 1}`,
      name: `액션 ${settings.actions.length + 1}`,
      actionType: "insert" as const,
      fieldMappings: [],
      conditions: [],
      splitConfig: {
        sourceField: "",
        delimiter: "",
        targetField: "",
      },
    };
    onSettingsChange({
      ...settings,
      actions: [...settings.actions, newAction],
    });
  };

  const updateAction = (actionIndex: number, field: string, value: any) => {
    const newActions = [...settings.actions];
    (newActions[actionIndex] as any)[field] = value;
    onSettingsChange({ ...settings, actions: newActions });
  };

  const removeAction = (actionIndex: number) => {
    const newActions = settings.actions.filter((_, i) => i !== actionIndex);
    onSettingsChange({ ...settings, actions: newActions });
  };

  return (
    <div className="rounded-lg border border-l-4 border-l-green-500 bg-green-50/30 p-4">
      <div className="mb-3 flex items-center gap-2">
        <Save className="h-4 w-4 text-green-500" />
        <span className="text-sm font-medium">데이터 저장 설정</span>
      </div>
      <div className="space-y-4">
        {/* 액션 목록 */}
        <div>
          <div className="mb-2 flex items-center justify-between">
            <Label className="text-sm font-medium">저장 액션</Label>
            <Button size="sm" variant="outline" onClick={addAction} className="h-7 text-xs">
              <Plus className="mr-1 h-3 w-3" />
              액션 추가
            </Button>
          </div>

          {settings.actions.length === 0 ? (
            <div className="rounded-lg border border-dashed p-3 text-center text-xs text-gray-500">
              저장 액션을 추가하여 데이터를 어떻게 저장할지 설정하세요.
            </div>
          ) : (
            <div className="space-y-3">
              {settings.actions.map((action, actionIndex) => (
                <div key={action.id} className="rounded border bg-white p-3">
                  <div className="mb-3 flex items-center justify-between">
                    <Input
                      value={action.name}
                      onChange={(e) => updateAction(actionIndex, "name", e.target.value)}
                      className="h-7 flex-1 text-xs font-medium"
                      placeholder="액션 이름"
                    />
                    <Button size="sm" variant="ghost" onClick={() => removeAction(actionIndex)} className="h-7 w-7 p-0">
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>

                  <div className="grid grid-cols-1 gap-3">
                    {/* 액션 타입 */}
                    <div>
                      <Label className="text-xs">액션 타입</Label>
                      <Select
                        value={action.actionType}
                        onValueChange={(value: "insert" | "update" | "delete" | "upsert") =>
                          updateAction(actionIndex, "actionType", value)
                        }
                      >
                        <SelectTrigger className="h-7 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="insert">INSERT</SelectItem>
                          <SelectItem value="update">UPDATE</SelectItem>
                          <SelectItem value="delete">DELETE</SelectItem>
                          <SelectItem value="upsert">UPSERT</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  {/* 액션별 개별 실행 조건 */}
                  <ActionConditionsSection
                    action={action}
                    actionIndex={actionIndex}
                    settings={settings}
                    onSettingsChange={onSettingsChange}
                    fromTableColumns={fromTableColumns}
                  />

                  {/* 데이터 분할 설정 */}
                  <ActionSplitConfig
                    action={action}
                    actionIndex={actionIndex}
                    settings={settings}
                    onSettingsChange={onSettingsChange}
                    fromTableColumns={fromTableColumns}
                    toTableColumns={toTableColumns}
                  />

                  {/* 필드 매핑 */}
                  <ActionFieldMappings
                    action={action}
                    actionIndex={actionIndex}
                    settings={settings}
                    onSettingsChange={onSettingsChange}
                    availableTables={availableTables}
                    tableColumnsCache={tableColumnsCache}
                  />
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};