<script lang="ts">
	import type { PageProps } from './$types';

	const { data }: PageProps = $props();
	const { job } = data;

	const languageNames: Record<string, string> = {
		en: 'English',
		fr: 'French',
		es: 'Spanish',
		it: 'Italian',
		de: 'German'
	};

	const lang = (code: string) => languageNames[code] ?? code.toUpperCase();

	const fmt = (iso: string | null | undefined) => {
		if (!iso) return null;
		return new Intl.DateTimeFormat('en-GB', {
			year: 'numeric',
			month: 'short',
			day: 'numeric',
			hour: '2-digit',
			minute: '2-digit'
		}).format(new Date(iso));
	};

	const isTerminal = job.status === 'succeeded' || job.status === 'failed';
</script>

<div class="page">
	<nav class="breadcrumb">
		<a href="/app/jobs" class="link">← Jobs</a>
	</nav>

	<header class="page-header">
		<div class="header-top">
			<h1 class="form-title">Job Details</h1>
			<span class="status-badge" data-status={job.status}>{job.status}</span>
		</div>
		<p class="job-id">{job.id}</p>
	</header>

	<dl class="meta-grid">
		<div class="meta-item">
			<dt class="field-label">Language Pair</dt>
			<dd class="meta-value">{lang(job.source_language)} → {lang(job.target_language)}</dd>
		</div>
		<div class="meta-item">
			<dt class="field-label">Complexity</dt>
			<dd class="meta-value">{job.complexity_level}</dd>
		</div>
		<div class="meta-item">
			<dt class="field-label">Created</dt>
			<dd class="meta-value">{fmt(job.created_at)}</dd>
		</div>
		{#if job.started_at}
			<div class="meta-item">
				<dt class="field-label">Started</dt>
				<dd class="meta-value">{fmt(job.started_at)}</dd>
			</div>
		{/if}
		{#if job.completed_at}
			<div class="meta-item">
				<dt class="field-label">Completed</dt>
				<dd class="meta-value">{fmt(job.completed_at)}</dd>
			</div>
		{/if}
	</dl>

	{#if job.status === 'failed' && job.error_message}
		<div class="alert alert-error" role="alert">
			<strong>Job failed:</strong>
			{job.error_message}
		</div>
	{:else if !isTerminal}
		<div class="pending-notice">
			<div class="spinner" aria-hidden="true"></div>
			<p>This job is <strong>{job.status}</strong>. Refresh to check for updates.</p>
		</div>
	{/if}

	{#if job.input_summary}
		<section class="content-section">
			<h2 class="section-title">Input Summary</h2>
			<div class="prose">{job.input_summary}</div>
		</section>
	{/if}

	{#if job.generated_text}
		<section class="content-section">
			<h2 class="section-title">
				Generated Text
				<span class="section-lang">{lang(job.target_language)}</span>
			</h2>
			{#if job.audio_url}
				<section class="content-section">
					<h2 class="section-title">Audio</h2>
					<audio class="audio-player" controls src={data.fullAudioUrl}>
						Your browser does not support the audio element.
					</audio>
				</section>
			{/if}
			<div class="prose prose-target">{job.generated_text}</div>
		</section>
	{/if}

	{#if job.translated_text}
		<section class="content-section">
			<h2 class="section-title">
				Translation
				<span class="section-lang">{lang(job.source_language)}</span>
			</h2>
			<div class="prose prose-translated">{job.translated_text}</div>
		</section>
	{/if}

	<!-- POS is JSON data about parts-of-speech -->
	{#if job.audio_transcript}
		<section class="content-section">
			<h2 class="section-title">Audio Transcript</h2>
			<div class="pos-text">{JSON.stringify(job.audio_transcript, null, 2)}</div>
		</section>
	{/if}

	{#if job.generated_text_pos}
		<section class="content-section">
			<h2 class="section-title">Generated Text with POS Tags</h2>
			<div class="pos-text">{JSON.stringify(job.generated_text_pos, null, 2)}</div>
		</section>
	{/if}

	{#if job.translated_text_pos}
		<section class="content-section">
			<h2 class="section-title">Translated Text with POS Tags</h2>
			<div class="pos-text">{JSON.stringify(job.translated_text_pos, null, 2)}</div>
		</section>
	{/if}
</div>

<style>
	.page {
		max-width: 52rem;
		margin: 0 auto;
		padding: var(--space-8) var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}

	/* --- Breadcrumb --- */

	.breadcrumb {
		font-family: var(--font-label);
		font-size: var(--text-label-lg);
	}

	/* --- Header --- */

	.header-top {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.job-id {
		font-family: var(--font-label);
		font-size: var(--text-label-md);
		color: var(--color-on-surface-variant);
		margin-top: var(--space-1);
		word-break: break-all;
	}

	/* --- Status badge --- */

	.status-badge {
		display: inline-block;
		padding: 0.2em 0.75em;
		border-radius: var(--radius-full);
		font-family: var(--font-label);
		font-size: var(--text-label-md);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
	}

	.status-badge[data-status='completed'] {
		background-color: var(--color-primary-container);
		color: var(--color-on-primary-container);
	}

	.status-badge[data-status='failed'] {
		background-color: color-mix(in srgb, #b3261e 12%, var(--color-surface));
		color: #b3261e;
	}

	/* --- Metadata grid --- */

	.meta-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
		gap: var(--space-3) var(--space-5);
		padding: var(--space-4);
		background-color: var(--color-surface-container-low);
		border-radius: var(--radius-lg);
	}

	.meta-item {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.meta-value {
		font-family: var(--font-display);
		font-size: var(--text-body-md);
		font-weight: var(--weight-medium);
		color: var(--color-on-surface);
	}

	/* --- Pending notice --- */

	.pending-notice {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-4);
		background-color: var(--color-secondary-container);
		border-radius: var(--radius-lg);
		font-family: var(--font-label);
		font-size: var(--text-body-sm);
		color: var(--color-on-secondary-container);
	}

	.spinner {
		width: 1.25rem;
		height: 1.25rem;
		border: 2px solid var(--color-outline-variant);
		border-top-color: var(--color-primary);
		border-radius: 50%;
		animation: spin 0.9s linear infinite;
		flex-shrink: 0;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* --- Content sections --- */

	.content-section {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding-top: var(--space-4);
		border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
	}

	.section-title {
		font-family: var(--font-display);
		font-size: var(--text-title-lg);
		font-weight: var(--weight-semibold);
		color: var(--color-on-surface);
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
	}

	.section-lang {
		font-family: var(--font-label);
		font-size: var(--text-label-md);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-on-surface-variant);
	}

	/* --- Prose --- */

	.prose {
		font-family: var(--font-body);
		font-size: var(--text-body-lg);
		line-height: var(--leading-relaxed);
		color: var(--color-on-surface);
		white-space: pre-wrap;
	}

	.prose-target {
		padding: var(--space-5) var(--space-6);
		background-color: var(--color-surface-container-low);
		border-radius: var(--radius-lg);
		font-size: calc(var(--text-body-lg) * 1.05);
	}

	.prose-translated {
		color: var(--color-on-surface-variant);
		font-size: var(--text-body-md);
		font-style: italic;
	}

	.pos-text {
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		line-height: var(--leading-relaxed);
		color: var(--color-on-surface);
		background-color: var(--color-surface-container-low);
		padding: var(--space-4);
		border-radius: var(--radius-md);
		overflow-x: auto;
		overflow-y: scroll;
		max-height: 300px;
		white-space: pre-wrap;
	}

	/* --- Audio --- */

	.audio-player {
		width: 100%;
		accent-color: var(--color-primary);
	}

	/* --- Responsive --- */

	@media (max-width: 640px) {
		.page {
			padding: var(--space-6) var(--space-4);
		}
	}
</style>
