<template>
  <RsModal v-model="showModal" title="Process Flow Templates" size="xl" position="center">
    <div class="process-templates-container">
      <!-- Templates Categories -->
      <div class="mb-6">
        <div class="flex space-x-2 mb-4 border-b border-gray-200">
          <button 
            v-for="cat in categories" 
            :key="cat.id"
            @click="activeCategory = cat.id"
            class="px-4 py-2 text-sm font-medium transition-colors duration-200"
            :class="activeCategory === cat.id ? 'border-b-2 border-blue-500 text-blue-600 bg-blue-50' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
          >
            {{ cat.name }}
          </button>
        </div>
      </div>
      
      <!-- Templates Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div v-for="template in filteredTemplates" :key="template.id" class="template-card border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 bg-white">
          <div class="template-preview bg-gradient-to-br from-gray-50 to-gray-100 p-4 border-b border-gray-200 relative">
            <div class="w-full h-full flex flex-col items-center justify-center">
              <div class="template-icon-wrapper">
                <Icon :name="getTemplateIcon(template)" class="w-12 h-12 text-gray-500" />
              </div>
              <span class="text-sm text-gray-600 mt-2 font-medium">{{ template.name }}</span>
            </div>
            <!-- Preview overlay -->
            <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition-all duration-200 flex items-center justify-center">
              <button 
                @click="previewTemplate(template)"
                class="preview-btn opacity-0 hover:opacity-100 transition-opacity duration-200 bg-white bg-opacity-90 hover:bg-opacity-100 text-gray-700 px-3 py-1 rounded-full text-xs font-medium shadow-md border border-gray-200"
              >
                <Icon name="material-symbols:visibility" class="w-4 h-4 mr-1" />
                Preview
              </button>
            </div>
          </div>
          
          <div class="p-4">
            <h3 class="font-semibold text-lg mb-2 text-gray-800">{{ template.name }}</h3>
            <p class="text-gray-600 text-sm mb-4 leading-relaxed">{{ template.description }}</p>
            
            <div class="flex items-center text-xs text-gray-500 mb-4 space-x-4">
              <div class="flex items-center">
                <Icon name="material-symbols:account-tree" class="mr-1 w-3 h-3" />
                <span>{{ template.nodeCount }} nodes</span>
              </div>
              <div class="flex items-center">
                <Icon name="material-symbols:route" class="mr-1 w-3 h-3" />
                <span>{{ template.edgeCount }} connections</span>
              </div>
              <div class="flex items-center">
                <Icon name="material-symbols:timer" class="mr-1 w-3 h-3" />
                <span class="capitalize">{{ template.complexity }}</span>
              </div>
            </div>
            
            <div class="flex space-x-2">
              <RsButton 
                @click="previewTemplate(template)" 
                variant="secondary" 
                size="sm" 
                class="flex-1"
              >
                <Icon name="material-symbols:visibility" class="w-4 h-4 mr-1" />
                Preview
              </RsButton>
              <RsButton 
                @click="useTemplate(template)" 
                variant="primary" 
                size="sm" 
                class="flex-1"
              >
                <Icon name="material-symbols:add" class="w-4 h-4 mr-1" />
                Use Template
              </RsButton>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Empty State -->
      <div v-if="filteredTemplates.length === 0" class="flex flex-col items-center justify-center py-12 text-gray-500">
        <Icon name="material-symbols:category-outline" class="w-16 h-16 mb-4 text-gray-300" />
        <p class="text-base font-medium">No templates found</p>
        <p class="text-sm mt-1">Try selecting a different category</p>
      </div>
    </div>
  </RsModal>

  <!-- Preview Modal -->
  <RsModal v-model="showPreviewModal" title="Template Preview" size="2xl" position="center">
    <div v-if="selectedTemplate" class="template-preview-container">
      <!-- Template Info -->
      <div class="mb-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-start justify-between mb-3">
          <div>
            <h2 class="text-xl font-semibold text-gray-800 mb-1">{{ selectedTemplate.name }}</h2>
            <p class="text-gray-600">{{ selectedTemplate.description }}</p>
          </div>
          <div class="flex items-center space-x-2">
            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full capitalize">
              {{ selectedTemplate.complexity }}
            </span>
            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
              {{ selectedTemplate.category }}
            </span>
          </div>
        </div>
        
        <div class="flex items-center space-x-6 text-sm text-gray-600">
          <div class="flex items-center">
            <Icon name="material-symbols:account-tree" class="mr-1 w-4 h-4" />
            <span>{{ selectedTemplate.nodeCount }} nodes</span>
          </div>
          <div class="flex items-center">
            <Icon name="material-symbols:route" class="mr-1 w-4 h-4" />
            <span>{{ selectedTemplate.edgeCount }} connections</span>
          </div>
          <div class="flex items-center">
            <Icon name="material-symbols:data-object" class="mr-1 w-4 h-4" />
            <span>{{ selectedTemplate.variables?.length || 0 }} variables</span>
          </div>
        </div>
      </div>

      <!-- Process Flow Preview -->
      <div class="mb-6">
        <h3 class="text-lg font-medium text-gray-800 mb-3">Process Flow</h3>
        <div class="process-flow-preview bg-white border border-gray-200 rounded-lg h-96 overflow-hidden">
          <VueFlow
            v-model="previewFlow"
            :nodes="previewNodes"
            :edges="previewEdges"
            :node-types="customNodeTypes"
            :default-viewport="{ x: 0, y: 0, zoom: 0.8 }"
            :min-zoom="0.5"
            :max-zoom="1.5"
            :pan-on-drag="true"
            :zoom-on-scroll="true"
            :pan-on-scroll="false"
            :zoom-on-double-click="false"
            :select-nodes-on-drag="false"
            :nodes-draggable="false"
            :nodes-connectable="false"
            :elements-selectable="false"
            :delete-key-code="null"
            class="preview-vue-flow"
                      >
              <Background pattern-color="#e2e8f0" gap="20" />
              <Controls position="bottom-right" />
              <MiniMap position="top-right" />
            </VueFlow>
        </div>
      </div>

      <!-- Variables -->
      <div class="mb-6" v-if="selectedTemplate.variables && selectedTemplate.variables.length > 0">
        <h3 class="text-lg font-medium text-gray-800 mb-3">Process Variables</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <div 
            v-for="variable in selectedTemplate.variables" 
            :key="variable.name"
            class="variable-item p-3 bg-gray-50 rounded-lg border border-gray-200"
          >
            <div class="flex items-center justify-between mb-1">
              <span class="font-medium text-sm text-gray-800">{{ variable.name }}</span>
              <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                {{ variable.type }}
              </span>
            </div>
            <p class="text-xs text-gray-600">{{ variable.description }}</p>
            <div v-if="variable.defaultValue !== undefined && variable.defaultValue !== ''" class="mt-1">
              <span class="text-xs text-gray-500">Default: </span>
              <span class="text-xs font-mono bg-gray-200 px-1 rounded">{{ variable.defaultValue }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
        <RsButton @click="showPreviewModal = false" variant="secondary" size="sm">
          Close
        </RsButton>
        <RsButton @click="useTemplateFromPreview" variant="primary" size="sm">
          <Icon name="material-symbols:add" class="w-4 h-4 mr-1" />
          Use This Template
        </RsButton>
      </div>
    </div>
  </RsModal>
</template>

<script setup>
import { VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
import { MiniMap } from '@vue-flow/minimap';
import { markRaw } from 'vue';
import "@vue-flow/core/dist/style.css";
import "@vue-flow/core/dist/theme-default.css";
import "@vue-flow/controls/dist/style.css";
import "@vue-flow/minimap/dist/style.css";

// Import custom node components
import StartNode from "~/components/process-flow/custom/StartNode.vue";
import EndNode from "~/components/process-flow/custom/EndNode.vue";
import FormNode from "~/components/process-flow/custom/FormNode.vue";
import ApiNode from "~/components/process-flow/custom/ApiNode.vue";
import GatewayNode from "~/components/process-flow/custom/GatewayNode.vue";
import ScriptNode from "~/components/process-flow/custom/ScriptNode.vue";
import BusinessRuleNode from "~/components/process-flow/custom/BusinessRuleNode.vue";
import NotificationNode from "~/components/process-flow/custom/NotificationNode.vue";
import HtmlNode from "~/components/process-flow/custom/HtmlNode.vue";
import SubprocessNode from "~/components/process-flow/custom/SubprocessNode.vue";

// Create nodeTypes object with markRaw to prevent reactivity issues
const customNodeTypes = {
  'start': markRaw(StartNode),
  'end': markRaw(EndNode),
  'form': markRaw(FormNode),
  'api': markRaw(ApiNode),
  'gateway': markRaw(GatewayNode),
  'script': markRaw(ScriptNode),
  'business-rule': markRaw(BusinessRuleNode),
  'notification': markRaw(NotificationNode),
  'html': markRaw(HtmlNode),
  'subprocess': markRaw(SubprocessNode)
};

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'select-template']);

