"use client";

import { WorkflowStepConfig } from "@/lib/api";
import { Trash2, GripVertical, ArrowDown } from "lucide-react";

interface WorkflowStepProps {
  step: WorkflowStepConfig;
  index: number;
  totalSteps: number;
  onUpdate: (index: number, step: WorkflowStepConfig) => void;
  onRemove: (index: number) => void;
}

const STEP_TYPES: { value: string; label: string; description: string }[] = [
  { value: "send_message", label: "Send Message", description: "Post a message to a channel" },
  { value: "send_dm", label: "Send DM", description: "Send a direct message" },
  { value: "create_list_item", label: "Create List Item", description: "Add an item to a list" },
  { value: "schedule_reminder", label: "Schedule Reminder", description: "Create a reminder" },
  { value: "call_webhook", label: "Call Webhook", description: "Trigger an external URL" },
  { value: "delay", label: "Delay", description: "Wait for a specified duration" },
  { value: "condition", label: "Condition", description: "Branch based on a condition" },
];

function getStepLabel(type: string): string {
  return STEP_TYPES.find((t) => t.value === type)?.label || type;
}

export function WorkflowStep({ step, index, totalSteps, onUpdate, onRemove }: WorkflowStepProps) {
  const handleTypeChange = (newType: string) => {
    onUpdate(index, { ...step, type: newType });
  };

  const handleConfigChange = (key: string, value: string) => {
    onUpdate(index, {
      ...step,
      config: { ...step.config, [key]: value },
    });
  };

  return (
    <>
      <div className="group relative flex items-start gap-2">
        {/* Drag handle */}
        <div className="mt-2 cursor-grab text-gray-300 hover:text-gray-500">
          <GripVertical size={16} />
        </div>

        {/* Step card */}
        <div className="flex-1 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-2">
              <span className="w-5 h-5 rounded-full bg-slack-purple text-white text-xs font-bold flex items-center justify-center">
                {index + 1}
              </span>
              <span className="text-xs text-gray-400 uppercase font-semibold">
                Step {index + 1}
              </span>
            </div>
            <button
              onClick={() => onRemove(index)}
              className="text-gray-300 hover:text-slack-red transition-colors p-1"
              title="Remove step"
            >
              <Trash2 size={14} />
            </button>
          </div>

          {/* Step type selector */}
          <select
            value={step.type}
            onChange={(e) => handleTypeChange(e.target.value)}
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-slack-purple mb-2"
          >
            {STEP_TYPES.map((t) => (
              <option key={t.value} value={t.value}>
                {t.label}
              </option>
            ))}
          </select>

          {/* Dynamic config fields */}
          <div className="space-y-2 mt-2">
            {step.type === "send_message" && (
              <>
                <input
                  type="text"
                  value={(step.config.channel_id as string) || ""}
                  onChange={(e) => handleConfigChange("channel_id", e.target.value)}
                  placeholder="Channel ID"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
                <textarea
                  value={(step.config.text as string) || ""}
                  onChange={(e) => handleConfigChange("text", e.target.value)}
                  placeholder="Message text"
                  rows={2}
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple resize-none"
                />
              </>
            )}
            {step.type === "send_dm" && (
              <>
                <input
                  type="text"
                  value={(step.config.user_id as string) || ""}
                  onChange={(e) => handleConfigChange("user_id", e.target.value)}
                  placeholder="User ID"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
                <textarea
                  value={(step.config.text as string) || ""}
                  onChange={(e) => handleConfigChange("text", e.target.value)}
                  placeholder="Message text"
                  rows={2}
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple resize-none"
                />
              </>
            )}
            {step.type === "create_list_item" && (
              <>
                <input
                  type="text"
                  value={(step.config.list_id as string) || ""}
                  onChange={(e) => handleConfigChange("list_id", e.target.value)}
                  placeholder="List ID"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
                <input
                  type="text"
                  value={(step.config.name as string) || ""}
                  onChange={(e) => handleConfigChange("name", e.target.value)}
                  placeholder="Item name"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
              </>
            )}
            {step.type === "schedule_reminder" && (
              <>
                <input
                  type="text"
                  value={(step.config.text as string) || ""}
                  onChange={(e) => handleConfigChange("text", e.target.value)}
                  placeholder="Reminder text"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
                <input
                  type="text"
                  value={(step.config.remind_at as string) || ""}
                  onChange={(e) => handleConfigChange("remind_at", e.target.value)}
                  placeholder="When (e.g. in 1 hour)"
                  className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
                />
              </>
            )}
            {step.type === "call_webhook" && (
              <input
                type="text"
                value={(step.config.url as string) || ""}
                onChange={(e) => handleConfigChange("url", e.target.value)}
                placeholder="Webhook URL"
                className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
              />
            )}
            {step.type === "delay" && (
              <input
                type="text"
                value={(step.config.duration as string) || ""}
                onChange={(e) => handleConfigChange("duration", e.target.value)}
                placeholder="Duration (e.g. 5m, 1h)"
                className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
              />
            )}
            {step.type === "condition" && (
              <input
                type="text"
                value={(step.config.condition as string) || ""}
                onChange={(e) => handleConfigChange("condition", e.target.value)}
                placeholder="Condition expression"
                className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-xs focus:outline-none focus:ring-2 focus:ring-slack-purple"
              />
            )}
          </div>

          <p className="text-[10px] text-gray-400 mt-2">
            {STEP_TYPES.find((t) => t.value === step.type)?.description || ""}
          </p>
        </div>
      </div>

      {/* Connector arrow */}
      {index < totalSteps - 1 && (
        <div className="flex justify-center py-1">
          <ArrowDown size={16} className="text-gray-300" />
        </div>
      )}
    </>
  );
}

export default WorkflowStep;