kontenhumas-fe/components/form/ApprovalWorkflowForm.tsx

"use client";
import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SaveIcon, EyeIcon, RotateCcwIcon } from "@/components/icons";
import { FormField } from "./common/FormField";
import { DynamicArray } from "./common/DynamicArray";
import { MultiSelect } from "./common/MultiSelect";
import {
  CreateApprovalWorkflowWithClientSettingsRequest,
  UpdateApprovalWorkflowWithClientSettingsRequest,
  ApprovalWorkflowStepRequest,
  ClientApprovalSettingsRequest,
  UserLevel,
  User,
  UserRole,
  ArticleCategory,
  createApprovalWorkflowWithClientSettings,
  updateApprovalWorkflowWithClientSettings,
  getUserLevels,
  getUsers,
  getUserRoles,
  getArticleCategories,
} from "@/service/approval-workflows";
import Swal from "sweetalert2";

interface ApprovalWorkflowFormProps {
  initialData?: CreateApprovalWorkflowWithClientSettingsRequest;
  workflowId?: number; // For update mode
  onSave?: (data: CreateApprovalWorkflowWithClientSettingsRequest) => void;
  onCancel?: () => void;
  isLoading?: boolean;
}

export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
  initialData,
  workflowId,
  onSave,
  onCancel,
  isLoading = false,
}) => {
  // Form state
  const [formData, setFormData] = useState<CreateApprovalWorkflowWithClientSettingsRequest>({
    name: "",
    description: "",
    isActive: true,
    isDefault: true,
    requiresApproval: true,
    autoPublish: false,
    steps: [],
    clientApprovalSettings: {
      requiresApproval: true,
      autoPublishArticles: false,
      approvalExemptUsers: [],
      approvalExemptRoles: [],
      approvalExemptCategories: [],
      requireApprovalFor: [],
      skipApprovalFor: [],
      isActive: true,
    },
  });

  // API data
  const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
  const [articleCategories, setArticleCategories] = useState<ArticleCategory[]>([]);

  // UI state
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set());
  const [isLoadingData, setIsLoadingData] = useState(true);

  // Get available user levels for a specific step (excluding already selected ones)
  const getAvailableUserLevels = (currentStepIndex: number) => {
    const usedLevelIds = new Set<number>();
    
    // Collect all user level IDs that are already used by other steps
    formData.steps.forEach((step, stepIndex) => {
      if (stepIndex !== currentStepIndex && step.conditionValue) {
        try {
          const conditionData = JSON.parse(step.conditionValue);
          if (conditionData.applies_to_levels && Array.isArray(conditionData.applies_to_levels)) {
            conditionData.applies_to_levels.forEach((levelId: number) => {
              usedLevelIds.add(levelId);
            });
          }
        } catch (error) {
          console.error('Error parsing conditionValue:', error);
        }
      }
    });
    
    // Filter out used levels and return available ones
    return userLevels.filter(level => !usedLevelIds.has(level.id));
  };

  // Load initial data
  useEffect(() => {
    if (initialData) {
      setFormData(initialData);
    }
  }, [initialData]);

  // Load API data
  useEffect(() => {
    const loadData = async () => {
      try {
        const [userLevelsRes, usersRes, userRolesRes, categoriesRes] = await Promise.all([
          getUserLevels(),
          getUsers(),
          getUserRoles(),
          getArticleCategories(),
        ]);

        if (!userLevelsRes?.error) setUserLevels(userLevelsRes?.data?.data || []);
        if (!usersRes?.error) setUsers(usersRes?.data || []);
        if (!userRolesRes?.error) setUserRoles(userRolesRes?.data || []);
        if (!categoriesRes?.error) setArticleCategories(categoriesRes?.data || []);
      } catch (error) {
        console.error("Error loading form data:", error);
      } finally {
        setIsLoadingData(false);
      }
    };

    loadData();
  }, []);

  // Validation
  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) {
      newErrors.name = "Workflow name is required";
    } else if (formData.name.trim().length < 3) {
      newErrors.name = "Workflow name must be at least 3 characters";
    }

    if (!formData.description.trim()) {
      newErrors.description = "Description is required";
    } else if (formData.description.trim().length < 3) {
      newErrors.description = "Description must be at least 3 characters";
    }

    if (formData.steps.length === 0) {
      newErrors.steps = "At least one workflow step is required";
    }

    // Validate steps
    formData.steps.forEach((step, index) => {
      if (!step.stepName.trim()) {
        newErrors[`steps.${index}.stepName`] = "Step name is required";
      }
      if (!step.requiredUserLevelId) {
        newErrors[`steps.${index}.requiredUserLevelId`] = "Required user level is required";
      }
      if (step.stepOrder <= 0) {
        newErrors[`steps.${index}.stepOrder`] = "Step order must be greater than 0";
      }
    });

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Form handlers
  const handleBasicInfoChange = (field: keyof CreateApprovalWorkflowWithClientSettingsRequest, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: "" }));
    }
  };

  const handleStepsChange = (steps: ApprovalWorkflowStepRequest[]) => {
    // Allow manual step order assignment for parallel steps
    // Don't auto-assign if user has manually set stepOrder
    const updatedSteps = steps.map((step, index) => {
      // If stepOrder is not set or is 0, auto-assign based on index
      if (!step.stepOrder || step.stepOrder === 0) {
        return {
          ...step,
          stepOrder: index + 1,
        };
      }
      // Keep existing stepOrder if manually set
      return step;
    });
    
    setFormData(prev => ({ ...prev, steps: updatedSteps }));
  };

  const renderStepForm = (step: ApprovalWorkflowStepRequest, index: number, onUpdate: (step: ApprovalWorkflowStepRequest) => void, onDelete: () => void) => {
    const stepErrors = Object.keys(errors).filter(key => key.startsWith(`steps.${index}`));
    
    // Check if this step has parallel steps (same stepOrder)
    const parallelSteps = formData.steps.filter((s, i) => s.stepOrder === step.stepOrder && i !== index);
    const isParallelStep = parallelSteps.length > 0;
    
    return (
      <div className="space-y-4">
        {/* Parallel Step Indicator */}
        {isParallelStep && (
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="text-sm font-medium text-blue-800">
                Parallel Step - Order {step.stepOrder}
              </span>
              <span className="text-xs text-blue-600">
                ({parallelSteps.length + 1} steps running simultaneously)
              </span>
            </div>
          </div>
        )}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <FormField
            label="Step Order"
            name={`stepOrder-${index}`}
            type="number"
            placeholder="1"
            value={step.stepOrder}
            onChange={(value) => onUpdate({ ...step, stepOrder: value ? Number(value) : index + 1 })}
            error={errors[`steps.${index}.stepOrder`]}
            min={1}
            helpText="Same order = parallel steps"
          />

          <FormField
            label="Step Name"
            name={`stepName-${index}`}
            type="text"
            placeholder="e.g., Editor Review, Manager Approval"
            value={step.stepName}
            onChange={(value) => onUpdate({ ...step, stepName: value })}
            error={errors[`steps.${index}.stepName`]}
            required
          />

          <FormField
            label="Required User Level"
            name={`requiredUserLevelId-${index}`}
            type="select"
            placeholder={userLevels.length > 0 ? "Select user level" : "No user levels available"}
            value={step.requiredUserLevelId}
            onChange={(value) => onUpdate({ ...step, requiredUserLevelId: Number(value) })}
            error={errors[`steps.${index}.requiredUserLevelId`]}
            options={userLevels.length > 0 ? userLevels.map(level => ({
              value: level.id,
              label: `${level.name} (Level ${level.levelNumber})`,
            })) : []}
            required
            disabled={userLevels.length === 0}
            helpText={userLevels.length === 0 ? "No user levels found. Please create user levels first." : undefined}
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            label="Auto Approve After Hours"
            name={`autoApproveAfterHours-${index}`}
            type="number"
            placeholder="Leave empty for manual approval"
            value={step.autoApproveAfterHours}
            onChange={(value) => onUpdate({ ...step, autoApproveAfterHours: value ? Number(value) : undefined })}
            helpText="Automatically approve after specified hours"
            min={1}
          />

          <div className="space-y-2">
            <FormField
              label="Can Skip This Step"
              name={`canSkip-${index}`}
              type="checkbox"
              value={step.canSkip || false}
              onChange={(value) => onUpdate({ ...step, canSkip: value })}
            />
            
            <FormField
              label="Is Active"
              name={`isActive-${index}`}
              type="checkbox"
              value={step.isActive !== false}
              onChange={(value) => onUpdate({ ...step, isActive: value })}
            />
          </div>
        </div>

        {/* Condition Settings */}
        <div className="space-y-4">
          <MultiSelect
            label="Applies to User Levels"
            placeholder={(() => {
              const availableLevels = getAvailableUserLevels(index);
              return availableLevels.length > 0 ? "Select user levels..." : "No available user levels";
            })()}
            options={(() => {
              const availableLevels = getAvailableUserLevels(index);
              return availableLevels.map(level => ({
                value: level.id,
                label: `${level.name} (Level ${level.levelNumber})`,
              }));
            })()}
            value={(() => {
              try {
                return step.conditionValue ? JSON.parse(step.conditionValue).applies_to_levels || [] : [];
              } catch {
                return [];
              }
            })()}
            onChange={(value) => {
              const conditionValue = JSON.stringify({ applies_to_levels: value });
              onUpdate({ ...step, conditionType: "user_level_hierarchy", conditionValue });
            }}
            searchable={true}
            disabled={getAvailableUserLevels(index).length === 0}
            helpText={(() => {
              const availableLevels = getAvailableUserLevels(index);
              const usedLevels = userLevels.length - availableLevels.length;
              
              if (availableLevels.length === 0) {
                return "All user levels are already assigned to other steps";
              } else if (usedLevels > 0) {
                return `${usedLevels} user level(s) already assigned to other steps. ${availableLevels.length} available.`;
              } else {
                return "Select which user levels this step applies to";
              }
            })()}
          />
        </div>
      </div>
    );
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      Swal.fire({
        title: "Validation Error",
        text: "Please fix the errors before submitting",
        icon: "error",
        confirmButtonText: "OK",
        customClass: {
          popup: 'swal-z-index-9999'
        }
      });
      return;
    }

    setIsSubmitting(true);
    
    try {
      // Hardcoded client approval settings
      const hardcodedClientSettings = {
        approvalExemptCategories: [],
        approvalExemptRoles: [],
        approvalExemptUsers: [],
        autoPublishArticles: true,
        isActive: true,
        requireApprovalFor: [],
        requiresApproval: true,
        skipApprovalFor: []
      };

      if (workflowId) {
        // Update mode
        const updateData: UpdateApprovalWorkflowWithClientSettingsRequest = {
          workflowId,
          name: formData.name,
          description: formData.description,
          isActive: formData.isActive || false,
          isDefault: formData.isDefault || false,
          steps: formData.steps.map(step => ({
            ...step,
            branchName: step.stepName, // branchName should be same as stepName
          })),
          clientSettings: hardcodedClientSettings
        };

        console.log("Update Data: ", updateData);

        const response = await updateApprovalWorkflowWithClientSettings(updateData);
        
        console.log("Update Response: ", response);

        if (response?.error) {
          Swal.fire({
            title: "Error",
            text: response?.message?.messages?.[0] || "Failed to update approval workflow",
            icon: "error",
            confirmButtonText: "OK",
            customClass: {
              popup: 'swal-z-index-9999'
            }
          });
        } else {
          Swal.fire({
            title: "Success",
            text: "Approval workflow updated successfully",
            icon: "success",
            confirmButtonText: "OK",
            customClass: {
              popup: 'swal-z-index-9999'
            }
          }).then(() => {
            // Call onSave to trigger parent refresh
            if (onSave) {
              onSave(formData);
            }
          });
        }
      } else {
        // Create mode
        const submitData = {
          ...formData,
          clientApprovalSettings: hardcodedClientSettings
        };

        console.log("Create Data: ", submitData);

        const response = await createApprovalWorkflowWithClientSettings(submitData);
        
        console.log("Create Response: ", response);

        if (response?.error) {
          Swal.fire({
            title: "Error",
            text: response?.message?.messages?.[0] || "Failed to create approval workflow",
            icon: "error",
            confirmButtonText: "OK",
            customClass: {
              popup: 'swal-z-index-9999'
            }
          });
        } else {
          Swal.fire({
            title: "Success",
            text: "Approval workflow created successfully",
            icon: "success",
            confirmButtonText: "OK",
            customClass: {
              popup: 'swal-z-index-9999'
            }
          }).then(() => {
            // Call onSave to trigger parent refresh
            if (onSave) {
              onSave(submitData);
            }
          });
        }
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      Swal.fire({
        title: "Error",
        text: "An unexpected error occurred",
        icon: "error",
        confirmButtonText: "OK",
        customClass: {
          popup: 'swal-z-index-9999'
        }
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleReset = () => {
    Swal.fire({
      title: "Reset Form",
      text: "Are you sure you want to reset all form data?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, reset",
      cancelButtonText: "Cancel",
      customClass: {
        popup: 'swal-z-index-9999'
      }
    }).then((result) => {
      if (result.isConfirmed) {
        setFormData({
          name: "",
          description: "",
          isActive: true,
          isDefault: false,
          requiresApproval: true,
          autoPublish: false,
          steps: [],
          clientApprovalSettings: {
            requiresApproval: true,
            autoPublishArticles: false,
            approvalExemptUsers: [],
            approvalExemptRoles: [],
            approvalExemptCategories: [],
            requireApprovalFor: [],
            skipApprovalFor: [],
            isActive: true,
          },
        });
        setErrors({});
      }
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {isLoadingData && (
        <div className="flex items-center justify-center py-8">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
          <span className="ml-2 text-gray-600">Loading form data...</span>
        </div>
      )}
      
      <Tabs defaultValue="basic" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="basic" disabled={isLoadingData}>Basic Information</TabsTrigger>
          <TabsTrigger value="steps" disabled={isLoadingData}>Workflow Steps</TabsTrigger>
          <TabsTrigger value="settings" disabled={isLoadingData}>Client Settings</TabsTrigger>
        </TabsList>

        {/* Basic Information Tab */}
        <TabsContent value="basic" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Workflow Basic Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <FormField
                label="Workflow Name"
                name="name"
                type="text"
                placeholder="e.g., Standard Article Approval"
                value={formData.name}
                onChange={(value) => handleBasicInfoChange("name", value)}
                error={errors.name}
                required
              />

              <FormField
                label="Workflow Description"
                name="description"
                type="textarea"
                placeholder="Describe the purpose and process of this workflow"
                value={formData.description}
                onChange={(value) => handleBasicInfoChange("description", value)}
                error={errors.description}
                required
                rows={4}
              />

              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <FormField
                  label="Is Active"
                  name="isActive"
                  type="checkbox"
                  value={formData.isActive}
                  onChange={(value) => handleBasicInfoChange("isActive", value)}
                />

                <FormField
                  label="Set as Default Workflow"
                  name="isDefault"
                  type="checkbox"
                  value={formData.isDefault}
                  onChange={(value) => handleBasicInfoChange("isDefault", value)}
                />

                <FormField
                  label="Requires Approval"
                  name="requiresApproval"
                  type="checkbox"
                  value={formData.requiresApproval}
                  onChange={(value) => handleBasicInfoChange("requiresApproval", value)}
                />

                <FormField
                  label="Auto Publish After Approval"
                  name="autoPublish"
                  type="checkbox"
                  value={formData.autoPublish}
                  onChange={(value) => handleBasicInfoChange("autoPublish", value)}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Workflow Steps Tab */}
        <TabsContent value="steps" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>Workflow Steps Configuration</span>
                <div className="text-sm text-gray-500">
                  {formData.steps.length} step{formData.steps.length !== 1 ? 's' : ''}
                  {(() => {
                    const parallelGroups = formData.steps.reduce((acc, step) => {
                      acc[step.stepOrder] = (acc[step.stepOrder] || 0) + 1;
                      return acc;
                    }, {} as Record<number, number>);
                    const parallelCount = Object.values(parallelGroups).filter(count => count > 1).length;
                    return parallelCount > 0 ? ` • ${parallelCount} parallel group${parallelCount !== 1 ? 's' : ''}` : '';
                  })()}
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <DynamicArray
                items={formData.steps}
                onItemsChange={handleStepsChange}
                renderItem={renderStepForm}
                addItemLabel="Add Workflow Step"
                emptyStateMessage="No workflow steps configured yet. Add at least one step to define the approval process."
                allowReorder={true}
                allowDuplicate={true}
              />
              {errors.steps && (
                <p className="text-red-500 text-sm mt-2">{errors.steps}</p>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Client Settings Tab */}
        <TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Client Approval Settings</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center py-8">
                <div className="text-gray-500 mb-4">
                  <div className="h-12 w-12 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">
                    <span className="text-gray-400 text-xl">⚙️</span>
                  </div>
                  <h3 className="text-lg font-medium text-gray-900 mb-2">Settings Pre-configured</h3>
                  <p className="text-gray-600">
                    Client approval settings are automatically configured with optimal defaults.
                  </p>
                </div>
                
                <div className="bg-gray-50 rounded-lg p-4 text-left max-w-md mx-auto">
                  <h4 className="font-medium text-gray-900 mb-2">Default Settings:</h4>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• Requires Approval: <span className="font-medium text-green-600">Yes</span></li>
                    <li>• Auto Publish Articles: <span className="font-medium text-green-600">Yes</span></li>
                    <li>• Is Active: <span className="font-medium text-green-600">Yes</span></li>
                    <li>• Exempt Users: <span className="font-medium text-gray-500">None</span></li>
                    <li>• Exempt Roles: <span className="font-medium text-gray-500">None</span></li>
                    <li>• Exempt Categories: <span className="font-medium text-gray-500">None</span></li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Form Actions */}
      <div className="flex items-center justify-between pt-6 border-t">
        <div className="flex items-center gap-2">
          <Button
            type="button"
            variant="outline"
            onClick={handleReset}
            disabled={isSubmitting}
          >
            <RotateCcwIcon className="h-4 w-4 mr-2" />
            Reset
          </Button>
        </div>

        <div className="flex items-center gap-2">
          {onCancel && (
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
          )}
          
          <Button
            type="submit"
            variant="outline"
            disabled={isSubmitting || isLoading || isLoadingData}
            className="flex items-center gap-2"
          >
            <SaveIcon className="h-4 w-4" />
            {isSubmitting ? "Saving..." : isLoadingData ? "Loading..." : workflowId ? "Update Workflow" : "Save Workflow"}
          </Button>
        </div>
      </div>
    </form>
  );
};