const showModal = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// Preview modal state
const showPreviewModal = ref(false);
const selectedTemplate = ref(null);

// Categories
const categories = [
  { id: 'all', name: 'All Templates' },
  { id: 'approval', name: 'Approval Workflows' },
  { id: 'onboarding', name: 'Onboarding' },
  { id: 'support', name: 'Support & Service' },
  { id: 'business', name: 'Business Operations' },
  { id: 'automation', name: 'Automation' }
];

// Active category
const activeCategory = ref('all');

// Process flow templates
const templates = [
  {
    id: 'simple-approval',
    name: 'Simple Approval Workflow',
    description: 'A basic approval process with form submission, review, and notification.',
    category: 'approval',
    complexity: 'Simple',
    nodeCount: 6,
    edgeCount: 5,
    variables: [
      {
        name: 'approval_status',
        type: 'string',
        scope: 'process',
        description: 'Status of the approval request (approved/rejected)',
        defaultValue: 'pending'
      },
      {
        name: 'requester_email',
        type: 'string',
        scope: 'process',
        description: 'Email address of the person who submitted the request',
        defaultValue: ''
      },
      {
        name: 'manager_email',
        type: 'string',
        scope: 'process',
        description: 'Email address of the approving manager',
        defaultValue: ''
      }
    ],
    nodes: [
      {
        id: 'start-1',
        type: 'start',
        position: { x: 100, y: 100 },
        data: {
          label: 'Start',
          description: 'Begin approval process',
          backgroundColor: '#dcfce7',
          borderColor: '#10b981',
          textColor: '#065f46',
          shape: 'circle'
        }
      },
      {
        id: 'form-1',
        type: 'form',
        position: { x: 300, y: 100 },
        data: {
          label: 'Submit Request',
          description: 'Employee submits approval request',
          formId: null,
          formName: 'Approval Request Form',
          backgroundColor: '#faf5ff',
          borderColor: '#9333ea',
          textColor: '#6b21a8',
          shape: 'rectangle'
        }
      },
      {
        id: 'notification-1',
        type: 'notification',
        position: { x: 500, y: 100 },
        data: {
          label: 'Notify Manager',
          description: 'Send notification to manager',
          notificationType: 'info',
          recipientType: 'role',
          recipientRole: 'manager',
          subject: 'New approval request',
          message: 'A new approval request requires your review.',
          priority: 'medium',
          backgroundColor: '#f0f9ff',
          borderColor: '#0ea5e9',
          textColor: '#0284c7',
          shape: 'rectangle'
        }
      },
      {
        id: 'form-2',
        type: 'form',
        position: { x: 700, y: 100 },
        data: {
          label: 'Manager Review',
          description: 'Manager reviews and approves/rejects',
          formId: null,
          formName: 'Manager Review Form',
          backgroundColor: '#faf5ff',
          borderColor: '#9333ea',
          textColor: '#6b21a8',
          shape: 'rectangle'
        }
      },
      {
        id: 'gateway-1',
        type: 'gateway',
        position: { x: 900, y: 100 },
        data: {
          label: 'Approved?',
          description: 'Check if request was approved',
          conditions: [
            {
              variable: 'approval_status',
              operator: 'eq',
              value: 'approved',
              output: 'Approved'
            }
          ],
          defaultPath: 'Rejected',
          backgroundColor: '#fff7ed',
          borderColor: '#f97316',
          textColor: '#c2410c',
          shape: 'diamond'
        }
      },
      {
        id: 'notification-2',
        type: 'notification',
        position: { x: 1100, y: 50 },
        data: {
          label: 'Notify Approval',
          description: 'Send approval notification',
          notificationType: 'success',
          recipientType: 'variable',
          recipientVariable: 'requester_email',
          subject: 'Request Approved',
          message: 'Your request has been approved.',
          priority: 'high',
          backgroundColor: '#f0f9ff',
          borderColor: '#0ea5e9',
          textColor: '#0284c7',
          shape: 'rectangle'
        }
      },
      {
        id: 'notification-3',
        type: 'notification',
        position: { x: 1100, y: 150 },
        data: {
          label: 'Notify Rejection',
          description: 'Send rejection notification',
          notificationType: 'warning',
          recipientType: 'variable',
          recipientVariable: 'requester_email',
          subject: 'Request Rejected',
          message: 'Your request has been rejected.',
          priority: 'medium',
          backgroundColor: '#f0f9ff',
          borderColor: '#0ea5e9',
          textColor: '#0284c7',
          shape: 'rectangle'
        }
      },
      {
        id: 'end-1',
        type: 'end',
        position: { x: 1300, y: 100 },
        data: {
          label: 'End',
          description: 'Process completed',
          backgroundColor: '#fee2e2',
          borderColor: '#dc2626',
          textColor: '#991b1b',
          shape: 'circle'
        }
      }
    ],
    edges: [
      { id: 'e1', source: 'start-1', target: 'form-1', sourceHandle: 'start-1-bottom', targetHandle: 'form-1-top', type: 'smoothstep' },
      { id: 'e2', source: 'form-1', target: 'notification-1', sourceHandle: 'form-1-bottom', targetHandle: 'notification-1-top', type: 'smoothstep' },
      { id: 'e3', source: 'notification-1', target: 'form-2', sourceHandle: 'notification-1-bottom', targetHandle: 'form-2-top', type: 'smoothstep' },
      { id: 'e4', source: 'form-2', target: 'gateway-1', sourceHandle: 'form-2-bottom', targetHandle: 'gateway-1-top', type: 'smoothstep' },
      { id: 'e5', source: 'gateway-1', target: 'notification-2', sourceHandle: 'gateway-1-right', targetHandle: 'notification-2-left', type: 'smoothstep', label: 'Approved' },
      { id: 'e6', source: 'gateway-1', target: 'notification-3', sourceHandle: 'gateway-1-bottom', targetHandle: 'notification-3-left', type: 'smoothstep', label: 'Rejected' },
      { id: 'e7', source: 'notification-2', target: 'end-1', sourceHandle: 'notification-2-bottom', targetHandle: 'end-1-top', type: 'smoothstep' },
      { id: 'e8', source: 'notification-3', target: 'end-1', sourceHandle: 'notification-3-bottom', targetHandle: 'end-1-left', type: 'smoothstep' }
    ]
  },
  {
    id: 'employee-onboarding',
    name: 'Employee Onboarding',
    description: 'Complete employee onboarding process with multiple stages and notifications.',
    category: 'onboarding',
    complexity: 'Complex',
    nodeCount: 9,
    edgeCount: 8,
    variables: [
      {
        name: 'employee_name',
        type: 'string',
        scope: 'process',
        description: 'Full name of the new employee',
        defaultValue: ''
      },
      {
        name: 'employee_email',
        type: 'string',
        scope: 'process',
        description: 'Email address of the new employee',
        defaultValue: ''
      },
      {
        name: 'age',
        type: 'int',
        scope: 'process',
        description: 'Age of the employee',
        defaultValue: 18
      },
      {
        name: 'age_valid',
        type: 'boolean',
        scope: 'process',
        description: 'Whether the employee meets age requirements',
        defaultValue: false
      },
      {
        name: 'employee_account',
        type: 'object',
        scope: 'process',
        description: 'Employee account creation response data',
        defaultValue: {}
      }
    ],
    nodes: [
      {
        id: 'start-2',
        type: 'start',
        position: { x: 100, y: 200 },
        data: {
          label: 'Start',
          description: 'Begin onboarding process'
        }
      },
      {
        id: 'form-3',
        type: 'form',
        position: { x: 300, y: 200 },
        data: {
          label: 'Personal Info',
          description: 'Collect employee personal information',
          formId: null,
          formName: 'Employee Personal Information'
        }
      },
      {
        id: 'business-rule-1',
        type: 'business-rule',
        position: { x: 500, y: 200 },
        data: {
          label: 'Validate Info',
          description: 'Validate employee information',
          ruleGroups: [
            {
              name: 'Age Validation',
              conditions: [
                { 
                  variable: 'age', 
                  operator: 'gte', 
                  value: '18',
                  minValue: null,
                  maxValue: null
                }
              ],
              actions: [
                { 
                  type: 'set_variable', 
                  variable: 'age_valid', 
                  value: 'true' 
                }
              ]
            }
          ]
        }
      },
      {
        id: 'api-1',
        type: 'api',
        position: { x: 700, y: 200 },
        data: {
          label: 'Create Account',
          description: 'Create employee account in system',
          apiMethod: 'POST',
          apiUrl: '/api/employees/create',
          requestBody: '{"name": "{{employee_name}}", "email": "{{employee_email}}"}',
          outputVariable: 'employee_account'
        }
      },
      {
        id: 'form-4',
        type: 'form',
        position: { x: 900, y: 200 },
        data: {
          label: 'Equipment Request',
          description: 'Request necessary equipment',
          formId: null,
          formName: 'Equipment Request Form'
        }
      },
      {
        id: 'notification-4',
        type: 'notification',
        position: { x: 1100, y: 200 },
        data: {
          label: 'Notify IT',
          description: 'Notify IT department about equipment',
          notificationType: 'info',
          recipientType: 'role',
          recipientRole: 'it_admin',
          subject: 'New employee equipment request',
          message: 'Please prepare equipment for new employee.',
          priority: 'medium'
        }
      },
      {
        id: 'form-5',
        type: 'form',
        position: { x: 1300, y: 200 },
        data: {
          label: 'Training Schedule',
          description: 'Schedule training sessions',
          formId: null,
          formName: 'Training Schedule Form'
        }
      },
      {
        id: 'notification-5',
        type: 'notification',
        position: { x: 1500, y: 200 },
        data: {
          label: 'Welcome Email',
          description: 'Send welcome email to employee',
          notificationType: 'success',
          recipientType: 'variable',
          recipientVariable: 'employee_email',
          subject: 'Welcome to the team!',
          message: 'Welcome to our company! Your onboarding is complete.',
          priority: 'high'
        }
      },
      {
        id: 'end-2',
        type: 'end',
        position: { x: 1700, y: 200 },
        data: {
          label: 'End',
          description: 'Onboarding completed'
        }
      }
    ],
    edges: [
      { id: 'e9', source: 'start-2', target: 'form-3', sourceHandle: 'start-2-bottom', targetHandle: 'form-3-top', type: 'smoothstep' },
      { id: 'e10', source: 'form-3', target: 'business-rule-1', sourceHandle: 'form-3-bottom', targetHandle: 'business-rule-1-top', type: 'smoothstep' },
      { id: 'e11', source: 'business-rule-1', target: 'api-1', sourceHandle: 'business-rule-1-bottom', targetHandle: 'api-1-top', type: 'smoothstep' },
      { id: 'e12', source: 'api-1', target: 'form-4', sourceHandle: 'api-1-bottom', targetHandle: 'form-4-top', type: 'smoothstep' },
      { id: 'e13', source: 'form-4', target: 'notification-4', sourceHandle: 'form-4-bottom', targetHandle: 'notification-4-top', type: 'smoothstep' },
      { id: 'e14', source: 'notification-4', target: 'form-5', sourceHandle: 'notification-4-bottom', targetHandle: 'form-5-top', type: 'smoothstep' },
      { id: 'e15', source: 'form-5', target: 'notification-5', sourceHandle: 'form-5-bottom', targetHandle: 'notification-5-top', type: 'smoothstep' },
      { id: 'e16', source: 'notification-5', target: 'end-2', sourceHandle: 'notification-5-bottom', targetHandle: 'end-2-top', type: 'smoothstep' }
    ]
  },
  {
    id: 'support-ticket',
    name: 'Support Ticket Process',
    description: 'Customer support ticket workflow with escalation and resolution tracking.',
    category: 'support',
    complexity: 'Medium',
    nodeCount: 8,
    edgeCount: 9,
    variables: [
      {
        name: 'issue_type',
        type: 'string',
        scope: 'process',
        description: 'Type of issue reported (system_down, bug, feature_request, etc.)',
        defaultValue: 'general'
      },
      {
        name: 'priority',
        type: 'string',
        scope: 'process',
        description: 'Priority level of the ticket (high, medium, low)',
        defaultValue: 'medium'
      },
      {
        name: 'customer_email',
        type: 'string',
        scope: 'process',
        description: 'Email address of the customer who submitted the ticket',
        defaultValue: ''
      },
      {
        name: 'ticket_id',
        type: 'string',
        scope: 'process',
        description: 'Unique identifier for the support ticket',
        defaultValue: ''
      }
    ],
    nodes: [
      {
        id: 'start-3',
        type: 'start',
        position: { x: 100, y: 300 },
        data: {
          label: 'Start',
          description: 'Customer support request initiated'
        }
      },
      {
        id: 'form-6',
        type: 'form',
        position: { x: 300, y: 300 },
        data: {
          label: 'Submit Ticket',
          description: 'Customer submits support ticket',
          formId: null,
          formName: 'Support Ticket Form'
        }
      },
      {
        id: 'business-rule-2',
        type: 'business-rule',
        position: { x: 500, y: 300 },
        data: {
          label: 'Categorize Priority',
          description: 'Automatically set ticket priority',
          ruleGroups: [
            {
              name: 'High Priority',
              conditions: [
                { 
                  variable: 'issue_type', 
                  operator: 'eq', 
                  value: 'system_down',
                  minValue: null,
                  maxValue: null
                }
              ],
              actions: [
                { 
                  type: 'set_variable', 
                  variable: 'priority', 
                  value: 'high' 
                }
              ]
            },
            {
              name: 'Medium Priority',
              conditions: [
                { 
                  variable: 'issue_type', 
                  operator: 'eq', 
                  value: 'bug',
                  minValue: null,
                  maxValue: null
                }
              ],
              actions: [
                { 
                  type: 'set_variable', 
                  variable: 'priority', 
                  value: 'medium' 
                }
              ]
            }
          ]
        }
      },
      {
        id: 'gateway-2',
        type: 'gateway',
        position: { x: 700, y: 300 },
        data: {
          label: 'High Priority?',
          description: 'Check if ticket is high priority',
          conditions: [
            {
              variable: 'priority',
              operator: 'eq',
              value: 'high',
              output: 'High Priority'
            }
          ],
          defaultPath: 'Normal Priority'
        }
      },
      {
        id: 'notification-6',
        type: 'notification',
        position: { x: 900, y: 200 },
        data: {
          label: 'Escalate to Senior',
          description: 'Notify senior support team',
          notificationType: 'warning',
          recipientType: 'role',
          recipientRole: 'senior_support',
          subject: 'High priority ticket escalation',
          message: 'High priority support ticket requires immediate attention.',
          priority: 'high'
        }
      },
      {
        id: 'notification-7',
        type: 'notification',
        position: { x: 900, y: 400 },
        data: {
          label: 'Assign to Support',
          description: 'Assign to regular support team',
          notificationType: 'info',
          recipientType: 'role',
          recipientRole: 'support',
          subject: 'New support ticket assigned',
          message: 'New support ticket has been assigned to you.',
          priority: 'medium'
        }
      },
      {
        id: 'form-7',
        type: 'form',
        position: { x: 1100, y: 300 },
        data: {
          label: 'Resolve Ticket',
          description: 'Support agent resolves the ticket',
          formId: null,
          formName: 'Ticket Resolution Form'
        }
      },
      {
        id: 'notification-8',
        type: 'notification',
        position: { x: 1300, y: 300 },
        data: {
          label: 'Notify Customer',
          description: 'Send resolution notification to customer',
          notificationType: 'success',
          recipientType: 'variable',
          recipientVariable: 'customer_email',
          subject: 'Your support ticket has been resolved',
          message: 'Your support ticket has been resolved. Thank you for contacting us.',
          priority: 'medium'
        }
      },
      {
        id: 'end-3',
        type: 'end',
        position: { x: 1500, y: 300 },
        data: {
          label: 'End',
          description: 'Support ticket resolved'
        }
      }
    ],
    edges: [
      { id: 'e17', source: 'start-3', target: 'form-6', sourceHandle: 'start-3-bottom', targetHandle: 'form-6-top', type: 'smoothstep' },
      { id: 'e18', source: 'form-6', target: 'business-rule-2', sourceHandle: 'form-6-bottom', targetHandle: 'business-rule-2-top', type: 'smoothstep' },
      { id: 'e19', source: 'business-rule-2', target: 'gateway-2', sourceHandle: 'business-rule-2-bottom', targetHandle: 'gateway-2-top', type: 'smoothstep' },
      { id: 'e20', source: 'gateway-2', target: 'notification-6', sourceHandle: 'gateway-2-right', targetHandle: 'notification-6-left', type: 'smoothstep', label: 'High Priority' },
      { id: 'e21', source: 'gateway-2', target: 'notification-7', sourceHandle: 'gateway-2-bottom', targetHandle: 'notification-7-left', type: 'smoothstep', label: 'Normal Priority' },
      { id: 'e22', source: 'notification-6', target: 'form-7', sourceHandle: 'notification-6-bottom', targetHandle: 'form-7-left', type: 'smoothstep' },
      { id: 'e23', source: 'notification-7', target: 'form-7', sourceHandle: 'notification-7-bottom', targetHandle: 'form-7-top', type: 'smoothstep' },
      { id: 'e24', source: 'form-7', target: 'notification-8', sourceHandle: 'form-7-bottom', targetHandle: 'notification-8-top', type: 'smoothstep' },
      { id: 'e25', source: 'notification-8', target: 'end-3', sourceHandle: 'notification-8-bottom', targetHandle: 'end-3-top', type: 'smoothstep' }
    ]
  },
  {
    id: 'expense-reimbursement',
    name: 'Expense Reimbursement',
    description: 'Employee expense reimbursement with approval workflow and payment processing.',
    category: 'business',
    complexity: 'Medium',
    nodeCount: 7,
    edgeCount: 8,
    variables: [
      {
        name: 'total_amount',
        type: 'decimal',
        scope: 'process',
        description: 'Total amount of expenses claimed',
        defaultValue: 0
      },
      {
        name: 'auto_approve',
        type: 'boolean',
        scope: 'process',
        description: 'Whether expenses can be auto-approved',
        defaultValue: false
      },
      {
        name: 'employee_id',
        type: 'string',
        scope: 'process',
        description: 'ID of the employee submitting expenses',
        defaultValue: ''
      },
      {
        name: 'employee_email',
        type: 'string',
        scope: 'process',
        description: 'Email of the employee submitting expenses',
        defaultValue: ''
      },
      {
        name: 'payment_result',
        type: 'object',
        scope: 'process',
        description: 'Result of payment processing',
        defaultValue: {}
      }
    ],
    nodes: [
      {
        id: 'start-4',
        type: 'start',
        position: { x: 100, y: 400 },
        data: {
          label: 'Start',
          description: 'Begin expense reimbursement process'
        }
      },
      {
        id: 'form-8',
        type: 'form',
        position: { x: 300, y: 400 },
        data: {
          label: 'Submit Expenses',
          description: 'Employee submits expense report',
          formId: null,
          formName: 'Expense Report Form'
        }
      },
      {
        id: 'business-rule-3',
        type: 'business-rule',
        position: { x: 500, y: 400 },
        data: {
          label: 'Validate Expenses',
          description: 'Validate expense amounts and receipts',
          ruleGroups: [
            {
              name: 'Amount Check',
              conditions: [
                { 
                  variable: 'total_amount', 
                  operator: 'lte', 
                  value: '1000',
                  minValue: null,
                  maxValue: null
                }
              ],
              actions: [
                { type: 'set_variable', variable: 'auto_approve', value: 'true' }
              ]
            }
          ]
        }
      },
      {
        id: 'gateway-3',
        type: 'gateway',
        position: { x: 700, y: 400 },
        data: {
          label: 'Auto Approve?',
          description: 'Check if expenses can be auto-approved',
          conditions: [
            {
              variable: 'auto_approve',
              operator: 'eq',
              value: 'true',
              output: 'Auto Approve'
            }
          ],
          defaultPath: 'Needs Approval'
        }
      },
      {
        id: 'form-9',
        type: 'form',
        position: { x: 900, y: 300 },
        data: {
          label: 'Manager Approval',
          description: 'Manager reviews and approves expenses',
          formId: null,
          formName: 'Manager Approval Form'
        }
      },
      {
        id: 'api-2',
        type: 'api',
        position: { x: 1100, y: 400 },
        data: {
          label: 'Process Payment',
          description: 'Process reimbursement payment',
          apiMethod: 'POST',
          apiUrl: '/api/payments/reimburse',
          requestBody: '{"employee_id": "{{employee_id}}", "amount": "{{total_amount}}"}',
          outputVariable: 'payment_result'
        }
      },
      {
        id: 'notification-9',
        type: 'notification',
        position: { x: 1300, y: 400 },
        data: {
          label: 'Payment Confirmation',
          description: 'Notify employee of payment',
          notificationType: 'success',
          recipientType: 'variable',
          recipientVariable: 'employee_email',
          subject: 'Expense reimbursement processed',
          message: 'Your expense reimbursement has been processed and payment is on the way.',
          priority: 'medium'
        }
      },
      {
        id: 'end-4',
        type: 'end',
        position: { x: 1500, y: 400 },
        data: {
          label: 'End',
          description: 'Reimbursement completed'
        }
      }
    ],
    edges: [
      { id: 'e26', source: 'start-4', target: 'form-8', sourceHandle: 'start-4-bottom', targetHandle: 'form-8-top', type: 'smoothstep' },
      { id: 'e27', source: 'form-8', target: 'business-rule-3', sourceHandle: 'form-8-bottom', targetHandle: 'business-rule-3-top', type: 'smoothstep' },
      { id: 'e28', source: 'business-rule-3', target: 'gateway-3', sourceHandle: 'business-rule-3-bottom', targetHandle: 'gateway-3-top', type: 'smoothstep' },
      { id: 'e29', source: 'gateway-3', target: 'form-9', sourceHandle: 'gateway-3-right', targetHandle: 'form-9-left', type: 'smoothstep', label: 'Needs Approval' },
      { id: 'e30', source: 'gateway-3', target: 'api-2', sourceHandle: 'gateway-3-bottom', targetHandle: 'api-2-left', type: 'smoothstep', label: 'Auto Approve' },
      { id: 'e31', source: 'form-9', target: 'api-2', sourceHandle: 'form-9-bottom', targetHandle: 'api-2-top', type: 'smoothstep' },
      { id: 'e32', source: 'api-2', target: 'notification-9', sourceHandle: 'api-2-bottom', targetHandle: 'notification-9-top', type: 'smoothstep' },
      { id: 'e33', source: 'notification-9', target: 'end-4', sourceHandle: 'notification-9-bottom', targetHandle: 'end-4-top', type: 'smoothstep' }
    ]
  },
  {
    id: 'automated-backup',
    name: 'Automated Data Backup',
    description: 'Automated data backup process with validation and notification.',
    category: 'automation',
    complexity: 'Simple',
    nodeCount: 6,
    edgeCount: 6,
    variables: [
      {
        name: 'current_timestamp',
        type: 'datetime',
        scope: 'process',
        description: 'Current timestamp for backup operation',
        defaultValue: ''
      },
      {
        name: 'backup_result',
        type: 'object',
        scope: 'process',
        description: 'Result of backup operation',
        defaultValue: {}
      },
      {
        name: 'backup_valid',
        type: 'boolean',
        scope: 'process',
        description: 'Whether backup was successful',
        defaultValue: false
      },
      {
        name: 'log_result',
        type: 'object',
        scope: 'process',
        description: 'Result of logging operation',
        defaultValue: {}
      }
    ],
    nodes: [
      {
        id: 'start-5',
        type: 'start',
        position: { x: 100, y: 500 },
        data: {
          label: 'Start',
          description: 'Begin automated backup process'
        }
      },
      {
        id: 'api-3',
        type: 'api',
        position: { x: 300, y: 500 },
        data: {
          label: 'Backup Database',
          description: 'Perform database backup',
          apiMethod: 'POST',
          apiUrl: '/api/backup/database',
          requestBody: '{"timestamp": "{{current_timestamp}}"}',
          outputVariable: 'backup_result'
        }
      },
      {
        id: 'business-rule-4',
        type: 'business-rule',
        position: { x: 500, y: 500 },
        data: {
          label: 'Validate Backup',
          description: 'Validate backup completion',
          ruleGroups: [
            {
              name: 'Backup Success',
              conditions: [
                { 
                  variable: 'backup_result.status', 
                  operator: 'eq', 
                  value: 'success',
                  minValue: null,
                  maxValue: null
                }
              ],
              actions: [
                { type: 'set_variable', variable: 'backup_valid', value: 'true' }
              ]
            }
          ]
        }
      },
      {
        id: 'api-4',
        type: 'api',
        position: { x: 700, y: 500 },
        data: {
          label: 'Update Backup Log',
          description: 'Log backup status',
          apiMethod: 'POST',
          apiUrl: '/api/logs/backup',
          requestBody: '{"status": "{{backup_result.status}}", "timestamp": "{{current_timestamp}}"}',
          outputVariable: 'log_result'
        }
      },
      {
        id: 'notification-10',
        type: 'notification',
        position: { x: 900, y: 500 },
        data: {
          label: 'Notify Admin',
          description: 'Send backup status to administrator',
          notificationType: 'info',
          recipientType: 'role',
          recipientRole: 'system_admin',
          subject: 'Daily backup completed',
          message: 'Automated database backup has completed successfully.',
          priority: 'low'
        }
      },
      {
        id: 'end-5',
        type: 'end',
        position: { x: 1100, y: 500 },
        data: {
          label: 'End',
          description: 'Backup process completed'
        }
      }
    ],
    edges: [
      { id: 'e34', source: 'start-5', target: 'api-3', sourceHandle: 'start-5-bottom', targetHandle: 'api-3-top', type: 'smoothstep' },
      { id: 'e35', source: 'api-3', target: 'business-rule-4', sourceHandle: 'api-3-bottom', targetHandle: 'business-rule-4-top', type: 'smoothstep' },
      { id: 'e36', source: 'business-rule-4', target: 'api-4', sourceHandle: 'business-rule-4-bottom', targetHandle: 'api-4-top', type: 'smoothstep' },
      { id: 'e37', source: 'api-4', target: 'notification-10', sourceHandle: 'api-4-bottom', targetHandle: 'notification-10-top', type: 'smoothstep' },
      { id: 'e38', source: 'notification-10', target: 'end-5', sourceHandle: 'notification-10-bottom', targetHandle: 'end-5-top', type: 'smoothstep' }
    ]
  },
  {
    id: 'basic-linear',
    name: 'Basic Linear Process',
    description: 'Simple start-to-end process for learning the basics.',
    category: 'approval',
    complexity: 'Simple',
    nodeCount: 4,
    edgeCount: 3,
    variables: [
      {
        name: 'user_email',
        type: 'string',
        scope: 'process',
        description: 'Email address of the user submitting the form',
        defaultValue: ''
      },
      {
        name: 'submission_id',
        type: 'string',
        scope: 'process',
        description: 'Unique identifier for the form submission',
        defaultValue: ''
      }
    ],
    nodes: [
      {
        id: 'start-6',
        type: 'start',
        position: { x: 100, y: 600 },
        data: {
          label: 'Start',
          description: 'Process begins'
        }
      },
      {
        id: 'form-10',
        type: 'form',
        position: { x: 300, y: 600 },
        data: {
          label: 'Input Form',
          description: 'Collect user input',
          formId: null,
          formName: 'Basic Input Form'
        }
      },
      {
        id: 'notification-11',
        type: 'notification',
        position: { x: 500, y: 600 },
        data: {
          label: 'Send Notification',
          description: 'Send confirmation notification',
          notificationType: 'success',
          recipientType: 'variable',
          recipientVariable: 'user_email',
          subject: 'Form submitted successfully',
          message: 'Your form has been submitted successfully.',
          priority: 'medium'
        }
      },
      {
        id: 'end-6',
        type: 'end',
        position: { x: 700, y: 600 },
        data: {
          label: 'End',
          description: 'Process completed'
        }
      }
    ],
    edges: [
      { id: 'e39', source: 'start-6', target: 'form-10', sourceHandle: 'start-6-bottom', targetHandle: 'form-10-top', type: 'smoothstep' },
      { id: 'e40', source: 'form-10', target: 'notification-11', sourceHandle: 'form-10-bottom', targetHandle: 'notification-11-top', type: 'smoothstep' },
      { id: 'e41', source: 'notification-11', target: 'end-6', sourceHandle: 'notification-11-bottom', targetHandle: 'end-6-top', type: 'smoothstep' }
    ]
  }
];

