<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { getApiBaseUrl } from '$lib/api/config';

	const token = $derived($page.params.token);

	// Form state
	let password = $state('');
	let confirmPassword = $state('');
	let isSubmitting = $state(false);
	let isSuccess = $state(false);
	let error = $state<{ type: string; message: string } | null>(null);

	// Password visibility
	let showPassword = $state(false);
	let showConfirmPassword = $state(false);

	// Password validation
	const passwordRequirements = $derived({
		length: password.length >= 8,
		uppercase: /[A-Z]/.test(password),
		lowercase: /[a-z]/.test(password),
		number: /[0-9]/.test(password),
		special: /[^A-Za-z0-9]/.test(password)
	});

	const isPasswordValid = $derived(
		passwordRequirements.length &&
			passwordRequirements.uppercase &&
			passwordRequirements.lowercase &&
			passwordRequirements.number &&
			passwordRequirements.special
	);

	const passwordsMatch = $derived(password === confirmPassword && password.length > 0);
	const canSubmit = $derived(isPasswordValid && passwordsMatch && !isSubmitting);

	async function handleSubmit(event: SubmitEvent) {
		event.preventDefault();

		if (!canSubmit) return;

		error = null;
		isSubmitting = true;

		try {
			const response = await fetch(`${getApiBaseUrl()}/password/reset`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					token,
					password
				})
			});

			if (response.ok) {
				isSuccess = true;
				// Redirect to login after 3 seconds
				globalThis.setTimeout(() => {
					goto('/login?password_reset=true');
				}, 3000);
			} else if (response.status === 400) {
				error = {
					type: 'invalid_token',
					message: 'Ce lien de réinitialisation est invalide.'
				};
			} else if (response.status === 410) {
				const data = await response.json();
				error = {
					type: 'expired_token',
					message: data.detail || 'Ce lien a expiré ou a déjà été utilisé.'
				};
			} else if (response.status === 422) {
				const data = await response.json();
				error = {
					type: 'validation_error',
					message: data.detail || 'Le mot de passe ne respecte pas les critères de sécurité.'
				};
			} else {
				error = {
					type: 'server_error',
					message: 'Une erreur est survenue. Veuillez réessayer.'
				};
			}
		} catch {
			error = {
				type: 'network_error',
				message: 'Impossible de contacter le serveur. Vérifiez votre connexion.'
			};
		} finally {
			isSubmitting = false;
		}
	}
</script>

<svelte:head>
	<title>Nouveau mot de passe | Classeo</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
	<link
		href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
		rel="stylesheet"
	/>
</svelte:head>

