"use client";

import { useState } from "react";
import {
  createWorkflow,
  updateWorkflow,
  Workflow,
  WorkflowStepConfig,
  WorkflowTrigger,
} from "@/lib/api";
import { WorkflowStep } from "./WorkflowStep";
import { Plus, Save, X, Zap, ZapOff } from "lucide-react";

interface WorkflowBuilderProps {
  workflow?: Workflow | null;
  onSave?: () => void;
  onCancel?: () => void;
}

const TRIGGER_TYPES: { value: string; label: string }[] = [
  { value: "message_posted", label: "Message Posted" },
  { value: "keyword_mention", label: "Keyword Mention" },
  { value: "reaction_added", label: "Reaction Added" },
  { value: "member_joined", label: "Member Joined" },
  { value: "daily_schedule", label: "Daily Schedule" },
  { value: "manual", label: "Manual Trigger" },
];

export function WorkflowBuilder({ workflow, onSave, onCancel }: WorkflowBuilderProps) {
  const [name, setName] = useState(workflow?.name || "");
  const [description, setDescription] = useState(workflow?.description || "");
  const [triggerType, setTriggerType] = useState(workflow?.trigger?.type || "manual");
  const [triggerKeyword, setTriggerKeyword] = useState(workflow?.trigger?.keyword || "");
  const [triggerChannelId, setTriggerChannelId] = useState(workflow?.trigger?.channel_id || "");
  const [steps, setSteps] = useState<WorkflowStepConfig[]>(workflow?.steps || []);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const addStep = () => {
    setSteps((prev) => [
      ...prev,
      {
        id: `step-${Date.now()}`,
        type: "send_message",
        config: {},
      },
    ]);
  };

  const updateStep = (index: number, step: WorkflowStepConfig) => {
    setSteps((prev) => prev.map((s, i) => (i === index ? step : s)));
  };

  const removeStep = (index: number) => {
    setSteps((prev) => prev.filter((_, i) => i !== index));
  };

  const handleSave = () => {
    if (!name.trim()) {
      setError("Workflow name is required.");
      return;
    }
    setError("");
    setSaving(true);

    const trigger: WorkflowTrigger = {
      type: triggerType,
    };
    if (triggerKeyword) trigger.keyword = triggerKeyword;
    if (triggerChannelId) trigger.channel_id = triggerChannelId;

    const payload = {
      name: name.trim(),
      description: description.trim() || undefined,
      trigger,
      steps,
    };

    if (workflow?.id) {
      updateWorkflow(workflow.id, payload)
        .then(() => onSave?.())
        .catch((err) => setError(err.message || "Failed to update workflow"))
        .finally(() => setSaving(false));
    } else {
      createWorkflow(payload)
        .then(() => onSave?.())
        .catch((err) => setError(err.message || "Failed to create workflow"))
        .finally(() => setSaving(false));
    }
  };

  return (
    <div className="flex flex-col h-full bg-white">
      {/* Header */}
      <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
        <div className="flex items-center gap-2">
          {workflow ? <Zap size={20} className="text-slack-purple" /> : <ZapOff size={20} className="text-slack-purple" />}
          <h1 className="text-lg font-bold text-gray-800">
            {workflow ? "Edit Workflow" : "New Workflow"}
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={onCancel}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
          >
            <X size={16} />
            <span>Cancel</span>
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <Save size={16} />
            <span>{saving ? "Saving..." : "Save Workflow"}</span>
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-6 max-w-3xl">
        {error && (
          <div className="mb-4 p-3 rounded-md bg-slack-red/10 text-slack-red text-sm">
            {error}
          </div>
        )}

        {/* Basic info */}
        <div className="space-y-3 mb-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Workflow Name
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Auto-respond to support"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Description
            </label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="What does this workflow do?"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
        </div>

        {/* Trigger */}
        <div className="mb-6 p-4 rounded-lg border border-gray-200 bg-gray-50">
          <h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1.5">
            <Zap size={14} className="text-slack-purple" />
            Trigger
          </h3>
          <div className="space-y-2">
            <select
              value={triggerType}
              onChange={(e) => setTriggerType(e.target.value)}
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            >
              {TRIGGER_TYPES.map((t) => (
                <option key={t.value} value={t.value}>
                  {t.label}
                </option>
              ))}
            </select>
            {triggerType === "keyword_mention" && (
              <input
                type="text"
                value={triggerKeyword}
                onChange={(e) => setTriggerKeyword(e.target.value)}
                placeholder="Keyword to watch for"
                className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
              />
            )}
            <input
              type="text"
              value={triggerChannelId}
              onChange={(e) => setTriggerChannelId(e.target.value)}
              placeholder="Channel ID (optional — leave empty for all channels)"
              className="w-full px-3 py-2 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
        </div>

        {/* Steps */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-semibold text-gray-700">
              Steps
            </h3>
            <button
              onClick={addStep}
              className="flex items-center gap-1 px-2 py-1 rounded-md text-xs text-slack-purple hover:bg-slack-purple/10 transition-colors"
            >
              <Plus size={14} />
              <span>Add step</span>
            </button>
          </div>

          {steps.length === 0 ? (
            <div className="p-6 rounded-lg border-2 border-dashed border-gray-200 text-center text-gray-400 text-sm">
              No steps yet. Click &ldquo;Add step&rdquo; to build your workflow.
            </div>
          ) : (
            <div>
              {steps.map((step, index) => (
                <WorkflowStep
                  key={step.id || index}
                  step={step}
                  index={index}
                  totalSteps={steps.length}
                  onUpdate={updateStep}
                  onRemove={removeStep}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default WorkflowBuilder;