<script lang="ts">
	import type {
		HomeworkSubmission,
		HomeworkAttachment,
		StudentHomeworkDetail
	} from '$lib/features/homework/api/studentHomework';
	import {
		fetchSubmission,
		saveDraftSubmission,
		submitHomework,
		uploadSubmissionAttachment
	} from '$lib/features/homework/api/studentHomework';
	import RichTextEditor from '$lib/components/molecules/RichTextEditor/RichTextEditor.svelte';
	import FileUpload from '$lib/components/molecules/FileUpload/FileUpload.svelte';

	let {
		detail,
		onBack,
		onSubmitted
	}: {
		detail: StudentHomeworkDetail;
		onBack: () => void;
		onSubmitted?: () => void;
	} = $props();

	let submission = $state<HomeworkSubmission | null>(null);
	let responseHtml = $state<string>('');
	let loading = $state(true);
	let saving = $state(false);
	let submitting = $state(false);
	let error = $state<string | null>(null);
	let successMessage = $state<string | null>(null);
	let showConfirmDialog = $state(false);
	let attachments = $state<HomeworkAttachment[]>([]);

	let isSubmitted = $derived(
		submission?.status === 'submitted' || submission?.status === 'late'
	);

	let statusLabel = $derived(() => {
		if (!submission) return null;
		switch (submission.status) {
			case 'draft':
				return { text: 'Brouillon', className: 'status-draft' };
			case 'submitted':
				return { text: 'Soumis', className: 'status-submitted' };
			case 'late':
				return { text: 'En retard', className: 'status-late' };
		}
	});

	async function loadSubmission() {
		loading = true;
		error = null;

		try {
			submission = await fetchSubmission(detail.id);
			if (submission) {
				responseHtml = submission.responseHtml ?? '';
				attachments = submission.attachments ?? [];
			}
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur de chargement';
		} finally {
			loading = false;
		}
	}

	async function handleSaveDraft() {
		saving = true;
		error = null;
		successMessage = null;

		try {
			submission = await saveDraftSubmission(detail.id, responseHtml || null);
			successMessage = 'Brouillon sauvegardé';
			window.setTimeout(() => {
				successMessage = null;
			}, 3000);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur lors de la sauvegarde';
		} finally {
			saving = false;
		}
	}

	function handleSubmitClick() {
		showConfirmDialog = true;
	}

	async function handleConfirmSubmit() {
		showConfirmDialog = false;
		submitting = true;
		error = null;

		try {
			// Save draft first if needed
			if (!submission) {
				submission = await saveDraftSubmission(detail.id, responseHtml || null);
			} else if (responseHtml !== (submission.responseHtml ?? '')) {
				submission = await saveDraftSubmission(detail.id, responseHtml || null);
			}

			submission = await submitHomework(detail.id);
			successMessage = 'Devoir rendu avec succès !';
			onSubmitted?.();
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur lors de la soumission';
		} finally {
			submitting = false;
		}
	}

	async function handleUploadAttachment(file: File): Promise<HomeworkAttachment> {
		// Ensure a draft exists first
		if (!submission) {
			submission = await saveDraftSubmission(detail.id, responseHtml || null);
		}

		return uploadSubmissionAttachment(detail.id, file);
	}

	async function handleDeleteAttachment(_fileId: string): Promise<void> {
		// Suppression non supportée — le bouton est masqué via showDelete={false}
	}

	function formatDueDate(dateStr: string): string {
		const date = new Date(dateStr + 'T00:00:00');
		return date.toLocaleDateString('fr-FR', {
			weekday: 'long',
			day: 'numeric',
			month: 'long',
			year: 'numeric'
		});
	}

	$effect(() => {
		void loadSubmission();
	});
</script>

