'use client'
import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { ArrowLeft, Save, X } from 'lucide-react'
import { workflowService, Workflow, WorkflowStep, WorkflowVariable } from '../../../services/workflowService'
export default function NewWorkflowPage() {
const navigate = useNavigate()
const [name, setName] = useState('')
const [description, setDescription] = useState('')
const [category, setCategory] = useState<'avatar' | 'vbot' | 'sync' | 'custom'>('custom')
const [tags, setTags] = useState('')
const [saving, setSaving] = useState(false)
const handleSave = async () => {
if (!name.trim()) {
alert('Please enter a workflow name')
return
}
setSaving(true)
try {
const workflowData: Partial<Workflow> = {
name: name.trim(),
description: description.trim(),
category,
version: '1.0.0',
author: '',
tags: tags.split(',').map(t => t.trim()).filter(t => t),
steps: [],
variables: [],
error_handling: {
on_error: 'stop',
retry_count: 0,
rollback_steps: [],
error_notification: true
},
metadata: {}
}
await workflowService.createWorkflow(workflowData)
navigate('/workflows')
} catch (error) {
alert(`Failed to create workflow: ${error}`)
} finally {
setSaving(false)
}
}
return (
<div style={{ minHeight: '100vh', padding: '24px', backgroundColor: '#f8fafc' }}>
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '32px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<Link
to="/workflows"
style={{
display: 'flex',
alignItems: 'center',
padding: '8px',
borderRadius: '8px',
backgroundColor: 'white',
border: '1px solid #e5e7eb',
textDecoration: 'none',
color: '#374151'
}}
>
<ArrowLeft style={{ width: '20px', height: '20px' }} />
</Link>
<div>
<h1 style={{ fontSize: '32px', fontWeight: '700', margin: '0 0 4px 0', color: '#111827' }}>
New Workflow
</h1>
<p style={{ fontSize: '16px', color: '#6b7280', margin: 0 }}>
Create a new preprogrammed workflow
</p>
</div>
</div>
<div style={{ display: 'flex', gap: '12px' }}>
<button
onClick={() => navigate('/workflows')}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '12px 24px',
backgroundColor: '#f3f4f6',
color: '#374151',
border: 'none',
borderRadius: '8px',
fontSize: '16px',
fontWeight: '500',
cursor: 'pointer'
}}
>
<X style={{ width: '20px', height: '20px' }} />
Cancel
</button>
<button
onClick={handleSave}
disabled={saving}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '12px 24px',
backgroundColor: saving ? '#9ca3af' : '#3b82f6',
color: 'white',
border: 'none',
borderRadius: '8px',
fontSize: '16px',
fontWeight: '500',
cursor: saving ? 'not-allowed' : 'pointer'
}}
>
<Save style={{ width: '20px', height: '20px' }} />
{saving ? 'Saving...' : 'Save Workflow'}
</button>
</div>
</div>
{/* Form */}
<div style={{
backgroundColor: 'white',
borderRadius: '12px',
padding: '24px',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
}}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
{/* Basic Info */}
<div>
<h2 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '16px', color: '#111827' }}>
Basic Information
</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<div>
<label style={{ display: 'block', fontSize: '14px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>
Workflow Name *
</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., VRoid to VRChat Avatar"
style={{
width: '100%',
padding: '10px 12px',
border: '1px solid #e5e7eb',
borderRadius: '8px',
fontSize: '14px'
}}
/>
</div>
<div>
<label style={{ display: 'block', fontSize: '14px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>
Description
</label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Describe what this workflow does..."
rows={4}
style={{
width: '100%',
padding: '10px 12px',
border: '1px solid #e5e7eb',
borderRadius: '8px',
fontSize: '14px',
fontFamily: 'inherit',
resize: 'vertical'
}}
/>
</div>
<div>
<label style={{ display: 'block', fontSize: '14px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>
Category
</label>
<select
value={category}
onChange={(e) => setCategory(e.target.value as any)}
style={{
width: '100%',
padding: '10px 12px',
border: '1px solid #e5e7eb',
borderRadius: '8px',
fontSize: '14px',
backgroundColor: 'white'
}}
>
<option value="avatar">Avatar</option>
<option value="vbot">VBot</option>
<option value="sync">Sync</option>
<option value="custom">Custom</option>
</select>
</div>
<div>
<label style={{ display: 'block', fontSize: '14px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>
Tags (comma-separated)
</label>
<input
type="text"
value={tags}
onChange={(e) => setTags(e.target.value)}
placeholder="e.g., avatar, vrchat, automation"
style={{
width: '100%',
padding: '10px 12px',
border: '1px solid #e5e7eb',
borderRadius: '8px',
fontSize: '14px'
}}
/>
</div>
</div>
</div>
{/* Info Message */}
<div style={{
padding: '16px',
backgroundColor: '#eff6ff',
border: '1px solid #bfdbfe',
borderRadius: '8px',
color: '#1e40af'
}}>
<p style={{ margin: 0, fontSize: '14px' }}>
<strong>Note:</strong> After creating the workflow, you can add steps, variables, and configure error handling in the workflow editor.
</p>
</div>
</div>
</div>
</div>
</div>
)
}
