"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";
import { WorkflowBuilder } from "@/components/workflow/WorkflowBuilder";
import { WorkflowList } from "@/components/workflow/WorkflowList";
import { Workflow } from "@/lib/api";
import { LogOut, Settings, ArrowLeft, Plus, X } from "lucide-react";

export default function WorkflowsPage() {
  const { isAuthenticated, loading, logout } = useAuth();
  const router = useRouter();
  const [showBuilder, setShowBuilder] = useState(false);
  const [editingWorkflow, setEditingWorkflow] = useState<Workflow | null>(null);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  useEffect(() => {
    if (!loading && !isAuthenticated) {
      router.replace("/login");
    }
  }, [loading, isAuthenticated, router]);

  if (loading || (!isAuthenticated && !loading)) {
    return (
      <div className="flex h-screen items-center justify-center bg-slack-darkpurple">
        <div className="text-white text-lg animate-pulse">Loading ChatApp...</div>
      </div>
    );
  }

  const handleEdit = (wf: Workflow) => {
    setEditingWorkflow(wf);
    setShowBuilder(true);
  };

  const handleSave = () => {
    setShowBuilder(false);
    setEditingWorkflow(null);
    setRefreshTrigger((t) => t + 1);
  };

  const handleCancel = () => {
    setShowBuilder(false);
    setEditingWorkflow(null);
  };

  return (
    <div className="flex h-screen bg-white">
      {/* Far left: workspace sidebar */}
      <div className="w-[60px] bg-slack-purple flex flex-col items-center py-4 gap-3">
        <div className="w-10 h-10 rounded-md bg-white text-slack-purple flex items-center justify-center font-bold text-lg">
          CA
        </div>
        <button
          onClick={() => router.push("/chat")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Back to chat"
        >
          <ArrowLeft size={20} />
        </button>
        <button
          onClick={() => router.push("/settings")}
          className="w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Settings"
        >
          <Settings size={20} />
        </button>
        <button
          onClick={logout}
          className="mt-auto w-10 h-10 rounded-md hover:bg-slack-lightpurple flex items-center justify-center text-white"
          title="Sign out"
        >
          <LogOut size={20} />
        </button>
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
          <div className="flex items-center gap-2">
            <h1 className="text-lg font-bold text-gray-800">Workflows</h1>
            <span className="text-sm text-gray-400">Automation builder</span>
          </div>
          <div className="flex items-center gap-2">
            {showBuilder ? (
              <button
                onClick={handleCancel}
                className="flex items-center gap-1.5 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={() => {
                  setEditingWorkflow(null);
                  setShowBuilder(true);
                }}
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors"
              >
                <Plus size={16} />
                <span>New Workflow</span>
              </button>
            )}
          </div>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-hidden">
          {showBuilder ? (
            <WorkflowBuilder
              workflow={editingWorkflow}
              onSave={handleSave}
              onCancel={handleCancel}
            />
          ) : (
            <div className="flex-1 overflow-y-auto p-6 max-w-3xl">
              <WorkflowList
                onEdit={handleEdit}
                refreshTrigger={refreshTrigger}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}