'use client'
import React, { useState, useEffect } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { ArrowLeft } from 'lucide-react'
import { workflowService, Workflow } from '../../../services/workflowService'
import WorkflowDebugger from '../../../components/WorkflowDebugger'
export default function ExecuteWorkflowPage() {
const { id } = useParams<{ id: string }>()
const navigate = useNavigate()
const [workflow, setWorkflow] = useState<Workflow | null>(null)
const [loading, setLoading] = useState(true)
const [executionId, setExecutionId] = useState<string | null>(null)
useEffect(() => {
if (id) {
loadWorkflow()
}
}, [id])
const loadWorkflow = async () => {
if (!id) return
setLoading(true)
try {
const data = await workflowService.getWorkflow(id)
setWorkflow(data)
} catch (error) {
console.error('Failed to load workflow:', error)
alert(`Failed to load workflow: ${error}`)
navigate('/workflows')
} finally {
setLoading(false)
}
}
const handleExecutionStart = (newExecutionId: string) => {
setExecutionId(newExecutionId)
}
if (loading) {
return (
<div style={{ padding: '24px', backgroundColor: '#f8fafc', minHeight: '100vh' }}>
<div style={{ textAlign: 'center', padding: '40px' }}>
<div
style={{
width: '40px',
height: '40px',
border: '4px solid #f3f3f3',
borderTop: '4px solid #2563eb',
borderRadius: '50%',
animation: 'spin 1s linear infinite',
margin: '0 auto 20px',
}}
></div>
<p style={{ color: '#666' }}>Loading workflow...</p>
</div>
</div>
)
}
if (!workflow) {
return (
<div style={{ padding: '24px', backgroundColor: '#f8fafc', minHeight: '100vh' }}>
<p style={{ color: '#dc2626' }}>Workflow not found</p>
</div>
)
}
return (
<div style={{ minHeight: '100vh', padding: '24px', backgroundColor: '#0f172a' }}>
<div style={{ maxWidth: '1600px', margin: '0 auto' }}>
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '24px' }}>
<Link
to="/workflows"
style={{
display: 'flex',
alignItems: 'center',
padding: '8px',
borderRadius: '8px',
backgroundColor: '#1e293b',
border: '1px solid #334155',
textDecoration: 'none',
color: '#cbd5e1',
}}
>
<ArrowLeft style={{ width: '20px', height: '20px' }} />
</Link>
<div>
<h1 style={{ fontSize: '32px', fontWeight: '700', margin: '0 0 4px 0', color: '#f1f5f9' }}>
Execute Workflow: {workflow.name}
</h1>
<p style={{ fontSize: '16px', color: '#94a3b8', margin: 0 }}>{workflow.description}</p>
</div>
</div>
{/* Debugger Component */}
<div style={{ height: 'calc(100vh - 150px)' }}>
<WorkflowDebugger
workflow={workflow}
executionId={executionId}
onExecutionStart={handleExecutionStart}
/>
</div>
</div>
</div>
)
}
