pipeline/frontend/components/admin/ScriptsManagerDialog.tsx

"use client";

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Plus, Pencil, Trash2, Save, RefreshCw, Play, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { fleetApi } from "@/lib/api/fleet";

const HOOK_TYPES = [
  { value: "transform", label: "transform (값 변환)" },
  { value: "filter", label: "filter (값 필터)" },
  { value: "derived_tags", label: "derived_tags (파생 태그)" },
  { value: "alarm", label: "alarm (알람)" },
  { value: "pre_send", label: "pre_send (전송 전)" },
  { value: "aggregator", label: "aggregator (집계)" },
];

const SCOPES = [
  { value: "global", label: "전체 엣지 (global)" },
  { value: "connection", label: "특정 연결 (connection)" },
  { value: "equipment", label: "특정 장비 (equipment)" },
];

const DEFAULT_CODE: Record<string, string> = {
  transform:
    "def transform(tag_name, raw_value, context):\n    # 입력: raw_value, context={scale,offset,...}\n    # 반환: 변환된 값\n    return raw_value",
  filter:
    "def filter(tag_name, value, context):\n    # True 반환 시 통과, False면 버림\n    return True",
  derived_tags:
    "def derived_tags(device_data, context):\n    # device_data['tags']에서 원본 태그 참조\n    # 반환: {'new_tag': value, ...}\n    tags = device_data.get('tags', {})\n    return {}",
  alarm:
    "def alarm(tag_name, value, context):\n    # 알람 발생 시 {'level': 'warn|error', 'message': '...'}\n    # 아니면 None\n    return None",
  pre_send:
    "def pre_send(device_data, context):\n    # 전송 직전 최종 가공\n    return device_data",
  aggregator:
    "def aggregator(tag_name, value, context):\n    return value",
};

interface Script {
  id?: number;
  script_name: string;
  description?: string;
  hook_type: string;
  scope: string;
  code: string;
  priority: number;
  timeout_ms: number;
  enabled: boolean;
  connection_id?: number | null;
  equipment_id?: number | null;
}

interface ScriptsManagerDialogProps {
  open: boolean;
  onClose: () => void;
  onAfterChange?: () => void;
  /** 이 연결에서 열렸을 때 신규 스크립트에 자동 바인딩 */
  defaultConnectionId?: number;
}