// Filtered templates based on active category
const filteredTemplates = computed(() => {
  if (activeCategory.value === 'all') {
    return templates;
  }
  return templates.filter(template => template.category === activeCategory.value);
});

// Handle template selection
function useTemplate(template) {
  emit('select-template', template);
  showModal.value = false;
}

// Preview template
function previewTemplate(template) {
  selectedTemplate.value = template;
  showPreviewModal.value = true;
}

// Use template from preview
function useTemplateFromPreview() {
  if (selectedTemplate.value) {
    emit('select-template', selectedTemplate.value);
    showPreviewModal.value = false;
    showModal.value = false;
  }
}

// Get icon based on template category/type
const getTemplateIcon = (template) => {
  const icons = {
    'approval': 'material-symbols:check-circle-outline',
    'onboarding': 'material-symbols:person-add-outline',
    'support': 'material-symbols:support-agent',
    'business': 'material-symbols:business-center-outline',
    'automation': 'material-symbols:precision-manufacturing-outline'
  };
  
  return icons[template.category] || 'material-symbols:account-tree';
};

// Get icon for node types
const getNodeIcon = (nodeType) => {
  const icons = {
    'start': 'material-symbols:play-circle-outline',
    'end': 'material-symbols:stop-circle-outline',
    'form': 'material-symbols:description-outline',
    'api': 'material-symbols:api',
    'gateway': 'material-symbols:call-split',
    'notification': 'material-symbols:notifications-outline',
    'business-rule': 'material-symbols:rule',
    'script': 'material-symbols:code',
    'html': 'material-symbols:code',
    'subprocess': 'material-symbols:hub-outline'
  };
  
  return icons[nodeType] || 'material-symbols:account-tree';
};

