<script lang="ts">
	import { goto } from '$app/navigation';
	import { createEstablishment } from '$lib/features/super-admin/api/super-admin';

	let name = $state('');
	let subdomain = $state('');
	let adminEmail = $state('');
	let isSubmitting = $state(false);
	let error = $state<string | null>(null);

	let isValid = $derived(
		name.trim().length > 0 && subdomain.trim().length > 0 && adminEmail.trim().length > 0
	);

	function generateSubdomain() {
		subdomain = name
			.toLowerCase()
			.normalize('NFD')
			.replace(/[\u0300-\u036f]/g, '')
			.replace(/[^a-z0-9]+/g, '-')
			.replace(/^-|-$/g, '');
	}

	async function handleSubmit(e: SubmitEvent) {
		e.preventDefault();
		if (!isValid || isSubmitting) return;

		isSubmitting = true;
		error = null;

		try {
			await createEstablishment({
				name: name.trim(),
				subdomain: subdomain.trim(),
				adminEmail: adminEmail.trim()
			});
			goto('/super-admin/establishments');
		} catch (err) {
			error = err instanceof Error ? err.message : 'Erreur lors de la création';
		} finally {
			isSubmitting = false;
		}
	}
</script>

<div class="create-page">
	<div class="page-header">
		<a href="/super-admin/establishments" class="back-link">← Retour</a>
		<h2>Nouvel établissement</h2>
	</div>

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

	<form class="create-form" onsubmit={handleSubmit}>
		<div class="form-group">
			<label for="name">Nom de l'établissement</label>
			<input
				id="name"
				type="text"
				bind:value={name}
				oninput={generateSubdomain}
				placeholder="École Primaire Saint-Exupéry"
				required
			/>
		</div>

		<div class="form-group">
			<label for="subdomain">Sous-domaine</label>
			<div class="subdomain-input">
				<input
					id="subdomain"
					type="text"
					bind:value={subdomain}
					placeholder="ecole-saint-exupery"
					pattern="[a-z0-9-]+"
					required
				/>
				<span class="subdomain-suffix">.classeo.fr</span>
			</div>
			<p class="hint">Lettres minuscules, chiffres et tirets uniquement</p>
		</div>

		<div class="form-group">
			<label for="adminEmail">Email du premier administrateur</label>
			<input
				id="adminEmail"
				type="email"
				bind:value={adminEmail}
				placeholder="directeur@ecole.fr"
				required
			/>
			<p class="hint">Un email d'invitation sera envoyé à cette adresse</p>
		</div>

		<div class="form-actions">
			<a href="/super-admin/establishments" class="btn-cancel">Annuler</a>
			<button type="submit" class="btn-submit" disabled={!isValid || isSubmitting}>
				{#if isSubmitting}
					Création en cours...
				{:else}
					Créer l'établissement
				{/if}
			</button>
		</div>
	</form>
</div>

<style>
	.create-page {
		max-width: 600px;
	}

	.page-header {
		margin-bottom: 1.5rem;
	}

	.back-link {
		color: #666;
		text-decoration: none;
		font-size: 0.875rem;
	}

	.back-link:hover {
		color: #333;
	}

	h2 {
		margin: 0.5rem 0 0;
		font-size: 1.5rem;
		color: #1a1a2e;
	}

	.error-banner {
		background: #fee2e2;
		color: #dc2626;
		padding: 0.75rem 1rem;
		border-radius: 8px;
		margin-bottom: 1rem;
	}

	.create-form {
		background: white;
		border-radius: 12px;
		padding: 1.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.form-group {
		margin-bottom: 1.25rem;
	}

	label {
		display: block;
		font-size: 0.875rem;
		font-weight: 600;
		color: #333;
		margin-bottom: 0.375rem;
	}

	input {
		width: 100%;
		padding: 0.625rem 0.75rem;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 0.875rem;
		box-sizing: border-box;
	}

	input:focus {
		outline: none;
		border-color: #1a1a2e;
		box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
	}

	.subdomain-input {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.subdomain-input input {
		border-radius: 8px 0 0 8px;
		border-right: none;
	}

	.subdomain-suffix {
		padding: 0.625rem 0.75rem;
		background: #f5f5f5;
		border: 1px solid #ddd;
		border-radius: 0 8px 8px 0;
		font-size: 0.875rem;
		color: #666;
		white-space: nowrap;
	}

	.hint {
		font-size: 0.75rem;
		color: #888;
		margin: 0.25rem 0 0;
	}

	.form-actions {
		display: flex;
		gap: 0.75rem;
		justify-content: flex-end;
		margin-top: 1.5rem;
		padding-top: 1.25rem;
		border-top: 1px solid #eee;
	}

	.btn-cancel {
		padding: 0.625rem 1.25rem;
		border: 1px solid #ddd;
		border-radius: 8px;
		text-decoration: none;
		color: #333;
		font-size: 0.875rem;
	}

	.btn-cancel:hover {
		background: #f5f5f5;
	}

	.btn-submit {
		padding: 0.625rem 1.5rem;
		background: #1a1a2e;
		color: white;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-size: 0.875rem;
		font-weight: 500;
	}

	.btn-submit:hover:not(:disabled) {
		background: #16213e;
	}

	.btn-submit:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
</style>
