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

	let { data }: { data: PageData } = $props();
	
	let userProfile = {
		name: 'Baptiste',
		email: 'baptiste@ping.com',
		company: 'Ping Analytics',
		phone: '+33 6 12 34 56 78'
	};

	let notifications = {
		emailAlerts: true,
		portfolioUpdates: true,
		esgAlerts: true,
		marketNews: false,
		weeklyReports: true
	};

	let security = {
		twoFactorAuth: false,
		sessionTimeout: '30',
		dataEncryption: true
	};

	let display = {
		theme: 'dark',
		language: 'fr',
		currency: 'EUR',
		dateFormat: 'DD/MM/YYYY'
	};

	let currentPassword = '';
	let newPassword = '';
	let confirmPassword = '';

	function saveProfile() {
		console.log('Saving profile:', userProfile);
	}

	function saveNotifications() {
		console.log('Saving notifications:', notifications);
	}

	function saveSecurity() {
		console.log('Saving security settings:', security);
	}

	function saveDisplay() {
		console.log('Saving display settings:', display);
	}

	function changePassword() {
		if (newPassword !== confirmPassword) {
			alert('Les mots de passe ne correspondent pas');
			return;
		}
		console.log('Changing password');
		currentPassword = '';
		newPassword = '';
		confirmPassword = '';
	}

	function exportData() {
		console.log('Exporting user data');
	}

	function deleteAccount() {
		if (confirm('Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est irréversible.')) {
			console.log('Deleting account');
		}
	}
</script>