// Calculate edge path for preview
const getEdgePath = (edge) => {
  const sourceNode = selectedTemplate.value?.nodes.find(n => n.id === edge.source);
  const targetNode = selectedTemplate.value?.nodes.find(n => n.id === edge.target);
  
  if (!sourceNode || !targetNode) return '';
  
  // Normalize positions to fit within the preview container
  const sourceX = Math.max(5, Math.min(95, (sourceNode.position.x / 2000) * 100));
  const sourceY = Math.max(5, Math.min(95, (sourceNode.position.y / 800) * 100));
  const targetX = Math.max(5, Math.min(95, (targetNode.position.x / 2000) * 100));
  const targetY = Math.max(5, Math.min(95, (targetNode.position.y / 800) * 100));
  
  // Calculate the distance and direction
  const dx = targetX - sourceX;
  const dy = targetY - sourceY;
  const distance = Math.sqrt(dx * dx + dy * dy);
  
  // Adjust target position to account for arrow marker
  const arrowOffset = 3; // Adjust based on marker size
  const targetAdjustedX = targetX - (dx / distance) * arrowOffset;
  const targetAdjustedY = targetY - (dy / distance) * arrowOffset;
  
  // Create a smooth curved path with proper control points
  if (Math.abs(dx) > Math.abs(dy)) {
    // Horizontal flow - use gentle curve
    const controlX1 = sourceX + dx * 0.25;
    const controlY1 = sourceY;
    const controlX2 = sourceX + dx * 0.75;
    const controlY2 = targetAdjustedY;
    
    return `M ${sourceX} ${sourceY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${targetAdjustedX} ${targetAdjustedY}`;
  } else {
    // Vertical flow - use straight line with slight curve
    const controlX1 = sourceX;
    const controlY1 = sourceY + dy * 0.25;
    const controlX2 = targetAdjustedX;
    const controlY2 = sourceY + dy * 0.75;
    
    return `M ${sourceX} ${sourceY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${targetAdjustedX} ${targetAdjustedY}`;
  }
};

