<!--
  Compose source form. Surfaces the YAML stack + optional project name as
  proper controls instead of forcing the operator to hand-escape YAML inside
  a JSON string. The parent owns the `ComposeFormState` (from
  `$lib/workload/sourceForms`) and binds it here; serialization to the
  `source_config` object is done by the parent via `composeToConfig` so the
  shape stays byte-identical to the legacy inline path.

  The "Advanced JSON" chip is rendered by the parent (it owns the raw-editor
  toggle); this component is purely the form-field body.
-->
<script lang="ts">
	import type { ComposeFormState } from '$lib/workload/sourceForms';
	import { t } from '$lib/i18n';

	interface Props {
		form: ComposeFormState;
		/** Flip to the raw-JSON editor (owned by the parent). */
		onAdvanced: () => void;
	}

	let { form = $bindable(), onAdvanced }: Props = $props();
</script>

<div class="editor">
	<div class="editor-head">
		<span class="dot"></span><span class="dot"></span><span class="dot"></span>
		<span class="editor-title">{$t('apps.new.composeHeader')}</span>
		<span class="spacer"></span>
		<button type="button" class="json-escape" onclick={onAdvanced} title={$t('apps.new.switchToJsonTitle')}>
			{$t('apps.new.advancedJson')}
		</button>
	</div>
	<textarea
		id="app-compose-yaml"
		bind:value={form.yaml}
		rows="12"
		spellcheck="false"
		class="code-area"
		placeholder={$t('apps.new.composePlaceholder')}
		aria-label={$t('apps.new.composeAriaLabel')}
	></textarea>
	<div class="editor-foot">
		<span class="foot-status">
			<span class="foot-dot" aria-hidden="true"></span>
			{$t('apps.new.fieldConfigYaml')}
		</span>
		<span class="sep">·</span>
		<span>{form.yaml.split('\n').length} {$t('apps.new.linesUnit')}</span>
	</div>
</div>
<label class="sub" for="app-compose-project">
	<span class="sub-label">{$t('apps.new.composeProjectLabel')}</span>
	<input
		id="app-compose-project"
		type="text"
		class="input"
		bind:value={form.projectName}
		placeholder={$t('apps.new.composeProjectPlaceholder')}
		autocomplete="off"
		spellcheck="false"
	/>
</label>

<style>
	.input {
		width: 100%;
		background: var(--surface-input);
		border: 1px solid var(--border-input);
		border-radius: var(--radius-lg);
		padding: 0.6rem 0.8rem;
		font-size: 0.92rem;
		color: var(--text-primary);
		font-family: inherit;
		outline: none;
		transition: border-color 120ms ease, box-shadow 120ms ease;
	}
	.input:focus {
		border-color: var(--border-focus);
		box-shadow: 0 0 0 3px var(--accent-soft);
	}
	.input:focus-visible {
		outline: none;
	}
	.sub {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}
	.sub-label {
		font-family: var(--forge-mono);
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-secondary);
	}

	/* ── Code editor frame ─────────────────────────── */
	.editor {
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: var(--surface-input);
		transition: border-color 150ms ease, box-shadow 150ms ease;
	}
	.editor:focus-within {
		border-color: var(--border-focus);
		box-shadow: 0 0 0 3px var(--accent-soft);
	}
	.editor-head {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.55rem 0.8rem;
		background: var(--surface-card-hover);
		border-bottom: 1px solid var(--border-primary);
		font-family: var(--forge-mono);
		font-size: 0.7rem;
		color: var(--text-tertiary);
	}
	.editor-head .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--border-input);
	}
	.editor-head .dot:nth-of-type(1) {
		background: #ef4444aa;
	}
	.editor-head .dot:nth-of-type(2) {
		background: #f59e0baa;
	}
	.editor-head .dot:nth-of-type(3) {
		background: #10b981aa;
	}
	.editor-title {
		margin-left: 0.4rem;
		color: var(--text-secondary);
		font-weight: 600;
		letter-spacing: 0.02em;
	}
	.spacer {
		flex: 1;
	}

	/* ── "Edit as JSON" escape hatch ─────────────────────────
	   Quiet secondary text-link rather than a prominent chip, so it doesn't
	   compete with the form title. */
	.json-escape {
		background: none;
		border: 0;
		padding: 0;
		font-family: var(--forge-mono);
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--text-tertiary);
		cursor: pointer;
		text-decoration: none;
		text-underline-offset: 3px;
		transition: color 120ms ease;
	}
	.json-escape:hover {
		color: var(--forge-accent);
		text-decoration: underline;
	}
	.json-escape:focus-visible {
		outline: 2px solid var(--border-focus);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}
	.code-area {
		display: block;
		width: 100%;
		border: 0;
		background: transparent;
		padding: 0.85rem 1rem;
		font-family: var(--forge-mono);
		font-size: 0.82rem;
		line-height: 1.55;
		color: var(--text-primary);
		resize: vertical;
		outline: none;
		tab-size: 2;
	}
	.code-area::placeholder {
		color: var(--text-tertiary);
	}
	.editor-foot {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.45rem 0.8rem;
		border-top: 1px solid var(--border-primary);
		background: var(--surface-card-hover);
		font-family: var(--forge-mono);
		font-size: 0.62rem;
		color: var(--text-tertiary);
	}
	.foot-status {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		color: var(--color-success-dark);
		letter-spacing: 0.1em;
		font-weight: 600;
	}
	.foot-status .foot-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--color-success);
	}
	:global([data-theme='dark']) .foot-status {
		color: #86efac;
	}
	.sep {
		opacity: 0.5;
	}
</style>