<section id="settings">
	<div class="settings-container">
		<div class="settings-header">
			<h1>Paramètres</h1>
		</div>

		<div class="settings-layout">
			<div class="settings-section card">
				<h2>👤 Profil utilisateur</h2>
				<form on:submit|preventDefault={saveProfile}>
					<div class="form-row">
						<div class="form-group">
							<label for="name">Nom complet</label>
							<input type="text" id="name" bind:value={userProfile.name} />
						</div>
						<div class="form-group">
							<label for="email">Email</label>
							<input type="email" id="email" bind:value={userProfile.email} />
						</div>
					</div>
					<div class="form-row">
						<div class="form-group">
							<label for="company">Entreprise</label>
							<input type="text" id="company" bind:value={userProfile.company} />
						</div>
						<div class="form-group">
							<label for="phone">Téléphone</label>
							<input type="tel" id="phone" bind:value={userProfile.phone} />
						</div>
					</div>
					<button type="submit" class="btn">💾 Sauvegarder le profil</button>
				</form>
			</div>

			<div class="settings-section card">
				<h2>🔔 Notifications</h2>
				<form on:submit|preventDefault={saveNotifications}>
					<div class="checkbox-group">
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={notifications.emailAlerts} />
							<span>Alertes par email</span>
						</label>
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={notifications.portfolioUpdates} />
							<span>Mises à jour du portefeuille</span>
						</label>
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={notifications.esgAlerts} />
							<span>Alertes ESG</span>
						</label>
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={notifications.marketNews} />
							<span>Actualités du marché</span>
						</label>
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={notifications.weeklyReports} />
							<span>Rapports hebdomadaires</span>
						</label>
					</div>
					<button type="submit" class="btn">💾 Sauvegarder les notifications</button>
				</form>
			</div>

			<div class="settings-section card">
				<h2>🔒 Sécurité</h2>
				<form on:submit|preventDefault={saveSecurity}>
					<div class="form-group">
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={security.twoFactorAuth} />
							<span>Authentification à deux facteurs</span>
						</label>
					</div>
					<div class="form-group">
						<label for="sessionTimeout">Délai d'expiration de session (minutes)</label>
						<select id="sessionTimeout" bind:value={security.sessionTimeout}>
							<option value="15">15 minutes</option>
							<option value="30">30 minutes</option>
							<option value="60">1 heure</option>
							<option value="120">2 heures</option>
						</select>
					</div>
					<div class="form-group">
						<label class="checkbox-label">
							<input type="checkbox" bind:checked={security.dataEncryption} disabled />
							<span>Chiffrement des données (toujours activé)</span>
						</label>
					</div>
					<button type="submit" class="btn">💾 Sauvegarder la sécurité</button>
				</form>

				<div class="password-section">
					<h3>Changer le mot de passe</h3>
					<form on:submit|preventDefault={changePassword}>
						<div class="form-group">
							<label for="currentPassword">Mot de passe actuel</label>
							<input type="password" id="currentPassword" bind:value={currentPassword} />
						</div>
						<div class="form-group">
							<label for="newPassword">Nouveau mot de passe</label>
							<input type="password" id="newPassword" bind:value={newPassword} />
						</div>
						<div class="form-group">
							<label for="confirmPassword">Confirmer le nouveau mot de passe</label>
							<input type="password" id="confirmPassword" bind:value={confirmPassword} />
						</div>
						<button type="submit" class="btn">🔑 Changer le mot de passe</button>
					</form>
				</div>
			</div>

			<div class="settings-section card">
				<h2>🎨 Affichage</h2>
				<form on:submit|preventDefault={saveDisplay}>
					<div class="form-row">
						<div class="form-group">
							<label for="theme">Thème</label>
							<select id="theme" bind:value={display.theme}>
								<option value="dark">Sombre</option>
								<option value="light">Clair</option>
								<option value="auto">Automatique</option>
							</select>
						</div>
						<div class="form-group">
							<label for="language">Langue</label>
							<select id="language" bind:value={display.language}>
								<option value="fr">Français</option>
								<option value="en">English</option>
								<option value="es">Español</option>
							</select>
						</div>
					</div>
					<div class="form-row">
						<div class="form-group">
							<label for="currency">Devise</label>
							<select id="currency" bind:value={display.currency}>
								<option value="EUR">EUR (€)</option>
								<option value="USD">USD ($)</option>
								<option value="GBP">GBP (£)</option>
							</select>
						</div>
						<div class="form-group">
							<label for="dateFormat">Format de date</label>
							<select id="dateFormat" bind:value={display.dateFormat}>
								<option value="DD/MM/YYYY">DD/MM/YYYY</option>
								<option value="MM/DD/YYYY">MM/DD/YYYY</option>
								<option value="YYYY-MM-DD">YYYY-MM-DD</option>
							</select>
						</div>
					</div>
					<button type="submit" class="btn">💾 Sauvegarder l'affichage</button>
				</form>
			</div>

			<div class="settings-section card">
				<h2>📊 Gestion des données</h2>
				<div class="data-actions">
					<div class="action-item">
						<div class="action-info">
							<h3>Exporter mes données</h3>
							<p>Téléchargez toutes vos données personnelles dans un fichier JSON</p>
						</div>
						<button class="btn" on:click={exportData}>📥 Exporter</button>
					</div>
					<div class="action-item danger">
						<div class="action-info">
							<h3>Supprimer mon compte</h3>
							<p>Supprimez définitivement votre compte et toutes vos données</p>
						</div>
						<button class="btn danger" on:click={deleteAccount}>🗑️ Supprimer</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<style>
	#settings {
		padding: 16px;
		background-color: var(--bg-secondary);
		color: white;
		min-height: calc(100vh - 72px);
	}

	.settings-container {
		max-width: 1200px;
	}

	.settings-header {
		margin-bottom: 16px;
	}

	h1 {
		color: var(--text-lime);
		font-size: 32px;
		margin: 0;
		font-weight: 600;
	}

	h2 {
		color: var(--text-lime);
		font-size: 24px;
		margin: 0 0 20px 0;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	h3 {
		color: white;
		font-size: 18px;
		margin: 20px 0 12px 0;
		font-weight: 500;
	}

	.settings-layout {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.settings-section {
		background-color: var(--bg-primary);
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		padding: 16px;
		margin: 16px;
		color: white;
		width: calc(100% - 32px);
	}

	.form-row {
		display: flex;
		gap: 20px;
		margin-bottom: 16px;
	}

	.form-group {
		flex: 1;
		margin-bottom: 16px;
	}

	label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		color: white;
		font-weight: 500;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	select {
		width: 100%;
		background-color: var(--bg-secondary);
		border: none;
		border-bottom: 2px solid var(--text-lime);
		padding: 8px;
		border-radius: 8px 8px 0 0;
		color: white;
		font-size: 14px;
		box-sizing: border-box;
	}

	input:focus,
	select:focus {
		outline: none;
		border-bottom-color: var(--text-lime);
	}

	input::placeholder {
		color: #888888;
	}

	.checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 20px;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 12px;
		cursor: pointer;
		font-size: 14px;
	}

	input[type="checkbox"] {
		width: 18px;
		height: 18px;
		accent-color: var(--text-lime);
	}

	input[type="checkbox"]:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.btn {
		background-color: var(--btn-primary);
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		text-decoration: none;
		transition-duration: 0.2s;
		font-weight: 600;
		font-size: 14px;
	}

	.btn:hover {
		background-color: var(--btn-primary-hover);
		transform: scale(1.025);
	}

	.btn.danger {
		background-color: #dc2626;
	}

	.btn.danger:hover {
		background-color: #b91c1c;
	}

	.password-section {
		border-top: 1px solid var(--btn-primary);
		padding-top: 20px;
		margin-top: 20px;
	}

	.data-actions {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.action-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		background-color: var(--bg-secondary);
		border-radius: 8px;
	}

	.action-item.danger {
		border-left: 4px solid #dc2626;
	}

	.action-info h3 {
		margin: 0 0 4px 0;
		font-size: 16px;
	}

	.action-info p {
		margin: 0;
		font-size: 14px;
		color: #888888;
	}

	@media (max-width: 768px) {
		.form-row {
			flex-direction: column;
		}
		
		.action-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}
	}
</style>
