kontenhumas-fe/components/modals/WorkflowSetupModal.tsx

"use client";
import React, { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { AlertTriangleIcon, CheckCircleIcon, SettingsIcon } from "@/components/icons";
import { useRouter } from "next/navigation";

interface WorkflowSetupModalProps {
  isOpen: boolean;
  onClose: () => void;
  workflowInfo?: {
    hasWorkflowSetup: boolean;
    defaultWorkflowId?: number;
    defaultWorkflowName?: string;
    requiresApproval?: boolean;
    autoPublishArticles?: boolean;
    isApprovalActive?: boolean;
  };
}

export default function WorkflowSetupModal({ isOpen, onClose, workflowInfo }: WorkflowSetupModalProps) {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
    }
  }, [isOpen]);

  const handleClose = () => {
    setIsVisible(false);
    setTimeout(() => {
      onClose();
    }, 200);
  };

  const handleSetupWorkflow = () => {
    handleClose();
    router.push("/admin/settings/tenant");
  };

  if (!isOpen) return null;

  return (
    <Dialog open={isVisible} onOpenChange={handleClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            {workflowInfo?.hasWorkflowSetup ? (
              <CheckCircleIcon className="h-5 w-5 text-green-600" />
            ) : (
              <AlertTriangleIcon className="h-5 w-5 text-orange-600" />
            )}
            Workflow Status
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {!workflowInfo?.hasWorkflowSetup ? (
            // No Workflow Setup
            <Card className="border-orange-200 bg-orange-50">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <AlertTriangleIcon className="h-6 w-6 text-orange-600 mt-1" />
                  <div className="flex-1">
                    <h3 className="font-medium text-orange-900 mb-2">
                      Workflow Belum Dikonfigurasi
                    </h3>
                    <p className="text-sm text-orange-700 mb-4">
                      Anda belum melakukan setup workflow, silahkan setup terlebih dahulu.
                    </p>
                    <div className="flex gap-2">
                      <Button 
                        onClick={handleSetupWorkflow}
                        className="bg-orange-600 hover:bg-orange-700 text-white"
                        size="sm"
                      >
                        <SettingsIcon className="h-4 w-4 mr-2" />
                        Setup Workflow
                      </Button>
                      <Button 
                        variant="outline" 
                        onClick={handleClose}
                        size="sm"
                      >
                        Nanti
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : (
            // Workflow Setup Complete
            <Card className="border-green-200 bg-green-50">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <CheckCircleIcon className="h-6 w-6 text-green-600 mt-1" />
                  <div className="flex-1">
                    <h3 className="font-medium text-green-900 mb-2">
                      Workflow Sudah Dikonfigurasi
                    </h3>
                    <div className="space-y-2 text-sm text-green-700">
                      <div className="flex items-center justify-between">
                        <span>Workflow:</span>
                        <span className="font-medium">{workflowInfo.defaultWorkflowName}</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span>Requires Approval:</span>
                        <span className={`font-medium ${workflowInfo.requiresApproval ? 'text-green-600' : 'text-gray-500'}`}>
                          {workflowInfo.requiresApproval ? 'Yes' : 'No'}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span>Auto Publish:</span>
                        <span className={`font-medium ${workflowInfo.autoPublishArticles ? 'text-green-600' : 'text-gray-500'}`}>
                          {workflowInfo.autoPublishArticles ? 'Yes' : 'No'}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span>Status:</span>
                        <span className={`font-medium ${workflowInfo.isApprovalActive ? 'text-green-600' : 'text-gray-500'}`}>
                          {workflowInfo.isApprovalActive ? 'Active' : 'Inactive'}
                        </span>
                      </div>
                    </div>
                    <div className="flex gap-2 mt-4">
                      <Button 
                        onClick={handleSetupWorkflow}
                        variant="outline"
                        size="sm"
                      >
                        <SettingsIcon className="h-4 w-4 mr-2" />
                        Manage Workflow
                      </Button>
                      <Button 
                        onClick={handleClose}
                        size="sm"
                        className="bg-green-600 hover:bg-green-700 text-white"
                      >
                        OK
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}