// Calculate arrow points for fallback arrows
const getArrowPoints = (edge) => {
  const sourceNode = selectedTemplate.value?.nodes.find(n => n.id === edge.source);
  const targetNode = selectedTemplate.value?.nodes.find(n => n.id === edge.target);
  
  if (!sourceNode || !targetNode) return '';
  
  // Normalize positions
  const sourceX = Math.max(5, Math.min(95, (sourceNode.position.x / 2000) * 100));
  const sourceY = Math.max(5, Math.min(95, (sourceNode.position.y / 800) * 100));
  const targetX = Math.max(5, Math.min(95, (targetNode.position.x / 2000) * 100));
  const targetY = Math.max(5, Math.min(95, (targetNode.position.y / 800) * 100));
  
  // Calculate direction
  const dx = targetX - sourceX;
  const dy = targetY - sourceY;
  const distance = Math.sqrt(dx * dx + dy * dy);
  
  if (distance === 0) return '';
  
  // Normalize direction vector
  const dirX = dx / distance;
  const dirY = dy / distance;
  
  // Arrow size
  const arrowSize = 4;
  
  // Arrow tip position (slightly before the target node)
  const tipX = targetX - dirX * 6;
  const tipY = targetY - dirY * 6;
  
  // Arrow base points (perpendicular to direction)
  const perpX = -dirY;
  const perpY = dirX;
  
  const base1X = tipX - dirX * arrowSize + perpX * arrowSize;
  const base1Y = tipY - dirY * arrowSize + perpY * arrowSize;
  const base2X = tipX - dirX * arrowSize - perpX * arrowSize;
  const base2Y = tipY - dirY * arrowSize - perpY * arrowSize;
  
  return `${tipX},${tipY} ${base1X},${base1Y} ${base2X},${base2Y}`;
};