export function ScriptsManagerDialog({
  open,
  onClose,
  onAfterChange,
  defaultConnectionId,
}: ScriptsManagerDialogProps) {
  const [scripts, setScripts] = useState<Script[]>([]);
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState<Script | null>(null);
  const [testInput, setTestInput] = useState(
    '{"tag_name":"test","raw_value":10,"context":{}}'
  );
  const [testResult, setTestResult] = useState<string>("");
  const [running, setRunning] = useState(false);

  const load = async () => {
    setLoading(true);
    try {
      const res = await fleetApi.listScripts();
      setScripts((res?.data || res || []) as Script[]);
    } catch (e: any) {
      toast.error(e?.response?.data?.message || "스크립트 조회 실패");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open) load();
  }, [open]);

  const openNew = () => {
    setEditing({
      script_name: "",
      description: "",
      hook_type: "transform",
      scope: defaultConnectionId ? "connection" : "global",
      code: DEFAULT_CODE.transform,
      priority: 10,
      timeout_ms: 1500,
      enabled: true,
      connection_id: defaultConnectionId ?? null,
    });
    setTestResult("");
  };

  const openEdit = async (s: Script) => {
    try {
      const res = await fleetApi.getScript(s.id!);
      setEditing(res?.data || res);
      setTestResult("");
    } catch (e: any) {
      toast.error(e?.response?.data?.message || "조회 실패");
    }
  };

  const save = async () => {
    if (!editing) return;
    if (!editing.script_name || !editing.code) {
      toast.error("이름과 코드는 필수");
      return;
    }
    try {
      if (editing.id) {
        await fleetApi.updateScript(editing.id, editing as any);
      } else {
        await fleetApi.createScript(editing as any);
      }
      toast.success("저장됨");
      setEditing(null);
      load();
      onAfterChange?.();
    } catch (e: any) {
      toast.error(e?.response?.data?.message || "저장 실패");
    }
  };

  const remove = async (id: number) => {
    if (!confirm("삭제하시겠습니까?")) return;
    try {
      await fleetApi.deleteScript(id);
      toast.success("삭제됨");
      load();
      onAfterChange?.();
    } catch (e: any) {
      toast.error(e?.response?.data?.message || "삭제 실패");
    }
  };

  const runDry = async () => {
    if (!editing) return;
    setRunning(true);
    try {
      let parsed: any = {};
      try {
        parsed = JSON.parse(testInput);
      } catch {
        toast.error("테스트 입력이 JSON이 아닙니다");
        setRunning(false);
        return;
      }
      const res = await fleetApi.dryRun(editing.code, editing.hook_type, parsed, editing.timeout_ms);
      setTestResult(JSON.stringify(res?.data ?? res, null, 2));
    } catch (e: any) {
      setTestResult("ERROR: " + (e?.response?.data?.message || e.message));
    } finally {
      setRunning(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogContent className="max-w-[95vw] sm:max-w-5xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Python 훅 스크립트 관리</DialogTitle>
          <DialogDescription className="text-xs">
            훅은 장비에서 수집한 값을 Pipeline에서 실시간으로 변환/필터/확장할 때 사용됩니다.
          </DialogDescription>
        </DialogHeader>

        {editing ? (
          // ── 편집 모드 ────────────────────────────────
          <div className="space-y-3">
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div>
                <Label className="text-xs">스크립트명 *</Label>
                <Input
                  className="mt-1 h-8 text-xs"
                  value={editing.script_name}
                  onChange={(e) => setEditing({ ...editing, script_name: e.target.value })}
                />
              </div>
              <div>
                <Label className="text-xs">Hook 타입 *</Label>
                <Select
                  value={editing.hook_type}
                  onValueChange={(v) =>
                    setEditing({
                      ...editing,
                      hook_type: v,
                      code: editing.code || DEFAULT_CODE[v] || "",
                    })
                  }
                >
                  <SelectTrigger className="mt-1 h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {HOOK_TYPES.map((o) => (
                      <SelectItem key={o.value} value={o.value} className="text-xs">
                        {o.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs">Scope</Label>
                <Select
                  value={editing.scope}
                  onValueChange={(v) => setEditing({ ...editing, scope: v })}
                >
                  <SelectTrigger className="mt-1 h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {SCOPES.map((o) => (
                      <SelectItem key={o.value} value={o.value} className="text-xs">
                        {o.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <Label className="text-xs">우선순위</Label>
                  <Input
                    className="mt-1 h-8 text-xs"
                    type="number"
                    value={editing.priority}
                    onChange={(e) =>
                      setEditing({ ...editing, priority: Number(e.target.value) })
                    }
                  />
                </div>
                <div>
                  <Label className="text-xs">타임아웃 (ms)</Label>
                  <Input
                    className="mt-1 h-8 text-xs"
                    type="number"
                    value={editing.timeout_ms}
                    onChange={(e) =>
                      setEditing({ ...editing, timeout_ms: Number(e.target.value) })
                    }
                  />
                </div>
              </div>
            </div>

            <div>
              <Label className="text-xs">설명</Label>
              <Input
                className="mt-1 h-8 text-xs"
                value={editing.description || ""}
                onChange={(e) => setEditing({ ...editing, description: e.target.value })}
              />
            </div>

            <div>
              <div className="mb-1 flex items-center justify-between">
                <Label className="text-xs">Python 코드</Label>
                <div className="flex items-center gap-2">
                  <Switch
                    checked={editing.enabled}
                    onCheckedChange={(c) => setEditing({ ...editing, enabled: c })}
                  />
                  <span className="text-[10px]">{editing.enabled ? "활성" : "비활성"}</span>
                </div>
              </div>
              <Textarea
                className="min-h-[240px] font-mono text-[11px]"
                value={editing.code}
                onChange={(e) => setEditing({ ...editing, code: e.target.value })}
                spellCheck={false}
              />
              <p className="mt-1 text-[10px] text-muted-foreground">
                함수 이름은 훅 타입과 동일해야 합니다 (예: transform, filter).
              </p>
            </div>

            {/* Dry-run */}
            <div className="rounded-md border p-2">
              <div className="mb-1 flex items-center justify-between">
                <Label className="text-xs font-semibold">테스트 실행</Label>
                <Button size="sm" onClick={runDry} disabled={running} className="h-7 gap-1 text-xs">
                  {running ? <Loader2 className="h-3 w-3 animate-spin" /> : <Play className="h-3 w-3" />}
                  실행
                </Button>
              </div>
              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                <Textarea
                  className="min-h-[80px] font-mono text-[10px]"
                  value={testInput}
                  onChange={(e) => setTestInput(e.target.value)}
                  placeholder='{"tag_name":"t1","raw_value":10,"context":{}}'
                />
                <Textarea
                  className="min-h-[80px] font-mono text-[10px]"
                  value={testResult}
                  readOnly
                  placeholder="결과가 여기에 표시됩니다"
                />
              </div>
            </div>

            <div className="flex justify-end gap-2">
              <Button variant="outline" size="sm" onClick={() => setEditing(null)}>
                목록으로
              </Button>
              <Button size="sm" onClick={save} className="gap-1">
                <Save className="h-3 w-3" />
                저장
              </Button>
            </div>
          </div>
        ) : (
          // ── 목록 모드 ────────────────────────────────
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <p className="text-xs text-muted-foreground">
                총 <strong>{scripts.length}</strong>개 스크립트
              </p>
              <div className="flex gap-2">
                <Button size="sm" variant="outline" onClick={load} className="h-7 gap-1 text-xs">
                  <RefreshCw className="h-3 w-3" />
                  새로고침
                </Button>
                <Button size="sm" onClick={openNew} className="h-7 gap-1 text-xs">
                  <Plus className="h-3 w-3" />새 스크립트
                </Button>
              </div>
            </div>

            {loading ? (
              <div className="flex items-center justify-center py-10">
                <Loader2 className="h-5 w-5 animate-spin" />
              </div>
            ) : scripts.length === 0 ? (
              <div className="flex flex-col items-center justify-center rounded-md border border-dashed py-10 text-muted-foreground">
                <p className="text-xs">등록된 스크립트가 없습니다</p>
                <Button variant="link" size="sm" onClick={openNew}>
                  첫 스크립트 만들기
                </Button>
              </div>
            ) : (
              <div className="max-h-[50vh] space-y-1 overflow-y-auto rounded-md border p-1">
                {scripts.map((s) => (
                  <div
                    key={s.id}
                    className="flex items-center gap-2 rounded px-2 py-1.5 hover:bg-muted/50"
                  >
                    <Badge variant="outline" className="h-5 text-[9px]">
                      {s.hook_type}
                    </Badge>
                    <Badge variant="secondary" className="h-5 text-[9px]">
                      {s.scope}
                    </Badge>
                    <span className="flex-1 truncate text-xs font-medium">
                      {s.script_name}
                    </span>
                    <span className="text-[10px] text-muted-foreground">
                      p={s.priority} / {s.timeout_ms}ms
                    </span>
                    {!s.enabled && (
                      <Badge variant="destructive" className="h-4 text-[9px]">
                        OFF
                      </Badge>
                    )}
                    <Button variant="ghost" size="sm" className="h-6 px-2" onClick={() => openEdit(s)}>
                      <Pencil className="h-3 w-3" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 px-2 text-destructive"
                      onClick={() => remove(s.id!)}
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            닫기
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}