"use client";

import { useEffect, useState, useCallback } from "react";
import { getWorkflows, deleteWorkflow, toggleWorkflow, Workflow } from "@/lib/api";
import { Workflow as WorkflowIcon, Trash2, Power, PowerOff, RefreshCw, Zap } from "lucide-react";

interface WorkflowListProps {
  onSelect?: (workflow: Workflow) => void;
  onEdit?: (workflow: Workflow) => void;
  refreshTrigger?: number;
}

export function WorkflowList({ onSelect, onEdit, refreshTrigger }: WorkflowListProps) {
  const [workflows, setWorkflows] = useState<Workflow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadWorkflows = useCallback(() => {
    setLoading(true);
    setError("");
    getWorkflows()
      .then((data) => setWorkflows(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load workflows:", err);
        setError("Failed to load workflows");
      })
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    loadWorkflows();
  }, [loadWorkflows, refreshTrigger]);

  const handleToggle = (wf: Workflow) => {
    toggleWorkflow(wf.id, !wf.enabled)
      .then((updated) => {
        setWorkflows((prev) =>
          prev.map((w) => (w.id === wf.id ? updated : w))
        );
      })
      .catch((err) => console.error("Failed to toggle workflow:", err));
  };

  const handleDelete = (wf: Workflow) => {
    if (!confirm(`Delete workflow "${wf.name}"?`)) return;
    deleteWorkflow(wf.id)
      .then(() => {
        setWorkflows((prev) => prev.filter((w) => w.id !== wf.id));
      })
      .catch((err) => console.error("Failed to delete workflow:", err));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 py-12">
        <RefreshCw size={20} className="animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-slack-red py-12 text-sm">
        {error}
        <button
          onClick={loadWorkflows}
          className="ml-2 text-slack-purple hover:underline"
        >
          Retry
        </button>
      </div>
    );
  }

  if (workflows.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <WorkflowIcon size={48} className="mb-3 opacity-50" />
        <p className="text-sm">No workflows yet.</p>
        <p className="text-xs mt-1">Create a workflow to automate repetitive tasks.</p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {workflows.map((wf) => (
        <div
          key={wf.id}
          className="group p-4 rounded-lg border border-gray-200 bg-white shadow-sm hover:border-slack-purple/30 transition-colors"
        >
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <Zap
                  size={16}
                  className={wf.enabled ? "text-slack-green" : "text-gray-300"}
                />
                <h3
                  className="font-semibold text-gray-800 cursor-pointer hover:text-slack-purple"
                  onClick={() => onSelect?.(wf)}
                >
                  {wf.name}
                </h3>
                <span
                  className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${
                    wf.enabled
                      ? "bg-slack-green/10 text-slack-green"
                      : "bg-gray-100 text-gray-400"
                  }`}
                >
                  {wf.enabled ? "Active" : "Disabled"}
                </span>
              </div>
              {wf.description && (
                <p className="text-sm text-gray-500 mt-1">{wf.description}</p>
              )}
              <div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
                {wf.trigger && (
                  <span className="flex items-center gap-1">
                    <span className="font-medium">Trigger:</span>
                    {wf.trigger.type}
                    {wf.trigger.keyword ? ` "${wf.trigger.keyword}"` : ""}
                  </span>
                )}
                {wf.steps && wf.steps.length > 0 && (
                  <span>{wf.steps.length} step(s)</span>
                )}
              </div>
            </div>

            <div className="flex items-center gap-1 flex-shrink-0">
              <button
                onClick={() => onEdit?.(wf)}
                className="px-2 py-1 text-xs text-gray-500 hover:text-slack-purple hover:bg-gray-50 rounded transition-colors"
              >
                Edit
              </button>
              <button
                onClick={() => handleToggle(wf)}
                className="p-1.5 rounded text-gray-400 hover:text-slack-green hover:bg-gray-50 transition-colors"
                title={wf.enabled ? "Disable" : "Enable"}
              >
                {wf.enabled ? <Power size={14} /> : <PowerOff size={14} />}
              </button>
              <button
                onClick={() => handleDelete(wf)}
                className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
                title="Delete"
              >
                <Trash2 size={14} />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export default WorkflowList;