// Vue Flow preview data
const previewFlow = ref(null);

// Computed properties for Vue Flow preview
const previewNodes = computed(() => {
  if (!selectedTemplate.value?.nodes) return [];
  
  return selectedTemplate.value.nodes.map(node => {
    // Get default styling from ProcessBuilderComponents
    const defaultStyling = getDefaultNodeStyling(node.type);
    
    return {
      ...node,
      data: {
        ...node.data,
        // Ensure styling properties are included
        backgroundColor: node.data.backgroundColor || defaultStyling.backgroundColor,
        borderColor: node.data.borderColor || defaultStyling.borderColor,
        textColor: node.data.textColor || defaultStyling.textColor,
        shape: node.data.shape || defaultStyling.shape
      }
    };
  });
});

const previewEdges = computed(() => {
  if (!selectedTemplate.value?.edges) return [];
  
  return selectedTemplate.value.edges.map(edge => ({
    ...edge,
    type: 'smoothstep',
    animated: false,
    style: {
      stroke: '#475569',
      strokeWidth: 2,
      strokeDasharray: 'none'
    },
    markerEnd: {
      type: 'arrowclosed',
      width: 20,
      height: 20,
      color: '#475569'
    }
  }));
});

// Get default styling for node types
const getDefaultNodeStyling = (nodeType) => {
  const stylingMap = {
    'start': {
      backgroundColor: '#dcfce7',
      borderColor: '#10b981',
      textColor: '#065f46',
      shape: 'circle'
    },
    'end': {
      backgroundColor: '#fee2e2',
      borderColor: '#dc2626',
      textColor: '#991b1b',
      shape: 'circle'
    },
    'form': {
      backgroundColor: '#faf5ff',
      borderColor: '#9333ea',
      textColor: '#6b21a8',
      shape: 'rectangle'
    },
    'api': {
      backgroundColor: '#eff6ff',
      borderColor: '#3b82f6',
      textColor: '#1e40af',
      shape: 'rectangle'
    },
    'gateway': {
      backgroundColor: '#fff7ed',
      borderColor: '#f97316',
      textColor: '#c2410c',
      shape: 'diamond'
    },
    'notification': {
      backgroundColor: '#f0f9ff',
      borderColor: '#0ea5e9',
      textColor: '#0284c7',
      shape: 'rectangle'
    },
    'business-rule': {
      backgroundColor: '#fdf4ff',
      borderColor: '#a855f7',
      textColor: '#7c3aed',
      shape: 'rectangle'
    },
    'script': {
      backgroundColor: '#f9fafb',
      borderColor: '#6b7280',
      textColor: '#374151',
      shape: 'rectangle'
    },
    'html': {
      backgroundColor: '#e0f2fe',
      borderColor: '#0ea5e9',
      textColor: '#0c4a6e',
      shape: 'rectangle'
    },
    'subprocess': {
      backgroundColor: '#f0fdfa',
      borderColor: '#14b8a6',
      textColor: '#134e4a',
      shape: 'rectangle'
    }
  };
  
  return stylingMap[nodeType] || {
    backgroundColor: '#ffffff',
    borderColor: '#e2e8f0',
    textColor: '#374151',
    shape: 'rectangle'
  };
};
</script>