<div class="submission-form">
	<button class="back-button" onclick={onBack}>
		<svg
			width="20"
			height="20"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
		>
			<path d="M19 12H5M12 19l-7-7 7-7" />
		</svg>
		Retour au devoir
	</button>

	<header class="form-header" style:border-left-color={detail.subjectColor ?? '#3b82f6'}>
		<span class="subject-name" style:color={detail.subjectColor ?? '#3b82f6'}>
			{detail.subjectName}
		</span>
		<h2 class="form-title">{detail.title}</h2>
		<div class="form-meta">
			<span class="due-date">Pour le {formatDueDate(detail.dueDate)}</span>
			{#if statusLabel()}
				<span class="status-badge {statusLabel()?.className}">{statusLabel()?.text}</span>
			{/if}
		</div>
	</header>

	{#if error}
		<div class="error-banner" role="alert">{error}</div>
	{/if}

	{#if successMessage}
		<div class="success-banner" role="status">{successMessage}</div>
	{/if}

	{#if loading}
		<div class="loading-state">Chargement...</div>
	{:else if isSubmitted}
		<section class="submitted-view">
			<div class="submitted-icon">✓</div>
			<p class="submitted-message">
				{#if submission?.status === 'late'}
					Votre devoir a été rendu en retard le {submission?.submittedAt
						? new Date(submission.submittedAt).toLocaleDateString('fr-FR', {
								day: 'numeric',
								month: 'long',
								year: 'numeric',
								hour: '2-digit',
								minute: '2-digit'
							})
						: ''}.
				{:else}
					Votre devoir a été rendu le {submission?.submittedAt
						? new Date(submission.submittedAt).toLocaleDateString('fr-FR', {
								day: 'numeric',
								month: 'long',
								year: 'numeric',
								hour: '2-digit',
								minute: '2-digit'
							})
						: ''}.
				{/if}
			</p>
			{#if submission?.responseHtml}
				<section class="response-view">
					<h3>Votre réponse</h3>
					<div class="response-content">{@html submission.responseHtml}</div>
				</section>
			{/if}
			{#if attachments.length > 0}
				<section class="attachments-view">
					<h3>Pièces jointes</h3>
					<ul class="attachments-list">
						{#each attachments as attachment}
							<li class="attachment-item">
								<span class="attachment-name">{attachment.filename}</span>
							</li>
						{/each}
					</ul>
				</section>
			{/if}
		</section>
	{:else}
		<section class="editor-section">
			<h3>Votre réponse</h3>
			<RichTextEditor
				content={responseHtml}
				onUpdate={(html) => {
					responseHtml = html;
				}}
				placeholder="Rédigez votre réponse ici..."
			/>
		</section>

		<section class="attachments-section">
			<h3>Pièces jointes</h3>
			<FileUpload
				existingFiles={attachments}
				onUpload={handleUploadAttachment}
				onDelete={handleDeleteAttachment}
				disabled={saving || submitting}
				acceptedTypes={['application/pdf', 'image/jpeg', 'image/png', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']}
				acceptAttr=".pdf,.jpg,.jpeg,.png,.docx"
				hint="PDF, JPEG, PNG ou DOCX — 10 Mo max par fichier"
				showDelete={false}
			/>
		</section>

		<div class="form-actions">
			<button
				class="btn-draft"
				onclick={handleSaveDraft}
				disabled={saving || submitting}
			>
				{saving ? 'Sauvegarde...' : 'Sauvegarder le brouillon'}
			</button>
			<button
				class="btn-submit"
				onclick={handleSubmitClick}
				disabled={saving || submitting}
			>
				{submitting ? 'Soumission...' : 'Soumettre mon devoir'}
			</button>
		</div>
	{/if}
</div>

{#if showConfirmDialog}
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="dialog-overlay" role="presentation" onclick={() => (showConfirmDialog = false)}>
		<!-- svelte-ignore a11y_click_events_have_key_events -->
		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
		<div class="dialog" role="alertdialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
			<h3>Confirmer la soumission</h3>
			<p>
				Êtes-vous sûr de vouloir soumettre votre devoir ? Vous ne pourrez plus le modifier
				après soumission.
			</p>
			<div class="dialog-actions">
				<button class="btn-cancel" onclick={() => (showConfirmDialog = false)}>Annuler</button>
				<button class="btn-confirm" onclick={handleConfirmSubmit}>Confirmer</button>
			</div>
		</div>
	</div>
{/if}

<style>
	.submission-form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.back-button {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		background: none;
		border: none;
		color: #3b82f6;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		padding: 0.25rem 0;
		align-self: flex-start;
	}

	.back-button:hover {
		color: #2563eb;
	}

	.form-header {
		border-left: 4px solid #3b82f6;
		padding-left: 1rem;
	}

	.subject-name {
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.form-title {
		margin: 0.25rem 0 0.5rem;
		font-size: 1.25rem;
		font-weight: 600;
		color: #1f2937;
	}

	.form-meta {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.status-badge {
		display: inline-block;
		padding: 0.125rem 0.5rem;
		border-radius: 1rem;
		font-size: 0.75rem;
		font-weight: 600;
	}

	.status-draft {
		background: #e0e7ff;
		color: #3730a3;
	}

	.status-submitted {
		background: #dcfce7;
		color: #166534;
	}

	.status-late {
		background: #fee2e2;
		color: #991b1b;
	}

	.error-banner {
		padding: 0.5rem 0.75rem;
		background: #fee2e2;
		border-radius: 0.375rem;
		color: #991b1b;
		font-size: 0.8125rem;
	}

	.success-banner {
		padding: 0.5rem 0.75rem;
		background: #dcfce7;
		border-radius: 0.375rem;
		color: #166534;
		font-size: 0.8125rem;
	}

	.loading-state {
		text-align: center;
		padding: 2rem;
		color: #6b7280;
	}

	.editor-section h3,
	.attachments-section h3 {
		margin: 0 0 0.5rem;
		font-size: 0.9375rem;
		font-weight: 600;
		color: #374151;
	}

	.form-actions {
		display: flex;
		gap: 0.75rem;
		justify-content: flex-end;
	}

	.btn-draft {
		padding: 0.5rem 1rem;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		background: white;
		color: #374151;
		font-size: 0.875rem;
		cursor: pointer;
	}

	.btn-draft:hover:not(:disabled) {
		background: #f3f4f6;
	}

	.btn-submit {
		padding: 0.5rem 1rem;
		border: none;
		border-radius: 0.375rem;
		background: #3b82f6;
		color: white;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
	}

	.btn-submit:hover:not(:disabled) {
		background: #2563eb;
	}

	.btn-draft:disabled,
	.btn-submit:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* Submitted view */
	.submitted-view {
		text-align: center;
		padding: 1.5rem;
	}

	.submitted-icon {
		width: 3rem;
		height: 3rem;
		margin: 0 auto 0.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #dcfce7;
		color: #166534;
		font-size: 1.5rem;
		font-weight: 700;
	}

	.submitted-message {
		color: #374151;
		font-size: 0.9375rem;
	}

	.response-view,
	.attachments-view {
		text-align: left;
		margin-top: 1rem;
	}

	.response-view h3,
	.attachments-view h3 {
		margin: 0 0 0.5rem;
		font-size: 0.9375rem;
		font-weight: 600;
		color: #374151;
	}

	.response-content {
		padding: 0.75rem;
		background: #f9fafb;
		border: 1px solid #e5e7eb;
		border-radius: 0.375rem;
		color: #4b5563;
		line-height: 1.6;
	}

	.attachments-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.attachment-item {
		padding: 0.5rem 0.75rem;
		background: #f9fafb;
		border: 1px solid #e5e7eb;
		border-radius: 0.375rem;
		font-size: 0.875rem;
	}

	.attachment-name {
		color: #374151;
		font-weight: 500;
	}

	/* Confirmation Dialog */
	.dialog-overlay {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.dialog {
		background: white;
		border-radius: 0.5rem;
		padding: 1.5rem;
		max-width: 24rem;
		width: 90%;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	}

	.dialog h3 {
		margin: 0 0 0.75rem;
		font-size: 1.125rem;
		font-weight: 600;
		color: #1f2937;
	}

	.dialog p {
		margin: 0 0 1.25rem;
		color: #4b5563;
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.dialog-actions {
		display: flex;
		gap: 0.75rem;
		justify-content: flex-end;
	}

	.btn-cancel {
		padding: 0.5rem 1rem;
		border: 1px solid #d1d5db;
		border-radius: 0.375rem;
		background: white;
		color: #374151;
		font-size: 0.875rem;
		cursor: pointer;
	}

	.btn-confirm {
		padding: 0.5rem 1rem;
		border: none;
		border-radius: 0.375rem;
		background: #3b82f6;
		color: white;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
	}

	.btn-confirm:hover {
		background: #2563eb;
	}
</style>
