<script lang="ts">
	import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";

	let productName = $state("");
	let description = $state("");
	let image = $state<string | null>(null);
	let reportType = $state<"product" | "company">("product");
	let pdfData = $state<string | null>(null);
	let pdfName = $state<string | null>(null);
	let submitted = $state(false);
	let isLoading = $state(false);
	let analysisResult = $state<any>(null);
	let error = $state<string | null>(null);
	let uploadSuccess = $state(false);

	$effect(() => {
		const initialName = new URLSearchParams(window.location.search).get(
			"productName",
		);
		if (initialName) {
			productName = initialName;
		}
	});

	let isValid = $derived(
		reportType === "product"
			? productName.trim().length > 0 && description.trim().length > 0
			: productName.trim().length > 0 && pdfData !== null,
	);

	async function pickImage() {
		const input = document.createElement("input");
		input.type = "file";
		input.accept = "image/*";
		input.onchange = (e: Event) => {
			const target = e.target as HTMLInputElement;
			const file = target.files?.[0];
			if (file) {
				const reader = new FileReader();
				reader.onload = (event) => {
					image = event.target?.result as string;
				};
				reader.readAsDataURL(file);
			}
		};
		input.click();
	}

	async function pickPdf() {
		const input = document.createElement("input");
		input.type = "file";
		input.accept = "application/pdf";
		input.onchange = (e: Event) => {
			const target = e.target as HTMLInputElement;
			const file = target.files?.[0];
			if (file) {
				pdfName = file.name;
				const reader = new FileReader();
				reader.onload = (event) => {
					pdfData = event.target?.result as string;
				};
				reader.readAsDataURL(file);
			}
		};
		input.click();
	}

	// Progress steps for product incident
	const productProgressSteps = [
		{ id: 1, label: "Scanning image...", icon: "ri:camera-lens-line" },
		{
			id: 2,
			label: "Detecting brand logos...",
			icon: "ri:search-eye-line",
		},
		{ id: 3, label: "Searching database...", icon: "ri:database-2-line" },
		{ id: 4, label: "AI analysis in progress...", icon: "ri:robot-2-line" },
		{
			id: 5,
			label: "Generating verdict...",
			icon: "ri:file-shield-2-line",
		},
	];

	// Progress steps for company report upload
	const companyProgressSteps = [
		{ id: 1, label: "Decoding PDF...", icon: "ri:file-pdf-2-line" },
		{
			id: 2,
			label: "Extracting text content...",
			icon: "ri:file-text-line",
		},
		{
			id: 3,
			label: "Validating report authenticity...",
			icon: "ri:shield-check-line",
		},
		{
			id: 4,
			label: "Analyzing environmental claims...",
			icon: "ri:robot-2-line",
		},
		{ id: 5, label: "Saving to database...", icon: "ri:database-2-line" },
		{ id: 6, label: "Indexing for search...", icon: "ri:search-line" },
	];

	let progressSteps = $derived(
		reportType === "product" ? productProgressSteps : companyProgressSteps,
	);
	let currentStep = $state(0);

	async function handleSubmit() {
		if (!isValid || isLoading) return;

		isLoading = true;
		error = null;
		currentStep = 1;
		uploadSuccess = false;

		const stepInterval = setInterval(
			() => {
				if (currentStep < progressSteps.length) {
					currentStep++;
				}
			},
			reportType === "company" ? 2000 : 1500,
		);

		try {
			if (reportType === "company") {
				// Use the new upload endpoint for company reports
				const response = await fetch(
					"/api/reports/upload",
					{
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							company_name: productName,
							pdf_data: pdfData,
						}),
					},
				);

				clearInterval(stepInterval);
				currentStep = progressSteps.length;

				const data = await response.json();

				if (data.status === "success") {
					await new Promise((r) => setTimeout(r, 500));
					analysisResult = {
						...data,
						is_company_report: true,
					};
					uploadSuccess = true;
					submitted = true;
				} else if (data.status === "rejected") {
					error =
						data.message ||
						"Report was rejected - not a valid environmental report";
					analysisResult = {
						rejected: true,
						validation: data.validation,
					};
				} else {
					error = data.message || "Failed to upload report";
				}
			} else {
				// Original product incident flow
				const response = await fetch(
					"/api/incidents/submit",
					{
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							product_name: productName,
							description: description,
							report_type: reportType,
							image: image,
							pdf_data: null,
						}),
					},
				);

				clearInterval(stepInterval);
				currentStep = progressSteps.length;

				const data = await response.json();

				if (data.status === "success") {
					await new Promise((r) => setTimeout(r, 500));
					analysisResult = data;
					submitted = true;
				} else {
					error = data.message || "Failed to submit report";
				}
			}
		} catch (e) {
			clearInterval(stepInterval);
			error = "Failed to connect to server. Please try again.";
			console.error("Submit error:", e);
		} finally {
			isLoading = false;
			currentStep = 0;
		}
	}

	function resetForm() {
		submitted = false;
		uploadSuccess = false;
		analysisResult = null;
		error = null;
		productName = "";
		description = "";
		image = null;
		pdfData = null;
		pdfName = null;
	}
