import React, { useEffect, useContext } from "react";
import { getTheme } from '../theme.jsx';
import { isMobile } from "react-device-detect"
import { MuiChipsInput } from "mui-chips-input";
import { toast } from "react-toastify"
import ReactGA from 'react-ga4';
import UsecaseSearch from "../components/UsecaseSearch.jsx"
import WorkflowGrid from "../components/WorkflowGrid.jsx"
import dayjs from 'dayjs';
import WorkflowTemplatePopup from "./WorkflowTemplatePopup.jsx";
import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"

import {
	Badge,
	Avatar,
	Grid,
	InputLabel,
	Select,
	ListSubheader,
	Paper,
	Tooltip,
	Divider,
	Button,
	TextField,
	IconButton,
	Menu,
	MenuItem,
	Link,
	FormControlLabel,
	Chip,
	Switch,
	Typography,
	Zoom,
	CircularProgress,
	Drawer,
	Dialog,
	DialogTitle,
	DialogActions,
	DialogContent,
	OutlinedInput,
	Checkbox,
	ListItemText,
	Radio,
	RadioGroup,
	FormControl,
	FormLabel,
	Slider,

} from "@mui/material";
import { Context } from "../context/ContextApi.jsx";
import {
	DatePicker,
	LocalizationProvider,
} from '@mui/x-date-pickers'

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { useStyles } from '../views/AppCreator.jsx'

import {
	ExpandLess as ExpandLessIcon,
	ExpandMore as ExpandMoreIcon,
	Publish as PublishIcon,
	OpenInNew as OpenInNewIcon,
	Add as AddIcon,
	Remove as RemoveIcon,
	EditNote as EditNoteIcon,
	AutoAwesome as AutoAwesomeIcon,
	CloudUpload as CloudUploadIcon,
	CheckCircle as CheckCircleIcon,
	Close as CloseIcon
} from "@mui/icons-material";