<style scoped>
.process-templates-container {
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
}

.template-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.template-preview {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.template-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 3px solid #e2e8f0;
  transition: all 0.3s ease;
}

.template-card:hover .template-icon-wrapper {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.preview-btn {
  backdrop-filter: blur(4px);
}

/* Preview Modal Styles */
.template-preview-container {
  max-height: 80vh;
  overflow-y: auto;
}

.process-flow-preview {
  position: relative;
  background: linear-gradient(45deg, #f8fafc 25%, transparent 25%), 
              linear-gradient(-45deg, #f8fafc 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #f8fafc 75%), 
              linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border-radius: 8px;
  overflow: hidden;
}

.process-flow-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.preview-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.node-content {
  display: flex;
  align-items: center;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-width: 80px;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.node-content:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
  z-index: 20;
}

/* Node type specific styling */
.preview-node .node-content {
  border-color: #e2e8f0;
  background: white;
}

.preview-node .node-content[data-type="start"] {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
}

.preview-node .node-content[data-type="end"] {
  border-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
}

.preview-node .node-content[data-type="gateway"] {
  border-color: #f97316;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  color: #c2410c;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.preview-node .node-content[data-type="gateway"] > div {
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-node .node-content[data-type="form"] {
  border-color: #9333ea;
  background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
  color: #6b21a8;
}

.preview-node .node-content[data-type="api"] {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
}

.preview-node .node-content[data-type="notification"] {
  border-color: #0ea5e9;
  background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%);
  color: #0284c7;
}

.preview-node .node-content[data-type="business-rule"] {
  border-color: #a855f7;
  background: linear-gradient(135deg, #fdf4ff 0%, #e9d5ff 100%);
  color: #7c3aed;
}

.preview-node .node-content[data-type="script"] {
  border-color: #6b7280;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  color: #374151;
}

.variable-item {
  transition: all 0.2s ease;
}

.variable-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Flow edge styling */
.flow-edge {
  transition: all 0.3s ease;
}

.flow-edge:hover {
  stroke-width: 3.5;
  opacity: 1;
  filter: brightness(1.2);
}

/* Vue Flow Preview Styling */
.preview-vue-flow {
  width: 100%;
  height: 100%;
}

.preview-vue-flow .vue-flow__node {
  cursor: default;
}

.preview-vue-flow .vue-flow__node:hover {
  transform: none;
}

.preview-vue-flow .vue-flow__controls {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-vue-flow .vue-flow__minimap {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-vue-flow .vue-flow__background {
  background-color: #f8fafc;
}

/* Enhanced Preview Node Styling */
.preview-node .node-content {
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-width: 2px;
  border-style: solid;
}

.preview-node .node-content:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .template-card:hover {
    transform: translateY(-2px);
  }
  
  .process-flow-preview {
    height: 60vh;
  }
  
  .node-content {
    font-size: 10px;
    padding: 4px 8px;
  }
}
</style> 