<div class="page">
	<div class="container">
		<!-- Logo -->
		<div class="logo">
			<span class="logo-icon">📚</span>
			<span class="logo-text">Classeo</span>
		</div>

		<div class="card">
			{#if isSuccess}
				<!-- Success State -->
				<div class="success-state">
					<div class="success-icon">
						<span>✓</span>
					</div>
					<h1>Mot de passe modifié</h1>
					<p>
						Votre mot de passe a été réinitialisé avec succès.<br />
						Vous allez être redirigé vers la page de connexion...
					</p>
					<div class="actions">
						<a href="/login" class="link-button">Se connecter maintenant</a>
					</div>
				</div>
			{:else if error?.type === 'invalid_token' || error?.type === 'expired_token'}
				<!-- Token Error State -->
				<div class="error-state">
					<div class="error-state-icon">
						<span>⚠</span>
					</div>
					<h1>Lien invalide</h1>
					<p>{error.message}</p>
					<p class="hint">
						Vous pouvez faire une nouvelle demande de réinitialisation.
					</p>
					<div class="actions">
						<a href="/mot-de-passe-oublie" class="link-button">Nouvelle demande</a>
					</div>
				</div>
			{:else}
				<!-- Form State -->
				<h1>Nouveau mot de passe</h1>
				<p class="description">Choisissez un nouveau mot de passe sécurisé pour votre compte.</p>

				{#if error}
					<div class="error-banner">
						<span class="error-icon-inline">⚠</span>
						<span class="error-message">{error.message}</span>
					</div>
				{/if}

				<form onsubmit={handleSubmit}>
					<div class="form-group">
						<label for="password">Nouveau mot de passe</label>
						<div class="input-wrapper">
							<input
								id="password"
								type={showPassword ? 'text' : 'password'}
								required
								placeholder="Votre nouveau mot de passe"
								bind:value={password}
								disabled={isSubmitting}
								autocomplete="new-password"
							/>
							<button
								type="button"
								class="toggle-visibility"
								onclick={() => (showPassword = !showPassword)}
								aria-label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
							>
								{showPassword ? '👁️' : '👁️‍🗨️'}
							</button>
						</div>

						<!-- Password requirements -->
						<ul class="requirements">
							<li class:valid={passwordRequirements.length}>Au moins 8 caractères</li>
							<li class:valid={passwordRequirements.uppercase}>Une majuscule</li>
							<li class:valid={passwordRequirements.lowercase}>Une minuscule</li>
							<li class:valid={passwordRequirements.number}>Un chiffre</li>
							<li class:valid={passwordRequirements.special}>Un caractère spécial</li>
						</ul>
					</div>

					<div class="form-group">
						<label for="confirmPassword">Confirmer le mot de passe</label>
						<div class="input-wrapper">
							<input
								id="confirmPassword"
								type={showConfirmPassword ? 'text' : 'password'}
								required
								placeholder="Confirmer votre mot de passe"
								bind:value={confirmPassword}
								disabled={isSubmitting}
								autocomplete="new-password"
							/>
							<button
								type="button"
								class="toggle-visibility"
								onclick={() => (showConfirmPassword = !showConfirmPassword)}
								aria-label={showConfirmPassword ? 'Masquer' : 'Afficher'}
							>
								{showConfirmPassword ? '👁️' : '👁️‍🗨️'}
							</button>
						</div>
						{#if confirmPassword && !passwordsMatch}
							<p class="field-error">Les mots de passe ne correspondent pas</p>
						{/if}
						{#if passwordsMatch && confirmPassword}
							<p class="field-success">Les mots de passe correspondent</p>
						{/if}
					</div>

					<button type="submit" class="submit-button" disabled={!canSubmit}>
						{#if isSubmitting}
							<span class="spinner"></span>
							Modification en cours...
						{:else}
							Réinitialiser le mot de passe
						{/if}
					</button>
				</form>
			{/if}
		</div>

		<p class="footer">Un problème ? Contactez votre établissement.</p>
	</div>
</div>

<style>
	/* Design Tokens - Calm Productivity */
	:root {
		--color-calm: hsl(142, 76%, 36%);
		--color-attention: hsl(38, 92%, 50%);
		--color-alert: hsl(0, 72%, 51%);
		--surface-primary: hsl(210, 20%, 98%);
		--surface-elevated: hsl(0, 0%, 100%);
		--text-primary: hsl(222, 47%, 11%);
		--text-secondary: hsl(215, 16%, 47%);
		--text-muted: hsl(215, 13%, 65%);
		--accent-primary: hsl(199, 89%, 48%);
		--border-subtle: hsl(214, 32%, 91%);
		--radius-sm: 8px;
		--radius-md: 12px;
		--radius-lg: 16px;
		--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
		--shadow-elevated: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	}

	.page {
		min-height: 100vh;
		background: var(--surface-primary);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	}

	.container {
		width: 100%;
		max-width: 420px;
	}

	/* Logo */
	.logo {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-bottom: 32px;
	}

	.logo-icon {
		font-size: 32px;
	}

	.logo-text {
		font-size: 28px;
		font-weight: 700;
		color: var(--text-primary);
	}

	/* Card */
	.card {
		background: var(--surface-elevated);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-elevated);
		padding: 32px;
	}

	.card h1 {
		font-size: 22px;
		font-weight: 600;
		color: var(--text-primary);
		margin-bottom: 12px;
		text-align: center;
	}

	.description {
		font-size: 14px;
		color: var(--text-secondary);
		text-align: center;
		margin-bottom: 24px;
		line-height: 1.5;
	}

	/* Success State */
	.success-state {
		text-align: center;
	}

	.success-state .success-icon {
		width: 64px;
		height: 64px;
		background: linear-gradient(135deg, hsl(142, 76%, 95%) 0%, hsl(142, 76%, 90%) 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 24px;
		font-size: 28px;
		color: var(--color-calm);
	}

	.success-state h1 {
		margin-bottom: 16px;
	}

	.success-state p {
		font-size: 14px;
		color: var(--text-secondary);
		line-height: 1.6;
		margin-bottom: 24px;
	}

	/* Error State */
	.error-state {
		text-align: center;
	}

	.error-state-icon {
		width: 64px;
		height: 64px;
		background: linear-gradient(135deg, hsl(38, 92%, 95%) 0%, hsl(38, 92%, 90%) 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 24px;
		font-size: 28px;
	}

	.error-state h1 {
		margin-bottom: 16px;
	}

	.error-state p {
		font-size: 14px;
		color: var(--text-secondary);
		line-height: 1.6;
		margin-bottom: 8px;
	}

	.error-state .hint {
		color: var(--text-muted);
		margin-bottom: 24px;
	}

	.actions {
		margin-top: 24px;
	}

	.link-button {
		display: inline-block;
		padding: 12px 24px;
		background: var(--accent-primary);
		color: white;
		text-decoration: none;
		border-radius: var(--radius-sm);
		font-weight: 500;
		font-size: 15px;
		transition: background 0.2s;
	}

	.link-button:hover {
		background: hsl(199, 89%, 42%);
	}

	/* Error Banner */
	.error-banner {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		background: linear-gradient(135deg, hsl(0, 76%, 95%) 0%, hsl(0, 76%, 97%) 100%);
		border: 1px solid hsl(0, 76%, 85%);
		border-radius: var(--radius-md);
		margin-bottom: 24px;
		font-size: 14px;
		color: var(--color-alert);
	}

	.error-icon-inline {
		flex-shrink: 0;
		font-size: 18px;
	}

	.error-message {
		font-weight: 500;
	}

	/* Form */
	form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.form-group label {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-primary);
	}

	.input-wrapper {
		position: relative;
	}

	.input-wrapper input {
		width: 100%;
		padding: 12px 48px 12px 16px;
		font-size: 15px;
		border: 1px solid var(--border-subtle);
		border-radius: var(--radius-sm);
		background: var(--surface-elevated);
		color: var(--text-primary);
		transition:
			border-color 0.2s,
			box-shadow 0.2s;
	}

	.input-wrapper input:focus {
		outline: none;
		border-color: var(--accent-primary);
		box-shadow: 0 0 0 3px hsla(199, 89%, 48%, 0.15);
	}

	.input-wrapper input::placeholder {
		color: var(--text-muted);
	}

	.input-wrapper input:disabled {
		background: var(--surface-primary);
		color: var(--text-muted);
		cursor: not-allowed;
	}

	.toggle-visibility {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px;
		font-size: 16px;
		opacity: 0.6;
		transition: opacity 0.2s;
	}

	.toggle-visibility:hover {
		opacity: 1;
	}

	/* Password requirements */
	.requirements {
		list-style: none;
		padding: 0;
		margin: 8px 0 0 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.requirements li {
		font-size: 12px;
		color: var(--text-muted);
		padding-left: 18px;
		position: relative;
	}

	.requirements li::before {
		content: '○';
		position: absolute;
		left: 0;
		color: var(--text-muted);
	}

	.requirements li.valid {
		color: var(--color-calm);
	}

	.requirements li.valid::before {
		content: '✓';
		color: var(--color-calm);
	}

	/* Field messages */
	.field-error {
		font-size: 12px;
		color: var(--color-alert);
		margin: 4px 0 0 0;
	}

	.field-success {
		font-size: 12px;
		color: var(--color-calm);
		margin: 4px 0 0 0;
	}

	/* Submit Button */
	.submit-button {
		width: 100%;
		padding: 14px 24px;
		font-size: 15px;
		font-weight: 600;
		color: white;
		background: var(--accent-primary);
		border: none;
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition:
			background 0.2s,
			transform 0.1s,
			box-shadow 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 8px;
	}

	.submit-button:hover:not(:disabled) {
		background: hsl(199, 89%, 42%);
		box-shadow: var(--shadow-card);
	}

	.submit-button:active:not(:disabled) {
		transform: scale(0.98);
	}

	.submit-button:disabled {
		background: var(--text-muted);
		cursor: not-allowed;
	}

	/* Spinner */
	.spinner {
		width: 18px;
		height: 18px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top-color: white;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

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

	/* Footer */
	.footer {
		text-align: center;
		font-size: 14px;
		color: var(--text-muted);
		margin-top: 24px;
	}
</style>