const EditWorkflow = (props) => {
	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, saveWorkflow, expanded, scrollTo, setRealtimeMarkdown, boxWidth, setBoxWidth, } = props

	const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
	const {themeMode, brandColor} = useContext(Context)
	const theme = getTheme(themeMode, brandColor)
	const [submitLoading, setSubmitLoading] = React.useState(false);
	const [aiGenerateLoading, setAiGenerateLoading] = React.useState(false);
	const [showMoreClicked, setShowMoreClicked] = React.useState(isEditing !== false ? true : false);

	const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)

	const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
	const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")

	const [selectedUsecases, setSelectedUsecases] = React.useState(workflow.usecase_ids !== undefined && workflow.usecase_ids !== null ? JSON.parse(JSON.stringify(workflow.usecase_ids)) : []);
	const [foundWorkflowId, setFoundWorkflowId] = React.useState("")
	const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "")
	const [workflowAsCode, setWorkflowAsCode] = React.useState(false)
	const [dueDate, setDueDate] = React.useState(workflow.due_date !== undefined && workflow.due_date !== null && workflow.due_date !== 0 ? dayjs(workflow.due_date * 1000) : dayjs().subtract(1, 'day'))

	const [inputQuestions, setInputQuestions] = React.useState(workflow.input_questions !== undefined && workflow.input_questions !== null ? JSON.parse(JSON.stringify(workflow.input_questions)) : [])
	const [inputMarkdown, setInputMarkdown] = React.useState(workflow?.form_control?.input_markdown !== undefined && workflow?.form_control?.input_markdown !== null ? workflow?.form_control?.input_markdown : "")
	const [scrollDone, setScrollDone] = React.useState(false)
	const [selectedYieldActions, setSelectedYieldActions] = React.useState(workflow?.form_control?.output_yields !== undefined && workflow?.form_control?.output_yields !== null ? JSON.parse(JSON.stringify(workflow?.form_control?.output_yields)) : [])
	const [selectedCleanupActions, setSelectedCleanupActions] = React.useState(workflow?.form_control?.cleanup_actions !== undefined && workflow?.form_control?.cleanup_actions !== null ? JSON.parse(JSON.stringify(workflow?.form_control?.cleanup_actions)) : [])

	const [formWidth, setFormWidth] = React.useState(boxWidth === undefined || boxWidth === null ? 500 : boxWidth)
	
	// Flowchart upload states
	const [uploadedImage, setUploadedImage] = React.useState(null)
	const [imageBase64, setImageBase64] = React.useState("")
	const [imageUploading, setImageUploading] = React.useState(false)

	const classes = useStyles();

	useEffect(() => {
		if (setBoxWidth !== undefined && boxWidth !== formWidth) {
			setBoxWidth(formWidth)
		}
	}, [formWidth])

	// Handle file upload and base64 conversion
	const handleImageUpload = (file) => {
		const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg']
		if (!allowedTypes.includes(file.type)) {
			toast.error("Please upload a PNG, JPG, or JPEG image")
			return
		}

		const maxSize = 5 * 1024 * 1024 // 5MB in bytes
		if (file.size > maxSize) {
			toast.error("Image must be less than 5MB")
			return
		}

		setImageUploading(true)
		
		const reader = new FileReader()
		reader.onload = (e) => {
			const base64 = e.target.result
			setImageBase64(base64)
			setUploadedImage({
				name: file.name,
				size: file.size,
				type: file.type
			})
			setImageUploading(false)
			
			// Disable "Create from scratch" when image is uploaded
			if (newWorkflow) {
				setWorkflowAsCode(false)
			}
		}
		reader.onerror = () => {
			toast.error("Failed to read image file")
			setImageUploading(false)
		}
		reader.readAsDataURL(file)
	}

	const removeUploadedImage = () => {
		setUploadedImage(null)
		setImageBase64("")
		setImageUploading(false)
	}

	const formatFileSize = (bytes) => {
		if (bytes === 0) return '0 Bytes'
		const k = 1024
		const sizes = ['Bytes', 'KB', 'MB', 'GB']
		const i = Math.floor(Math.log(bytes) / Math.log(k))
		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
	}

	if (scrollTo !== undefined && scrollTo !== null && scrollTo.length > 0 && scrollDone === false) {
		setTimeout(() => {
			const foundScroll = document.getElementById(scrollTo)
			if (foundScroll !== null) {
				// Smooth scroll
				foundScroll.scrollIntoView({ 
					behavior: "smooth",
				})
			}
		}, 200)
		setScrollDone(true)

	}

	// Gets the generated workflow 
	const getGeneratedWorkflow = (workflow_id) => {
		const url = `${globalUrl}/api/v1/workflows/${workflow_id}`
		fetch(url, {
			method: "GET",
			headers: {
				"Content-Type": "application/json",
				Accept: "application/json",
			},
			credentials: "include",
		})
			.then((response) => {
				if (response.status !== 200) {
					console.log("Status not 200 when getting workflow");
				}


				return response.json();
			})
			.then((responseJson) => {
				if (responseJson.id === workflow_id) {
					console.log("GOT WORKFLOW: ", responseJson)
					if (name === "") {
						innerWorkflow.name = responseJson.name
						setName(responseJson.name)
					}

					if (description === "") {
						innerWorkflow.description = responseJson.description
						setDescription(description)
					}

					if (newWorkflowTags === []) {
						innerWorkflow.tags = responseJson.tags
						setNewWorkflowTags(responseJson.tags)
					}

					if (selectedUsecases.length === 0) {
						setSelectedUsecases(responseJson.usecase_ids)
					}

					innerWorkflow.id = responseJson.id
					innerWorkflow.blogpost = responseJson.blogpost
					innerWorkflow.actions = responseJson.actions
					innerWorkflow.triggers = responseJson.triggers
					innerWorkflow.branches = responseJson.branches
					innerWorkflow.comments = responseJson.comments
					innerWorkflow.workflow_variables = responseJson.workflow_variables
					innerWorkflow.execution_variables = responseJson.execution_variables


					setInnerWorkflow(innerWorkflow)
					setUpdate(Math.random())
				}
			})
			.catch((error) => {
				//toast(error.toString());
				console.log("Get workflow error: ", error.toString());
			})
	}

	if (foundWorkflowId.length > 0) {
		getGeneratedWorkflow(foundWorkflowId)

		setFoundWorkflowId("")
	} else {
	}

	if (modalOpen !== true) {
		return null
	}

	const newWorkflow = isEditing === true ? false : true
	const priority = userdata === undefined || userdata === null || userdata.priorities === null || userdata.priorities === undefined ? null : userdata?.priorities?.find(prio => prio.type === "usecase" && prio.active === true)
	var upload = "";
	var total_count = 0

    const isCloud =
        window.location.host === "localhost:3002" ||
        window.location.host === "shuffler.io";

	return (
		<Drawer
			anchor={"right"}
			open={modalOpen}
			onClose={() => {
				setModalOpen(false);
			}}
			PaperProps={{
				sx: {
					color: theme.palette.DialogStyle.color,
					minWidth: isMobile ? "90%" : "650px",
					maxWidth: isMobile ? "90%" : "650px",
					minHeight: "400px",
					//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
					//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
		    		borderRadius: theme.palette.DialogStyle.borderRadius,
		    		backgroundColor: themeMode === "dark" ? "black" :  theme?.palette?.DialogStyle?.backgroundColor,
				},
			}}
		>
			<DialogTitle style={{ padding: 30, paddingBottom: 0, zIndex: 1000, paddingTop: "25px", paddingLeft: "50px"}}>
				<div style={{ display: "flex" }}>
					<div style={{ flex: 1, color: theme.palette.textColor }}>
						<div style={{ display: "flex" }}>
							<Typography variant="h4" style={{ flex: 9, marginTop: newWorkflow ? 50 : 25, }}>
								{newWorkflow ? "New" : "Editing"} Workflow
							</Typography>

							{newWorkflow === true ? null :
								<div style={{ marginLeft: 5, flex: 1 }}>
									<Tooltip title="Go to Public Form page">
										<IconButton>
											<a
												rel="noopener noreferrer"
												href={`/forms/${workflow.id}`}
												target="_blank"
												style={{
													textDecoration: "none",
													color: "#f85a3e",
													marginLeft: 5,
												}}
											>
												<EditNoteIcon />
											</a>
										</IconButton>
									</Tooltip>
								</div>
							}

						</div>
						<Typography variant="body2" color="textSecondary" style={{ marginTop: 20, maxWidth: 440, }}>
							Workflows can be built from scratch, or from templates. <a href="/usecases2" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: theme.palette.linkColor }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color:theme.palette.linkColor }}>Learn more</a>
						</Typography>

						<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
							<WorkflowValidationTimeline 
							
							  apps={apps}
							  workflow={workflow}
							/>
						</div>

						{showUpload === true ?
							<div style={{ float: "right" }}>
								<Tooltip color="primary" title={"Import manually"} placement="top">
									<Button
										color="primary"
										style={{}}
										variant="text"
										onClick={() => upload.click()}
									>
										<PublishIcon />
									</Button>
								</Tooltip>
							</div>
							: null}
					</div>
					{/*newWorkflow === true ? 
						<div style={{flex: 1, marginLeft: 45, }}>
							<Typography variant="h6">
								Use a Template
							</Typography>
							<Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
								Start your workflow from our templating system. This uses publied workflows from our <a href="/creators" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e"}}>Creators</a> to generate full Usecases or parts of your Workflow.
							</Typography>
						</div>
					: null*/}
				</div>
			</DialogTitle>
			<FormControl>
				<div style={{ 
					borderTop: theme.palette.defaultBorder, 
					width: 600, 
					position: "fixed", 
					right: 20, 
					bottom: 0, 
					zIndex: 1002, 
					height: 75, 
					paddingTop: 20, 
					paddingLeft: 30, 
					backgroundColor: themeMode === "dark" ? "#262626" :  theme.palette.DialogStyle.backgroundColor,
				}}>
					{newWorkflow === true ? (
						<div style={{ display: "flex", gap: 10 }}>
							
							
							<Button
								variant="contained"
								style={{}}
								id="save_workflow_button"
								disabled={name.length === 0 || submitLoading === true || aiGenerateLoading === true || uploadedImage !== null}
								onClick={() => {
									setSubmitLoading(true)

									// Loop inputfields
									var validfields = []
									for (var i = 0; i < inputQuestions.length; i++) {
										if (inputQuestions[i].deleted === true) {
											continue
										}

										if (inputQuestions[i].value.length === 0) {
											continue
										}

										validfields.push(inputQuestions[i])
									}

									innerWorkflow.input_questions = validfields

									if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
										innerWorkflow.form_control = {}
									}

									innerWorkflow.form_control.input_markdown = inputMarkdown
									innerWorkflow.form_control.output_yields = selectedYieldActions
									innerWorkflow.form_control.form_width = formWidth
									innerWorkflow.form_control.cleanup_actions = selectedCleanupActions

									innerWorkflow.name = name
									innerWorkflow.description = description

									if (newWorkflowTags.length > 0) {
										innerWorkflow.tags = newWorkflowTags
									} else {
										innerWorkflow.tags = []
									}

									if (selectedUsecases.length > 0) {
										innerWorkflow.usecase_ids = selectedUsecases
									} else {
										innerWorkflow.usecase_ids = []
									}

									if (dueDate > 0) {
										innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"] + 1}-${dueDate["$D"]}`).getTime() / 1000
									}

									if (saveWorkflow !== undefined) {
										saveWorkflow(innerWorkflow)

										if (setWorkflow !== undefined) {
											setWorkflow(innerWorkflow)
										}
									} else if (setNewWorkflow !== undefined) {
										setNewWorkflow(
											innerWorkflow.name,
											innerWorkflow.description,
											innerWorkflow.tags,
											innerWorkflow.default_return_value,
											innerWorkflow,
											newWorkflow,
											innerWorkflow.usecase_ids,
											innerWorkflow.blogpost,
											innerWorkflow.status,
											workflowAsCode
										)
										setWorkflow({})
									} else {
										setWorkflow(innerWorkflow)
									}

									setSubmitLoading(true)

									// If new workflow, don't close it
									if (isEditing) {
										setModalOpen(false)
									}
								}}
								color="primary"
							>
								{submitLoading ? <CircularProgress color="secondary" /> : "Create from scratch"}
							</Button>

							<Tooltip placement="top" arrow
								title={
									<Typography variant="body1" style={{padding: 10, }}>
										Generate using the name, description, usecases and tags provided. Required: Name + (Description OR Flowchart Image)
									</Typography>
								}
							>
								<span>
								<Button
									id="ai-generate-button"
									style={{marginLeft: 10, }}
									disabled={
										name.length === 0 || 
										aiGenerateLoading === true || 
										submitLoading === true ||
										(uploadedImage === null && innerWorkflow?.default_return_value?.trim()?.length === 0)
									}
									variant="aiButtonGhost"
									onClick={async () => {
										// Track AI Generate button click
										if (isCloud) {
											ReactGA.event({
												category: "AIGeneratedNewWorkflow",
												action: "button_click",
												label: userdata?.active_org?.id || "",
											});
										}

										// check AI enabled for local installations (not cloud)
										if (!isCloud && (!userdata?.ai_enabled || userdata?.ai_enabled === false)) {
											// Toast with onclick
											toast.info("Local AI is not enabled, and no cloud AI credits added. Click here to set it up!", {
												autoClose: 10000,
												onClick: () => {
													window.open("/docs/AI#self-hosting-models", "_blank")
												}
											})

											return
										}

										// Check if description is provided OR image is uploaded for new workflows
										if (uploadedImage === null && (!innerWorkflow?.default_return_value || innerWorkflow?.default_return_value?.trim()?.length === 0)) {
											toast.error("You need to either upload a flowchart image OR describe what you want to generate so the AI can auto generate the entire workflow");
											return;
										}

										setAiGenerateLoading(true);
										toast.info("Creating workflow...");

										let workflowId = null;

										try {
											// Step 1: Create basic workflow WITHOUT using setNewWorkflow (to avoid modal closing)
											const workflowData = {
												name: name.length > 0 ? name : "AI Generated Workflow",
												description: innerWorkflow.default_return_value,
												tags: newWorkflowTags,
												default_return_value: innerWorkflow.default_return_value,
												usecase_ids: selectedUsecases,
												blogpost: innerWorkflow.blogpost || "",
												status: innerWorkflow.status || ""
											};

											const workflowResponse = await fetch(`${globalUrl}/api/v1/workflows`, {
												method: "POST",
												headers: {
													"Content-Type": "application/json",
													Accept: "application/json",
												},
												body: JSON.stringify(workflowData),
												credentials: "include",
											});

											if (workflowResponse.status !== 200) {
												toast.error("Failed to create workflow");
												setAiGenerateLoading(false);
												return;
											}

											const workflowJson = await workflowResponse.json();

											if (workflowJson.success === false) {
												toast.error("Failed to create workflow: " + (workflowJson.reason || "Unknown error"));
												setAiGenerateLoading(false);
												return;
											}

											if (!workflowJson || !workflowJson.id) {
												toast.error("Failed to create workflow - no ID returned");
												setAiGenerateLoading(false);
												return;
											}

											workflowId = workflowJson.id;
											toast.success("Workflow created! AI is now generating your workflow - please wait a few minutes...");

											// Step 3: Generate AI content for the workflow
											const data = { 
												query: innerWorkflow.default_return_value,
												workflow_id: workflowId,
											};

											// Only include image_url if an image was uploaded
											if (imageBase64 && imageBase64.length > 0) {
												data.image_url = imageBase64;
											}

											const aiResponse = await fetch(globalUrl + "/api/v2/workflows/generate/llm", {
												method: "POST",
												headers: {
													"Content-Type": "application/json",
													Accept: "application/json",
												},
												body: JSON.stringify(data),
												credentials: "include",
											});

											const json = await aiResponse.json();

											// Handle AI response and provide feedback
											if (aiResponse.status === 422) {
												// AI rejection with reason
												if (isCloud) {
													ReactGA.event({
														category: "AIGeneratedNewWorkflow",
														action: "ai_rejected",
														label: workflowId,
													});
												}
												toast.warning(`AI: ${json.reason || "Request rejected"}. Opening workflow editor...`);
											} else if (aiResponse.status !== 200) {
												// Other HTTP errors
												if (isCloud) {
													ReactGA.event({
														category: "AIGeneratedNewWorkflow", 
														action: "generation_failed",
														label: workflowId,
													});
												}
												toast.warning("Workflow created, but AI generation failed. Opening workflow editor...");
											} else {
												// Successful generation
												if (isCloud) {
													ReactGA.event({
														category: "AIGeneratedNewWorkflow",
														action: "generation_success",
														label: workflowId,
													});
												}
												toast.success("Workflow generated successfully! Opening editor...");
											}

											// Step 4: Close modal and redirect (after everything is complete)
											setTimeout(() => {
												setModalOpen(false);
												setAiGenerateLoading(false);
												window.location.href = `/workflows/${workflowId}`;
											}, 1500); 

										} catch (error) {
											if (isCloud) {
												ReactGA.event({
													category: "AIGeneratedNewWorkflow",
													action: "error",
													label: workflowId || "no_workflow",
												});
											}
											toast.error("Failed to generate. Please try again later: " + error.message);
											setAiGenerateLoading(false);
										}
									}}
								>
									{aiGenerateLoading ? (
										<CircularProgress color="secondary" size={20} style={{ marginRight: 8 }} />
									) : (
										<AutoAwesomeIcon style={{ marginRight: 8 }} />
									)}

									AI Generate (beta)
								</Button>
								</span>
							</Tooltip>
						</div>
					) : (
						<Button
							variant="contained"
							style={{}}
							id="save_workflow_button"
							disabled={name.length === 0 || submitLoading === true}
							onClick={() => {
								setSubmitLoading(true)

								// Loop inputfields
								var validfields = []
								for (var i = 0; i < inputQuestions.length; i++) {
									if (inputQuestions[i].deleted === true) {
										continue
									}

									if (inputQuestions[i].value.length === 0) {
										continue
									}

									validfields.push(inputQuestions[i])
								}

								innerWorkflow.input_questions = validfields

								if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
									innerWorkflow.form_control = {}
								}

								innerWorkflow.form_control.input_markdown = inputMarkdown
								innerWorkflow.form_control.output_yields = selectedYieldActions
								innerWorkflow.form_control.form_width = formWidth
								innerWorkflow.form_control.cleanup_actions = selectedCleanupActions

								innerWorkflow.name = name
								innerWorkflow.description = description

								if (newWorkflowTags.length > 0) {
									innerWorkflow.tags = newWorkflowTags
								} else {
									innerWorkflow.tags = []
								}

								if (selectedUsecases.length > 0) {
									innerWorkflow.usecase_ids = selectedUsecases
								} else {
									innerWorkflow.usecase_ids = []
								}

								if (dueDate > 0) {
									innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"] + 1}-${dueDate["$D"]}`).getTime() / 1000
								}

								if (saveWorkflow !== undefined) {
									saveWorkflow(innerWorkflow)

									if (setWorkflow !== undefined) {
										setWorkflow(innerWorkflow)
									}
								} else if (setNewWorkflow !== undefined) {
									setNewWorkflow(
										innerWorkflow.name,
										innerWorkflow.description,
										innerWorkflow.tags,
										innerWorkflow.default_return_value,
										innerWorkflow,
										newWorkflow,
										innerWorkflow.usecase_ids,
										innerWorkflow.blogpost,
										innerWorkflow.status,
										workflowAsCode
									)
									setWorkflow({})
								} else {
									setWorkflow(innerWorkflow)
								}

								setSubmitLoading(true)

								// If new workflow, don't close it
								if (isEditing) {
									setModalOpen(false)
								}
							}}
							color="primary"
						>
							{submitLoading ? <CircularProgress color="secondary" /> : "Save Changes"}
						</Button>
					)}
				</div>

				<DialogContent style={{ paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, paddingBottom: 400, paddingLeft: 50, }}>
					<div style={{ minWidth: newWorkflow ? 500 : 550, maxWidth: newWorkflow ? 450 : 500, }}>
						<TextField
							onChange={(event) => {
								setName(event.target.value)
							}}
							InputProps={{
								style: {
									color: theme.palette.textFieldStyle.color,
								},
							}}
							color="primary"
							placeholder="Name"
							required
							margin="dense"
							defaultValue={innerWorkflow.name}
							label="Name"
							autoFocus
							fullWidth
							id="Enter-Workflow-Name"
						/>

						{newWorkflow === true ?
							<TextField
								id="Workflow-Description"
								onBlur={(event) => {
									innerWorkflow.default_return_value = event.target.value
									setInnerWorkflow(innerWorkflow)
									setUpdate(Math.random())
								}}
								InputProps={{
									style: {
										color: "white",
									},
								}}
								color="primary"
								defaultValue={innerWorkflow.default_return_value}
								placeholder="Please describe your workflow below so the AI can generate it."
								rows="3"
								multiline
								label="Description"
								margin="dense"
								fullWidth
							/>
						: null}

						<div style={{ display: "flex", marginTop: 10, }}>
							{usecases !== null && usecases !== undefined && usecases.length > 0 ?
								<FormControl style={{ flex: 1, marginRight: 5, }}>
									<InputLabel htmlFor="grouped-select-usecase">Usecases</InputLabel>
									<Select
										defaultValue=""
										id="grouped-select"
										label="Matching Usecase"
										multiple
										value={selectedUsecases}
										renderValue={(selected) => selected.join(', ')}
										onChange={(event) => {
											console.log("Changed: ", event)
										}}
									>
										<MenuItem value="">
											<em>None</em>
										</MenuItem>
										{usecases.map((usecase, index) => {
											//console.log(usecase)
											return (
												<span key={index}>
													<ListSubheader
														style={{ color: usecase.color }}
													>
														{usecase.name}
													</ListSubheader>
													{usecase.list.map((subcase, subindex) => {
														//console.log(subcase)
														total_count += 1
														return (
															<MenuItem key={subindex} value={total_count} onClick={(event) => {
																if (selectedUsecases.includes(subcase.name)) {
																	const itemIndex = selectedUsecases.indexOf(subcase.name)
																	if (itemIndex > -1) {
																		selectedUsecases.splice(itemIndex, 1)
																	}
																} else {
																	selectedUsecases.push(subcase.name)
																}

																setUpdate(Math.random());
																setSelectedUsecases(selectedUsecases)
															}}>
																<Checkbox style={{ color: selectedUsecases.includes(subcase.name) ? usecase.color : theme.palette.inputColor }} checked={selectedUsecases.includes(subcase.name)} />
																<ListItemText primary={subcase.name} />
															</MenuItem>
														)
													})}
												</span>
											)
										})}
									</Select>
								</FormControl>
								: null}
							<MuiChipsInput
								style={{ flex: 1, maxHeight: 120, overflow: "auto", }}
								InputProps={{
									style: {
										color: theme.palette.textFieldStyle.color,
									},
								}}
								placeholder="Tags"
								color="primary"
								fullWidth
								value={newWorkflowTags}
								onChange={(chip) => {
									setNewWorkflowTags(chip);
								}}
								onBlur={(event) => {
									if (event.target.value.length === 0) {
										return
									}

									if (newWorkflowTags.includes(event.target.value)) {
										return
									}

									newWorkflowTags.push(event.target.value)
									setNewWorkflowTags(newWorkflowTags)

									setUpdate(Math.random())
								}}
								onAdd={(chip) => {
									newWorkflowTags.push(chip)
									setNewWorkflowTags(newWorkflowTags)
								}}
								onDelete={(chip, index) => {
									console.log("Deleting: ", chip, index)
									newWorkflowTags.splice(index, 1)
									setNewWorkflowTags(newWorkflowTags)
									setUpdate(Math.random())
								}}
							/>
						</div>

						{/* Flowchart Upload Section - Only for new workflows */}
						{newWorkflow === true ? (
							<div style={{ marginTop: 100, }}>
								{!uploadedImage ? (
									<div
										style={{
											border: `1px solid ${theme.palette.primary.main}`,
											borderRadius: 8,
											padding: 20,
											textAlign: 'center',
											cursor: 'pointer',
											transition: 'all 0.2s ease',
											backgroundColor: theme.palette.surfaceColor,
											'&:hover': {
												backgroundColor: theme.palette.primary.main + '10'
											}
										}}
										onClick={() => {
											const input = document.createElement('input')
											input.type = 'file'
											input.accept = 'image/png,image/jpeg,image/jpg'
											input.onchange = (e) => {
												if (e.target.files.length > 0) {
													handleImageUpload(e.target.files[0])
												}
											}
											input.click()
										}}
									>
										{imageUploading ? (
											<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
												<CircularProgress size={24} style={{ marginBottom: 10 }} />
												<Typography variant="body2" color="textSecondary">
													Processing image...
												</Typography>
											</div>
										) : (
											<div>
												<CloudUploadIcon 
													style={{ 
														fontSize: 48, 
														color: theme.palette.secondary || '#666',
														marginBottom: 10 
													}} 
												/>
												<Typography variant="h6" style={{ marginBottom: 5 }}>
													Generate Workflow from Flowchart (beta)
												</Typography>
												<Typography variant="body2" color="textSecondary" style={{ marginBottom: 10 }}>
													Click to upload your flowchart - Your LLM will convert it to a workflow
												</Typography>
												<Typography variant="caption" color="textSecondary">
													PNG, JPG, JPEG • Max 5MB
												</Typography>
											</div>
										)}
									</div>
								) : (
									<div
										style={{
											border: `1px solid ${theme.palette.primary.main}`,
											borderRadius: 8,
											padding: 15,
											backgroundColor: theme.palette.primary.main + '10',
											display: 'flex',
											alignItems: 'center',
											gap: 15
										}}
									>
										<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
											<CheckCircleIcon style={{ color: theme.palette.success.main }} />
											<div>
												<Typography variant="body2" style={{ fontWeight: 'bold' }}>
													{uploadedImage.name}
												</Typography>
												<Typography variant="caption" color="textSecondary">
													{formatFileSize(uploadedImage.size)}
												</Typography>
											</div>
										</div>
										<IconButton 
											onClick={removeUploadedImage}
											style={{ color: theme.palette.text.secondary }}
											size="small"
										>
											<CloseIcon />
										</IconButton>
									</div>
								)}
							</div>
						) : null}

						{showMoreClicked === true ?
							<div style={{ marginTop: 50, }}>
								<TextField
									onBlur={(event) => {
										setDescription(event.target.value)
									}}
									InputProps={{
										style: {
											color: "white",
										},
									}}
									multiline
									rows={3}
									color="primary"
									defaultValue={innerWorkflow.description}
									placeholder="Description"
									label="Description"
									margin="dense"
									fullWidth
								/>

								<div style={{ display: "flex" }}>
									<FormControl style={{ marginTop: 15, }}>
										<FormLabel id="demo-row-radio-buttons-group-label">Status</FormLabel>
										<RadioGroup
											row
											aria-labelledby="demo-row-radio-buttons-group-label"
											name="row-radio-buttons-group"
											defaultValue={innerWorkflow.status}
											onChange={(e) => {
												console.log("Data: ", e.target.value)

												//innerWorkflow.workflow_type = e.target.value
												innerWorkflow.status = e.target.value
												setInnerWorkflow(innerWorkflow)
											}}
										>
											<FormControlLabel value="test" control={<Radio />} label="Test" />
											<FormControlLabel value="staging" control={<Radio />} label="Staging" />
											<FormControlLabel value="preprod" control={<Radio />} label="Pre-production" />
											<FormControlLabel value="production" control={<Radio />} label="Production" />

										</RadioGroup>
									</FormControl>
								</div>
								<div />

								

								<TextField
									onBlur={(event) => {
										innerWorkflow.default_return_value = event.target.value
										setInnerWorkflow(innerWorkflow)
									}}
									InputProps={{
										style: {
											color: "white",
										},
									}}
									color="primary"
									defaultValue={innerWorkflow.default_return_value}
									placeholder="Default return value (used for Subflows if the subflow fails)"
									rows="3"
									multiline
									label="Default return value"
									margin="dense"
									fullWidth
								/>

								<Divider id="mssp_control" style={{ marginTop: 20, marginBottom: 20, }} />

								<Typography variant="h4" style={{ marginTop: 50, }}>
									Multi-Tenancy, Backups & Security
								</Typography>
								<Typography variant="body2" color="textSecondary" style={{ marginTop: 30, marginBottom: 10, }}>
									Control mechanisms for multi-tenancy, backups, and security.
								</Typography>

								<Typography variant="h6" style={{ marginTop: 50, }}>
									Multi-Tenant Workflows
								</Typography>

								<Typography variant="body2" color="textSecondary" style={{ marginTop: 10, marginBottom: 10, }}>
									Make one workflow, and keep a separate, synced copy in your other tenants. Control distributed auth, runtime locations, files, datastore keys etc. Can only distribute from parent org to child org. Need help trying it? <a href="https://shuffler.io/contact" target="_blank" style={{color: "#f85a3e", textDecoration: "none",}}>Contact us for a demo</a>
								</Typography>

								{userdata !== undefined && userdata !== null && userdata.orgs !== undefined && userdata.orgs !== null && userdata.orgs.length > 0  ?

									userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).length === 0 ?
										userdata.active_org.creator_org === undefined || userdata.active_org.creator_org === null || userdata.active_org.creator_org === "" ?
											<Typography variant="body2" style={{ marginTop: 10, color: "rgba(255,255,255,0.7)" }}>
												Your organization does not have any suborgs yet OR your user may not have access to available suborgs. Please <a href="/admin?tab=tenants" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">make one</a> or get access to suborgs by another admin, then try again.
											</Typography>
											:
											<Typography variant="body2" style={{ marginTop: 10, color: "rgba(255,255,255,0.7)" }}>
												{innerWorkflow.parentorg_workflow !== undefined && innerWorkflow.parentorg_workflow !== null && innerWorkflow.parentorg_workflow.length > 0 ? <span>This workflow is distributed from <a href={`/workflows/${innerWorkflow.parentorg_workflow}`} style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">your parent workflow</a> (you may not have access).</span> : null}
												<br />
												<br />
												You can only distribute to suborgs from a parent org.
											</Typography>
										:
										<Select
											multiple
											style={{ marginTop: 10, }}
											value={innerWorkflow.suborg_distribution === undefined || innerWorkflow.suborg_distribution === null ? ["none"] : innerWorkflow.suborg_distribution}
											disabled={workflow?.parentorg_workflow !== undefined && workflow?.parentorg_workflow !== null && workflow?.parentorg_workflow.length > 0}
											onChange={(e) => {
												var newvalue = e.target.value
												if (newvalue.length > 1 && newvalue[0] === "none") {
													newvalue = newvalue.filter(value => value !== "none")
												}

												if (newvalue.includes("none")) {
													newvalue = ["none"]
												} else if (newvalue.includes("all")) {
													newvalue = userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).map(org => org.id)
												}

												innerWorkflow.suborg_distribution = newvalue
												setInnerWorkflow(innerWorkflow)
												setUpdate(Math.random())
											}}
											label="Suborg Distribution"
											fullWidth
										>
											<MenuItem value="none">
												None
											</MenuItem>
											<MenuItem value="all">
												All
											</MenuItem>
											{userdata.orgs.map((data, index) => {

												var skipOrg = false;
												if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org === userdata.active_org.id) {
													// Finds the parent org
												} else {
													return null
												}

												const correctRegion = data?.region_url === userdata?.region_url 

												const imagesize = 22
												const imageStyle = {
													width: imagesize,
													height: imagesize,
													pointerEvents: "none",
													marginRight: 10,
													marginLeft:
														data.creator_org !== undefined &&
															data.creator_org !== null &&
															data.creator_org.length > 0
															? data.id === userdata.active_org.id
																? 0
																: 20
															: 0,
												}

												const image =
													data.image === "" ? (
														<img
															alt={data.name}
															src={theme.palette.defaultImage}
															style={imageStyle}
														/>
													) : (
														<img
															alt={data.name}
															src={data.image}
															style={imageStyle}
														/>
													)


												return (
													<MenuItem 
														key={index} 
													 	value={data.id}
														disabled={isCloud && !correctRegion}
													>
														<Checkbox checked={innerWorkflow.suborg_distribution !== undefined && innerWorkflow.suborg_distribution !== null && innerWorkflow.suborg_distribution.includes(data.id)} />
														{image}{" "}
														<span style={{ marginLeft: 8 }}>
															{data.name}
														</span>
													</MenuItem>
												)
											})}
										</Select>
									:
									<Link to={"/admin?tab=tenants"} style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">
										<Typography variant="body2" style={{ marginTop: 10, }}>
											Create a sub-org to distribute workflows to suborgs.
										</Typography>
									</Link>
								}


								<Typography variant="h6" style={{ marginTop: 75, }}>
									Git Backup Repository
								</Typography>
								<Typography variant="body2" style={{ textAlign: "left", marginTop: 5, }} color="textSecondary">
									Decide where this workflow is backed up in a Git repository. Will create logs and notifications if upload fails. <b>The repository and branch must already have been initialized</b>. Files will show up in the root folder in the format 'orgid/workflow status/workflow id.json' and be formatted, with removed images, to make diffing easy. Overrides your <a href="/admin?admin_tab=org_config" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">default backup repository</a>. <a href="/docs/configuration#environment-variables" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">Credentials are encrypted.</a> Creates <a href="/admin?admin_tab=notifications" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">notifications</a> if it fails.
								</Typography>
								<Grid container style={{ marginTop: 10, }} spacing={2}>
									<Grid item xs={6} style={{}}>
										<span>
											<Typography>Workflow Backup Repository</Typography>
											<TextField
												required
												style={{
													flex: "1",
													marginTop: "5px",
													marginRight: "15px",
												}}
												fullWidth={true}
												type="name"
												multiline={true}
												rows={1}
												id="outlined-with-placeholder"
												margin="normal"
												variant="outlined"
												placeholder="github/com/shuffle/workflowbackup "
												defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_repo === undefined || innerWorkflow.backup_config.upload_repo === null || innerWorkflow.backup_config.upload_repo === "" ? "" : innerWorkflow.backup_config.upload_repo}
												onChange={(e) => {
													//setUploadRepo(e.target.value);
													innerWorkflow.backup_config.upload_repo = e.target.value
													setInnerWorkflow(innerWorkflow)
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
													style: {
														color: "white",
													},
												}}
											/>
										</span>
									</Grid>
									<Grid item xs={6} style={{}}>
										<span>
											<Typography>Branch</Typography>
											<TextField
												style={{
													flex: "1",
													marginTop: "5px",
													marginRight: "15px",
												}}
												fullWidth={true}
												type="name"
												id="outlined-with-placeholder"
												margin="normal"
												variant="outlined"
												multiline={true}
												rows={1}
												placeholder="The branch to use (default: master)"
												defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_branch === undefined || innerWorkflow.backup_config.upload_branch === null || innerWorkflow.backup_config.upload_branch === "" ? "" : innerWorkflow.backup_config.upload_branch}
												onChange={(e) => {
													innerWorkflow.backup_config.upload_branch = e.target.value
													setInnerWorkflow(innerWorkflow)
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
													style: {
														color: "white",
													},
												}}
											/>
										</span>
									</Grid>
								</Grid>
								<Grid container style={{}} spacing={2}>
									<Grid item xs={6} style={{}}>
										<span>
											<Typography>Username</Typography>
											<TextField
												style={{
													flex: "1",
													marginTop: "5px",
													marginRight: "15px",
												}}
												fullWidth={true}
												type="name"
												multiline={true}
												rows={1}
												id="outlined-with-placeholder"
												margin="normal"
												variant="outlined"
												placeholder="Username to use"
												defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_username === undefined || innerWorkflow.backup_config.upload_username === null || innerWorkflow.backup_config.upload_username === "" ? "" : innerWorkflow.backup_config.upload_username}
												onChange={(e) => {
													innerWorkflow.backup_config.upload_username = e.target.value
													setInnerWorkflow(innerWorkflow)
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
													style: {
														color: "white",
													},
												}}
											/>
										</span>
									</Grid>
									<Grid item xs={6} style={{}}>
										<span>
											<Typography>Git token/password</Typography>
											<TextField
												required
												style={{
													flex: "1",
													marginTop: "5px",
													marginRight: "15px",
												}}
												fullWidth={true}
												id="outlined-with-placeholder"
												margin="normal"
												variant="outlined"
												multiline={true}
												rows={1}
												placeholder="Your API token. Required."
												defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_token === undefined || innerWorkflow.backup_config.upload_token === null || innerWorkflow.backup_config.upload_token === "" ? "" : innerWorkflow.backup_config.upload_token}
												onChange={(e) => {
													innerWorkflow.backup_config.upload_token = e.target.value
													setInnerWorkflow(innerWorkflow)
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
													style: {
														color: "white",
													},
												}}
												type="password"
											/>
										</span>
									</Grid>
								</Grid>

								<div id="cleanup">
									<Typography variant="h6" style={{ marginTop: 50, }}>
										Result cleanup ({selectedCleanupActions.length === 0 ? "No cleanup yet" : selectedCleanupActions.length === 1 ? "Cleaning up 1 node" : `Cleaning up ${selectedCleanupActions.length} nodes`})
									</Typography>

									<Typography variant="body2" color="textSecondary" style={{ marginBottom: 20, }}>
										When a workflow run is done, the data from the selected actions will be removed by replacing it with a default value. This is useful for cleaning up sensitive data, or data that is no longer needed. This is done after a workflow run is finished or aborted, and is not reversible. Data will remain in the workflow run result (last node value) even if the action result itself is cleaned up.
									</Typography>

									<FormControl style={{ marginTop: 15, }}>
										<Select
											defaultValue=""
											id="result-cleanup-control"
											label="Cleaned Up nodes"
											multiple
											fullWidth
											style={{ width: 500, }}
											value={selectedCleanupActions === [] ? ["none"] : selectedCleanupActions}
											renderValue={(selected) => selected.join(', ')}
											onChange={(event) => {
												if (event.target.value.length > 0) {
													if (event.target.value.includes("none")) {
														setSelectedCleanupActions([])
														return
													}
												}

												const newvalue = event?.target?.value
												if (newvalue === undefined || newvalue === null) {
												} else {
													setSelectedCleanupActions(newvalue)
												}
											}}
										>
											<MenuItem value="none">
												<em>None</em>
											</MenuItem>
											{workflow?.actions?.map((action, actionIndex) => {
												return (
													<MenuItem
														key={actionIndex}
														value={action.id}
													>
														<Tooltip title={action.app_name} key={actionIndex}>
															<img src={action.large_image !== undefined && action.large_image !== null && action.large_image.length > 0 ? action.large_image : theme.palette.defaultImage} style={{ width: 20, height: 20, marginRight: 10, }} />
														</Tooltip>
														{action.label}
													</MenuItem>
												)
											})}
										</Select>
									</FormControl>
								</div>

								<Divider style={{ marginTop: 20, marginBottom: 20, }} />


								<div id="form_fill" style={{ position: "relative", }}>
									<Typography variant="h4" style={{ marginTop: 100, }}>
										Form Control
									</Typography>
									<Typography variant="body1" color="textSecondary" style={{ marginTop: 10, }}>
										Form Control is used to control how the Form for the workflow is shown to users. You can add input fields, markdown, and more. This is the first step in the workflow, and is required for all workflows.
									</Typography>

									<Typography variant="h6" style={{ marginTop: 50, }}>
										Input fields
									</Typography>

									<Tooltip title="Go to Public Form page">
										<IconButton style={{ position: "absolute", top: 0, right: 10, }}>
											<a
												rel="noopener noreferrer"
												href={`/forms/${workflow.id}`}
												target="_blank"
												style={{
													textDecoration: "none",
													color: "#f85a3e",
													marginLeft: 5,
												}}
											>
												<EditNoteIcon />
											</a>
										</IconButton>
									</Tooltip>

								</div>

								<Typography variant="body2" color="textSecondary" style={{ marginBottom: 20, }}>
									Input fields are fields that will be used during the startup of the workflow. These will be formatted in JSON and is most commonly used from the <a href={`/forms/${workflow.id}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Form page</a> for this workflow. If chosen in the User Input node, these will be required fields. Use Semi-Colon ";" to create dropdown options. The first key will be the name shown, and subsequent keys will be the available values.
								</Typography>


								{inputQuestions.map((data, index) => {
									var showListinfo = false
									if (data.value !== undefined && data.value !== null && data.value.length > 0) {
										if (data.value.includes(";")) {
											showListinfo = true
										}
									}

									return (
										<div style={{ display: "flex", }}>
											<TextField
												disabled={data.deleted === true}
												style={{
													flex: 2,
													marginTop: 0,
													marginBottom: 0,
													backgroundColor: theme.palette.inputColor,
													marginRight: 5,
												}}
												fullWidth={true}
												placeholder="Question"
												id="standard-required"
												margin="normal"
												variant="outlined"
												defaultValue={data.name}
												onChange={(e) => {
													inputQuestions[index].name = e.target.value
													setInputQuestions(inputQuestions)
													setUpdate(Math.random());
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
												}}
											/>
											<TextField
												disabled={data.deleted === true}
												style={{
													flex: 2,
													marginTop: 0,
													marginBottom: 0,
													backgroundColor: theme.palette.inputColor,
													marginRight: 5,
												}}
												fullWidth={true}
												placeholder="$exec JSON key"
												id="standard-required"
												margin="normal"
												variant="outlined"
												helperText={showListinfo === true ? "Dropdown list" : null}
												defaultValue={data.value}
												onChange={(e) => {
													// Replace multiple semicolon with one
													e.target.value = e.target.value.replace(";;", ";")

													inputQuestions[index].value = e.target.value
													setInputQuestions(inputQuestions)
													setUpdate(Math.random());
												}}
												InputProps={{
													classes: {
														notchedOutline: classes.notchedOutline,
													},
												}}
											/>
											<Button
												color="primary"
												style={{ maxWidth: 50, marginLeft: 15 }}
												disabled={data.deleted === true}
												variant="outlined"
												onClick={() => {
													// Remove current index
													console.log("Removing index: ", index)
													inputQuestions[index].deleted = true
													setUpdate(Math.random());
												}}
											>
												<RemoveIcon style={{}} />
											</Button>
										</div>
									)
								})}

								<Button
									color="primary"
									style={{ maxWidth: 50, marginLeft: 15, marginTop: 20, }}
									variant="outlined"

									disabled={inputQuestions !== undefined && inputQuestions !== null && inputQuestions.length > 5}
									onClick={() => {
										inputQuestions.push({
											"name": "",
											"value": "",
											"deleted": false,
											"required": false
										})
										setInputQuestions(inputQuestions)
										setUpdate(Math.random());
									}}
								>
									<AddIcon style={{}} />
								</Button>

								<div id="input_markdown">
									<Typography variant="h6" style={{ marginTop: 50, }}>
										Input Markdown
									</Typography>
									<Typography variant="body2" color="textSecondary" style={{ marginBottom: 20, }}>
										Markdown will be shown on the <a href={`/forms/${workflow.id}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Form page</a>. The first image added will be used in your Form Toolbox list. Output for a Workflow is shown in Markdown, and is controlled by the LAST action that runs. Supports HTML.
									</Typography>
									<TextField
										multiline
										minRows={3}
										fullWidth
										color="primary"
										value={inputMarkdown}
										onKeyDown={(e) => {
											//console.log("KEY: ", e.key)
											if (e.key === "Tab") {
												e.preventDefault()
											}
										}}

										onChange={(e) => {
											if (setRealtimeMarkdown !== undefined) {
												setRealtimeMarkdown(e.target.value)
											}

											setInputMarkdown(e.target.value)
											workflow.form_control.input_markdown = e.target.value
											setWorkflow(workflow)
											setUpdate(Math.random())
										}}
									/>
								</div>

								<div id="form_size">
									<Typography variant="h6" style={{ marginTop: 50, }}>
										Form Size
									</Typography>
									<Typography variant="body2" color="textSecondary" style={{ marginBottom: 20, }}>
										Control the width of the form. It will grow vertically as needed.
									</Typography>
									<Slider
										defaultValue={formWidth}
										aria-labelledby="discrete-slider"
										valueLabelDisplay="auto"
										step={10}
										marks
										min={300}
										max={1000}
										onChange={(e, value) => {
											setFormWidth(value)
										}}
									/>
								</div>

								<div id="output_control">
									<Typography variant="h6" style={{ marginTop: 50, }}>
										Form Output Control ({selectedYieldActions.length === 0 ? "No Returns" : selectedYieldActions.length === 1 ? "Returning 1 node" : `Returning ${selectedYieldActions.length} nodes`})
									</Typography>

									<Typography variant="body2" color="textSecondary" style={{ marginBottom: 20, }}>
										When running this workflow as a form, the output will be shown as a Markdown object by default, with JSON objects being rendered. By adding nodes below, they will be shown while the workflow is running as soon as they get a result. Failing/Skipped nodes are not shown. This makes it possible to track progress for more complex usecases.
									</Typography>

									<FormControl style={{ marginTop: 15, }}>
										<Select
											defaultValue=""
											id="output-yield-control"
											label="Yielding nodes"
											multiple
											fullWidth
											style={{ width: 500, }}
											value={selectedYieldActions === [] ? ["none"] : selectedYieldActions}
											renderValue={(selected) => selected.join(', ')}
											onChange={(event) => {
												console.log("Value: ", event.target.value)
												if (event.target.value.length > 0) {
													if (event.target.value.includes("none")) {
														setSelectedYieldActions([])
														return
													}
												}

												const newvalue = event?.target?.value
												if (newvalue === undefined || newvalue === null) {
												} else {
													setSelectedYieldActions(newvalue)
												}
											}}
										>
											<MenuItem value="none">
												<em>None</em>
											</MenuItem>
											{workflow?.actions?.map((action, actionIndex) => {
												return (
													<MenuItem
														key={actionIndex}
														value={action.id}
													>
														<Tooltip title={action.app_name} key={actionIndex}>
															<img src={action.large_image !== undefined && action.large_image !== null && action.large_image.length > 0 ? action.large_image : theme.palette.defaultImage} style={{ width: 20, height: 20, marginRight: 10, }} />
														</Tooltip>
														{action.label}
													</MenuItem>
												)
											})}
										</Select>
									</FormControl>
								</div>

							<Divider style={{marginTop: 75, marginBottom: 75, }}/>


							<Typography variant="h4" style={{ }}>
								Publishing

								<Chip
									style={{ marginLeft: 20, marginTop: 10, }}
									color={workflow?.public === true ? "primary" : "secondary"}
									variant={workflow?.public === true ? "default" : "outlined"}
									label={workflow?.public === true ? "Public" : "NOT Public"}
								/>
							</Typography>
							<Typography variant="body2" color="textSecondary" style={{ marginTop: 10, }}>
								Publishing is related to making this workflow itself public. When publishing a workflow, all the details (except sensitive info) become available to anyone. The fields below will help a user and Shuffle's system understand your workflow better. When a workflow is published, you keep the original, and a copy enters the Shuffle workflow search, and is associated with your <a href="/creators" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">creator</a> or partner account, if you have one. You can always unpublish the workflow after. When ready to publish, click the three dots next to a workflow on the main workflow page. 

								You can always unpublish a workflow after.
							</Typography>


							<LocalizationProvider style={{marginLeft: 0, }} dateAdapter={AdapterDayjs}>
								<DatePicker
									sx={{
										marginTop: 3,
										marginLeft: 3,
									}}
									value={dueDate}
									label="Due Date"
									format="YYYY-MM-DD"
									onChange={(newValue) => {
										setDueDate(newValue)
									}}
								/>
							</LocalizationProvider>

							<FormControl style={{ marginTop: 15, }}>
								<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
								<RadioGroup
									row
									aria-labelledby="demo-row-radio-buttons-group-label"
									name="row-radio-buttons-group"
									defaultValue={innerWorkflow.workflow_type}
									onChange={(e) => {
										console.log("Data: ", e.target.value)

										innerWorkflow.workflow_type = e.target.value
										setInnerWorkflow(innerWorkflow)
									}}
								>
									<Tooltip title="Agentic workflows takes an input based on input questions (forms) and performs actions based on it by itself, using Large Action Models & Singul">
										<FormControlLabel value="agentic" control={<Radio />} label="Agentic" />
									</Tooltip>

									<Tooltip title="Trigger workflows are typically running a schedule to get some data, doing some deduplication before sending it to a subflow or standalone workflow.">
										<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
									</Tooltip>

									<Tooltip title="Subflow workflows are typically used to subprocess some data, and in some cases return the result to the parent workflow.">
										<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
									</Tooltip>

									<Tooltip title="Standalone is default. This has no impact on Shuffle as a system.">
										<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
									</Tooltip>

								</RadioGroup>
							</FormControl>


							<TextField
								onBlur={(event) => {
									innerWorkflow.blogpost = event.target.value
									setInnerWorkflow(innerWorkflow)
								}}
								InputProps={{
									style: {
										color: "white",
									},
								}}
								color="primary"
								defaultValue={innerWorkflow.blogpost}
								placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
								rows="1"
								label="blogpost"
								margin="dense"
								fullWidth
							/>
							<TextField
								onBlur={(event) => {
									innerWorkflow.video = event.target.value
									setInnerWorkflow(innerWorkflow)
								}}
								InputProps={{
									style: {
										color: "white",
									},
								}}
								color="primary"
								defaultValue={innerWorkflow.video}
								placeholder="A youtube or loom link to the video"
								rows="1"
								label="Video"
								margin="dense"
								fullWidth
							/>

							<Tooltip color="primary" title={"Add more details"} placement="top">
								<Button
									style={{ margin: "auto", marginTop: 50, marginBottom: 10, textAlign: "center", textTransform: "none", }}
									variant="outlined"
									disabled={newWorkflow === true}
									color="secondary"
									onClick={() => {
										setShowMoreClicked(!showMoreClicked);
									}}
								>
									{showMoreClicked ? <ExpandLessIcon style={{ marginRight: 10, }} /> : <ExpandMoreIcon style={{ marginRight: 10, }} />}
									{showMoreClicked ? "Less Options" : "More Options"}

								</Button>
							</Tooltip>
						</div>
					: null}

					</div>

				</DialogContent>


				{/*newWorkflow === true ?
					<span style={{ paddingTop: 30 }}>
						<Typography variant="h6" style={{ marginLeft: 30, paddingBottom: 0, }}>
							Relevant Workflows
						</Typography>

						{priority === null || priority === undefined ? null :
							<div style={{ marginLeft: 30, }}>
								<WorkflowTemplatePopup
									userdata={userdata}
									globalUrl={globalUrl}

									srcapp={priority.description.split("&").length > 2 ? priority.description.split("&")[0] : ""}
									img1={priority.description.split("&").length > 2 ? priority.description.split("&")[1] : ""}

									dstapp={priority.description.split("&").length > 3 ? priority.description.split("&")[2] : ""}
									img2={priority.description.split("&").length > 3 ? priority.description.split("&")[3] : ""}
									title={priority.name}
									description={priority.description.split("&").length > 4 ? priority.description.split("&")[4] : ""}

									apps={apps}
								/>
							</div>
						}

					</span>
			: null*/}
			{/*newWorkflow === true && name.length > 2 ?
			<div style={{marginLeft: 30, }}>
				<WorkflowGrid 
					maxRows={1}
					globalUrl={globalUrl}
					showSuggestions={false}
					isMobile={isMobile}
					userdata={userdata}
					inputsearch={name+description+newWorkflowTags.join(" ")}

					parsedXs={6}
					alternativeView={false}
					onlyResults={true}
				/>
			</div> 
		  : null*/}
			</FormControl>
		</Drawer >
	)
}

export default EditWorkflow;