</script>

<div class="page-wrapper">
	<div class="desktop-bg">
		<ParallaxLandscape />
	</div>

	<div class="content-container">
		{#if submitted && analysisResult}
			<div class="glass-card success-card">
				{#if analysisResult.is_company_report}
					<!-- Company Report Upload Success -->
					<div class="icon-circle success">
						<iconify-icon
							icon="ri:file-check-fill"
							width="60"
							style="color: #4ade80;"
						></iconify-icon>
					</div>
					<h2 class="success-title">Report Verified & Uploaded</h2>

					<div class="analysis-result">
						<div class="result-item">
							<span class="result-label">Company:</span>
							<span class="result-value"
								>{analysisResult.stats?.company_name ||
									"Unknown"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Year:</span>
							<span class="result-value"
								>{analysisResult.stats?.year || "N/A"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Sector:</span>
							<span class="result-value badge"
								>{analysisResult.stats?.sector || "Other"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Report Type:</span>
							<span class="result-value"
								>{analysisResult.stats?.report_type ||
									"Unknown"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Pages:</span>
							<span class="result-value"
								>{analysisResult.stats?.page_count || 0}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Chunks Created:</span>
							<span class="result-value"
								>{analysisResult.stats?.chunks_created ||
									0}</span
							>
						</div>
						{#if analysisResult.validation?.key_topics}
							<div class="result-item full-width">
								<span class="result-label">Key Topics:</span>
								<div class="topics-list">
									{#each analysisResult.validation.key_topics.slice(0, 5) as topic}
										<span class="topic-tag">{topic}</span>
									{/each}
								</div>
							</div>
						{/if}
						{#if analysisResult.validation?.reasoning}
							<div class="result-item full-width">
								<span class="result-label">AI Assessment:</span>
								<p class="result-text">
									{analysisResult.validation.reasoning}
								</p>
							</div>
						{/if}
					</div>

					<div class="action-buttons">
						<a href="/catalogue" class="btn-primary">
							<iconify-icon icon="ri:folder-open-line" width="18"
							></iconify-icon>
							View in Catalogue
						</a>
						<button class="back-btn" onclick={resetForm}>
							<iconify-icon icon="ri:add-line" width="20"
							></iconify-icon>
							Upload Another
						</button>
					</div>
				{:else if analysisResult.is_greenwashing}
					<!-- Greenwashing Detected -->
					<div class="icon-circle warning">
						<iconify-icon
							icon="ri:alert-fill"
							width="60"
							style="color: #f59e0b;"
						></iconify-icon>
					</div>
					<h2 class="success-title warning-text">
						Greenwashing Detected!
					</h2>

					<div class="analysis-result">
						<div class="result-item">
							<span class="result-label">Verdict:</span>
							<span class="result-value"
								>{analysisResult.analysis?.verdict ||
									"N/A"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Confidence:</span>
							<span
								class="result-value badge {analysisResult
									.analysis?.confidence}"
							>
								{analysisResult.analysis?.confidence ||
									"unknown"}
							</span>
						</div>
						<div class="result-item">
							<span class="result-label">Severity:</span>
							<span
								class="result-value badge severity-{analysisResult
									.analysis?.severity}"
							>
								{analysisResult.analysis?.severity || "unknown"}
							</span>
						</div>
						<div class="result-item full-width">
							<span class="result-label">Analysis:</span>
							<p class="result-text">
								{analysisResult.analysis?.reasoning ||
									"No details available"}
							</p>
						</div>
						{#if analysisResult.detected_brand && analysisResult.detected_brand !== "Unknown"}
							<div class="result-item">
								<span class="result-label">Detected Brand:</span
								>
								<span class="result-value"
									>{analysisResult.detected_brand}</span
								>
							</div>
						{/if}
					</div>

					<button
						class="back-btn"
						onclick={() => window.history.back()}
					>
						<iconify-icon icon="ri:arrow-left-line" width="20"
						></iconify-icon>
						Go Back
					</button>
				{:else}
					<!-- Report Analyzed (No Greenwashing) -->
					<div class="icon-circle success">
						<iconify-icon
							icon="ri:checkbox-circle-fill"
							width="60"
							style="color: #4ade80;"
						></iconify-icon>
					</div>
					<h2 class="success-title">Report Analyzed</h2>

					<div class="analysis-result">
						<div class="result-item">
							<span class="result-label">Verdict:</span>
							<span class="result-value"
								>{analysisResult.analysis?.verdict ||
									"N/A"}</span
							>
						</div>
						<div class="result-item">
							<span class="result-label">Confidence:</span>
							<span
								class="result-value badge {analysisResult
									.analysis?.confidence}"
							>
								{analysisResult.analysis?.confidence ||
									"unknown"}
							</span>
						</div>
						<div class="result-item full-width">
							<span class="result-label">Analysis:</span>
							<p class="result-text">
								{analysisResult.analysis?.reasoning ||
									"No details available"}
							</p>
						</div>
						{#if analysisResult.detected_brand && analysisResult.detected_brand !== "Unknown"}
							<div class="result-item">
								<span class="result-label">Detected Brand:</span
								>
								<span class="result-value"
									>{analysisResult.detected_brand}</span
								>
							</div>
						{/if}
					</div>

					<button
						class="back-btn"
						onclick={() => window.history.back()}
					>
						<iconify-icon icon="ri:arrow-left-line" width="20"
						></iconify-icon>
						Go Back
					</button>
				{/if}
			</div>
		{:else}
			<div class="header-section">
				<h1 class="page-title">Report Greenwashing</h1>
				<p class="subtitle">Call out false eco-claims</p>
			</div>

			<div class="glass-card form-card">
				<div class="form-content">
					<div class="report-type-toggle">
						<button
							class="toggle-option"
							class:active={reportType === "product"}
							onclick={() => (reportType = "product")}
						>
							Product Incident
						</button>
						<button
							class="toggle-option"
							class:active={reportType === "company"}
							onclick={() => (reportType = "company")}
						>
							Company Report
						</button>
					</div>
					<div class="form-group">
						<label class="label" for="productName">
							{reportType === "product"
								? "Product Name"
								: "Company Name"}
						</label>
						<div class="input-wrapper">
							<iconify-icon
								icon="ri:price-tag-3-line"
								class="input-icon"
							></iconify-icon>
							<input
								type="text"
								id="productName"
								class="input"
								placeholder={reportType === "product"
									? "e.g. 'Eco-Friendly' Water Bottle"
									: "e.g. Acme Corp"}
								bind:value={productName}
							/>
						</div>
					</div>

					{#if reportType === "product"}
						<div class="form-group">
							<label class="label" for="description"
								>Why is it misleading?</label
							>
							<div class="input-wrapper textarea-wrapper">
								<iconify-icon
									icon="ri:text-snippet-line"
									class="input-icon top-align"
								></iconify-icon>
								<textarea
									id="description"
									class="textarea"
									placeholder="Describe the claim and the reality..."
									bind:value={description}
								></textarea>
							</div>
						</div>
					{/if}

					<div class="form-group">
						<span class="label">
							{reportType === "product"
								? "Evidence (Photo)"
								: "Company Report (PDF)"}
						</span>
						{#if reportType === "product"}
							<button
								class="image-picker"
								onclick={pickImage}
								type="button"
							>
								{#if image}
									<img
										src={image}
										alt="Evidence"
										class="picked-image"
									/>
									<div class="change-overlay">
										<iconify-icon
											icon="ri:camera-switch-line"
											width="24"
										></iconify-icon>
									</div>
								{:else}
									<div class="picker-placeholder">
										<iconify-icon
											icon="ri:camera-add-line"
											width="32"
											style="color: rgba(255,255,255,0.4);"
										></iconify-icon>
										<p>Upload Photo</p>
									</div>
								{/if}
							</button>
						{:else}
							<button
								class="image-picker pdf-picker"
								onclick={pickPdf}
								type="button"
							>
								{#if pdfData}
									<div class="picker-placeholder active-pdf">
										<iconify-icon
											icon="ri:file-pdf-2-fill"
											width="48"
											style="color: #ef4444;"
										></iconify-icon>
										<p class="pdf-name">{pdfName}</p>
										<span class="change-text"
											>Click to change</span
										>
									</div>
								{:else}
									<div class="picker-placeholder">
										<iconify-icon
											icon="ri:file-upload-line"
											width="32"
											style="color: rgba(255,255,255,0.4);"
										></iconify-icon>
										<p>Upload PDF Report</p>
									</div>
								{/if}
							</button>
						{/if}
					</div>

					{#if error}
						<div class="error-message">
							<iconify-icon
								icon="ri:error-warning-line"
								width="18"
							></iconify-icon>
							{error}
						</div>
					{/if}

					{#if isLoading}
						<div class="progress-container">
							<div class="progress-header">
								<iconify-icon
									icon="ri:shield-check-line"
									width="24"
									class="pulse"
								></iconify-icon>
								<span>
									{reportType === "product"
										? "Analyzing Report"
										: "Verifying & Uploading Report"}
								</span>
							</div>
							<div class="progress-steps">
								{#each progressSteps as step}
									<div
										class="progress-step"
										class:active={currentStep >= step.id}
										class:current={currentStep === step.id}
									>
										<div class="step-icon">
											{#if currentStep > step.id}
												<iconify-icon
													icon="ri:check-line"
													width="16"
												></iconify-icon>
											{:else if currentStep === step.id}
												<iconify-icon
													icon={step.icon}
													width="16"
													class="spin-slow"
												></iconify-icon>
											{:else}
												<iconify-icon
													icon={step.icon}
													width="16"
												></iconify-icon>
											{/if}
										</div>
										<span class="step-label"
											>{step.label}</span
										>
									</div>
								{/each}
							</div>
							<div class="progress-bar">
								<div
									class="progress-fill"
									style="width: {(currentStep /
										progressSteps.length) *
										100}%"
								></div>
							</div>
						</div>
					{:else}
						<button
							class="submit-button"
							class:disabled={!isValid}
							disabled={!isValid}
							onclick={handleSubmit}
							type="button"
						>
							{#if reportType === "product"}
								<iconify-icon
									icon="ri:shield-flash-line"
									width="20"
								></iconify-icon>
								Analyze for Greenwashing
							{:else}
								<iconify-icon
									icon="ri:upload-cloud-2-line"
									width="20"
								></iconify-icon>
								Upload & Verify Report
							{/if}
						</button>
					{/if}
				</div>
			</div>
		{/if}
	</div>
</div>

<style>
	.page-wrapper {
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
		position: relative;
	}

	.desktop-bg {
		display: none;
	}

	.content-container {
		position: relative;
		z-index: 10;
		padding: 120px 20px 40px;
		max-width: 500px;
		margin: 0 auto;
	}

	.header-section {
		text-align: center;
		margin-bottom: 20px;
	}

	.page-title {
		color: white;
		font-size: 28px;
		font-weight: 900;
		margin: 0;
		letter-spacing: -0.5px;
	}

	.subtitle {
		color: #4ade80;
		font-size: 14px;
		margin: 10px 0 0 0;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.glass-card {
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 28px;
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
	}

	.form-card {
		padding: 24px;
	}

	.form-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.report-type-toggle {
		display: flex;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 12px;
		padding: 4px;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.toggle-option {
		flex: 1;
		background: transparent;
		border: none;
		color: rgba(255, 255, 255, 0.6);
		padding: 10px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 13px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.toggle-option:hover {
		color: white;
		background: rgba(255, 255, 255, 0.05);
	}

	.toggle-option.active {
		background: rgba(34, 197, 94, 0.15);
		color: #4ade80;
	}

	.pdf-name {
		color: white !important;
		font-size: 14px;
		text-align: center;
		padding: 0 20px;
		word-break: break-all;
	}

	.change-text {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.4);
		margin-top: 4px;
	}

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

	.label {
		color: rgba(255, 255, 255, 0.7);
		font-weight: 600;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.input-wrapper {
		position: relative;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		transition: all 0.2s;
	}

	.input-wrapper:focus-within {
		border-color: rgba(34, 197, 94, 0.5);
		background: rgba(255, 255, 255, 0.1);
	}

	.input-icon {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(255, 255, 255, 0.4);
		font-size: 20px;
	}

	.top-align {
		top: 18px;
		transform: none;
	}

	.input {
		width: 100%;
		background: transparent;
		color: white;
		padding: 16px 16px 16px 48px;
		border: none;
		font-size: 15px;
		outline: none;
	}

	.input::placeholder {
		color: rgba(255, 255, 255, 0.35);
	}

	.textarea {
		width: 100%;
		background: transparent;
		color: white;
		padding: 16px 16px 16px 48px;
		border: none;
		font-size: 15px;
		outline: none;
		height: 120px;
		resize: none;
		font-family: inherit;
	}

	.textarea::placeholder {
		color: rgba(255, 255, 255, 0.35);
	}

	.image-picker {
		width: 100%;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 16px;
		height: 140px;
		border: 2px dashed rgba(255, 255, 255, 0.15);
		cursor: pointer;
		transition: all 0.3s ease;
		padding: 0;
		overflow: hidden;
		position: relative;
	}

	.image-picker:hover {
		border-color: rgba(34, 197, 94, 0.5);
		background: rgba(255, 255, 255, 0.08);
	}

	.picker-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: 10px;
	}

	.picker-placeholder p {
		color: rgba(255, 255, 255, 0.4);
		font-weight: 600;
		font-size: 14px;
		margin: 0;
	}

	.picked-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.change-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.2s;
		color: white;
	}

	.image-picker:hover .change-overlay {
		opacity: 1;
	}

	.submit-button {
		margin-top: 8px;
		background: linear-gradient(135deg, #22c55e, #16a34a);
		padding: 18px;
		border-radius: 50px;
		border: none;
		color: white;
		font-weight: 700;
		font-size: 15px;
		cursor: pointer;
		transition: all 0.3s ease;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
	}

	.submit-button:hover:not(.disabled) {
		transform: translateY(-2px);
		box-shadow: 0 12px 32px rgba(34, 197, 94, 0.45);
	}

	.submit-button.disabled {
		background: rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.3);
		cursor: not-allowed;
		box-shadow: none;
	}

	.success-card {
		padding: 60px 40px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-circle.success {
		background: rgba(34, 197, 94, 0.15);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24px;
	}

	.success-title {
		color: white;
		font-size: 32px;
		font-weight: 900;
		margin: 0 0 12px 0;
	}

	.success-subtitle {
		color: rgba(255, 255, 255, 0.6);
		font-size: 16px;
		margin: 0;
	}

	.warning-text {
		color: #f59e0b !important;
	}

	.icon-circle.warning {
		background: rgba(245, 158, 11, 0.15);
	}

	.analysis-result {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 20px;
		text-align: left;
		width: 100%;
	}

	.result-item {
		display: flex;
		align-items: flex-start;
		gap: 8px;
	}

	.result-item.full-width {
		flex-direction: column;
	}

	.result-label {
		color: rgba(255, 255, 255, 0.5);
		font-size: 13px;
		font-weight: 600;
		min-width: 80px;
	}

	.result-value {
		color: white;
		font-size: 14px;
	}

	.result-text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 14px;
		line-height: 1.5;
		margin: 4px 0 0 0;
	}

	.badge {
		padding: 2px 10px;
		border-radius: 12px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.badge.high {
		background: #ef4444;
		color: white;
	}
	.badge.medium {
		background: #f59e0b;
		color: #000;
	}
	.badge.low {
		background: #22c55e;
		color: #000;
	}

	.severity-high {
		background: #ef4444 !important;
	}
	.severity-medium {
		background: #f59e0b !important;
	}
	.severity-low {
		background: #22c55e !important;
	}

	.back-btn {
		margin-top: 24px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		color: white;
		padding: 12px 24px;
		border-radius: 50px;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		transition: all 0.2s;
	}

	.back-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	.action-buttons {
		display: flex;
		gap: 12px;
		margin-top: 24px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.btn-primary {
		background: #22c55e;
		color: #052e16;
		padding: 12px 24px;
		border-radius: 50px;
		font-weight: 700;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
		transition: all 0.2s;
		text-decoration: none;
		border: none;
	}

	.btn-primary:hover {
		background: #16a34a;
		transform: translateY(-2px);
	}

	.topics-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
	}

	.topic-tag {
		background: rgba(34, 197, 94, 0.1);
		color: #4ade80;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;
		border: 1px solid rgba(34, 197, 94, 0.2);
	}

	.error-message {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		background: rgba(239, 68, 68, 0.15);
		border: 1px solid rgba(239, 68, 68, 0.3);
		border-radius: 12px;
		color: #fca5a5;
		font-size: 14px;
	}

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

	:global(.spin) {
		animation: spin 1s linear infinite;
	}

	:global(.spin-slow) {
		animation: spin 2s linear infinite;
	}

	@keyframes pulse {
		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.7;
			transform: scale(1.1);
		}
	}

	:global(.pulse) {
		animation: pulse 1.5s ease-in-out infinite;
	}

	.progress-container {
		background: rgba(34, 197, 94, 0.08);
		border: 1px solid rgba(34, 197, 94, 0.2);
		border-radius: 16px;
		padding: 20px;
	}

	.progress-header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		color: #4ade80;
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 20px;
	}

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

	.progress-step {
		display: flex;
		align-items: center;
		gap: 12px;
		opacity: 0.4;
		transition: all 0.3s ease;
	}

	.progress-step.active {
		opacity: 1;
	}

	.progress-step.current {
		opacity: 1;
	}

	.progress-step.current .step-label {
		color: #4ade80;
	}

	.step-icon {
		width: 28px;
		height: 28px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.6);
		transition: all 0.3s ease;
	}

	.progress-step.active .step-icon {
		background: rgba(34, 197, 94, 0.2);
		color: #4ade80;
	}

	.progress-step.current .step-icon {
		background: #4ade80;
		color: #051f18;
	}

	.step-label {
		color: rgba(255, 255, 255, 0.6);
		font-size: 13px;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.progress-step.active .step-label {
		color: white;
	}

	.progress-bar {
		height: 4px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #22c55e, #4ade80);
		border-radius: 2px;
		transition: width 0.5s ease;
	}

	@media (min-width: 768px) {
		.desktop-bg {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}
	}

	@media (max-width: 767px) {
		.content-container {
			padding: 60px 20px 100px;
		}

		.page-title {
			font-size: 28px;
		}

		.form-card {
			padding: 28px;
		}
	}
</style>
