"use client";

import { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { LogNodeData } from "@/types/node-editor";
import { FileText, Info, AlertTriangle, AlertCircle } from "lucide-react";

interface LogPropertiesProps {
  nodeId: string;
  data: LogNodeData;
}

const LOG_LEVELS = [
  { value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
  { value: "info", label: "Info", icon: Info, color: "text-green-600" },
  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
  { value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
];

export function LogProperties({ nodeId, data }: LogPropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [level, setLevel] = useState(data.level || "info");
  const [message, setMessage] = useState(data.message || "");
  const [includeData, setIncludeData] = useState(data.includeData ?? false);

  useEffect(() => {
    setLevel(data.level || "info");
    setMessage(data.message || "");
    setIncludeData(data.includeData ?? false);
  }, [data]);

  const handleApply = () => {
    updateNode(nodeId, {
      level: level as any,
      message,
      includeData,
    });
  };

  const selectedLevel = LOG_LEVELS.find((l) => l.value === level);
  const LevelIcon = selectedLevel?.icon || Info;

  return (
    <div className="space-y-4 p-4 pb-8">
      <div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
        <FileText className="h-4 w-4 text-gray-600" />
        <span className="font-semibold text-gray-600">로그</span>
      </div>

      <div>
        <Label className="text-xs">로그 레벨</Label>
        <Select value={level} onValueChange={setLevel}>
          <SelectTrigger className="mt-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {LOG_LEVELS.map((lvl) => {
              const Icon = lvl.icon;
              return (
                <SelectItem key={lvl.value} value={lvl.value}>
                  <div className="flex items-center gap-2">
                    <Icon className={`h-4 w-4 ${lvl.color}`} />
                    <span>{lvl.label}</span>
                  </div>
                </SelectItem>
              );
            })}
          </SelectContent>
        </Select>
      </div>

      <div>
        <Label htmlFor="message" className="text-xs">
          로그 메시지
        </Label>
        <Input
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="로그 메시지를 입력하세요"
          className="mt-1 text-sm"
        />
      </div>

      <div className="flex items-center justify-between">
        <div>
          <Label className="text-xs">데이터 포함</Label>
          <p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
        </div>
        <Switch checked={includeData} onCheckedChange={setIncludeData} />
      </div>

      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
        <div className="mb-1 flex items-center gap-2">
          <LevelIcon className="h-4 w-4" />
          <span className="text-xs font-semibold uppercase">{level}</span>
        </div>
        <div className="text-sm">{message || "메시지가 없습니다"}</div>
        {includeData && <div className="mt-1 text-xs opacity-70">+ 플로우 데이터</div>}
      </div>

      <Button onClick={handleApply} className="w-full">
        적용
      </Button>
    </div>
  );
}