<script lang="ts">
	import { goto } from "$app/navigation";
	import Icon from "@iconify/svelte";

	interface RecentItem {
		id: number;
		title: string;
		date: string;
		impact: string;
		imageUri: string | null;
	}

	interface Props {
		recentItems: RecentItem[];
		onToggleCamera: () => void;
	}

	let { recentItems, onToggleCamera }: Props = $props();

	function navigateToDetails(item: RecentItem) {
		sessionStorage.setItem("selectedItem", JSON.stringify(item));
		goto("/report-details");
	}

	function getImpactColor(impact: string): string {
		switch (impact.toLowerCase()) {
			case "low":
				return "#22c55e";
			case "medium":
				return "#f59e0b";
			case "high":
				return "#ef4444";
			default:
				return "#6b7280";
		}
	}
</script>

<div class="home-container">
	<div class="bg-gradient"></div>

	<div class="safe-area">
		<div class="header">
			<div class="header-left">
				<div class="logo-icon">
					<img
						src="/ethix-logo.png"
						alt="Ethix Logo"
						class="logo-img"
					/>
				</div>
				<div>
					<h1 class="app-name">Ethix</h1>
					<p class="tagline">Truth in every scan</p>
				</div>
			</div>
			<button class="profile-avatar">
				<span>YO</span>
			</button>
		</div>

		<div class="scroll-content">
			<button class="card scan-card" onclick={onToggleCamera}>
				<div class="scan-card-glow"></div>
				<div class="card-inner">
					<div class="scan-icon-wrapper">
						<Icon icon="ri:camera-lens-fill" width="36" />
					</div>
					<div class="card-text-container">
						<h2 class="card-title">Start Scanning</h2>
						<p class="card-text">
							Identify harmful products instantly
						</p>
					</div>
					<div class="arrow-icon">
						<Icon icon="ri:arrow-right-s-line" width="28" />
					</div>
				</div>
			</button>

			<div class="stats-row">
				<div class="stat-item">
					<div class="stat-icon green">
						<Icon icon="ri:scan-2-line" width="20" />
					</div>
					<div class="stat-info">
						<span class="stat-number">47</span>
						<span class="stat-label">Scans</span>
					</div>
				</div>
				<div class="stat-divider"></div>
				<div class="stat-item">
					<div class="stat-icon blue">
						<Icon icon="ri:leaf-line" width="20" />
					</div>
					<div class="stat-info">
						<span class="stat-number">32</span>
						<span class="stat-label">Eco Picks</span>
					</div>
				</div>
				<div class="stat-divider"></div>
				<div class="stat-item">
					<div class="stat-icon orange">
						<Icon icon="ri:fire-line" width="20" />
					</div>
					<div class="stat-info">
						<span class="stat-number">78%</span>
						<span class="stat-label">Score</span>
					</div>
				</div>
			</div>

			<div class="recent-section">
				<div class="section-header">
					<h2 class="section-title">Recent Activity</h2>
					<button class="see-all-btn">See all</button>
				</div>

				{#if recentItems.length === 0}
					<div class="empty-state">
						<Icon
							icon="ri:scan-line"
							width="48"
							style="color: rgba(255,255,255,0.3);"
						/>
						<p>No recent scans yet</p>
						<span>Start scanning to see your history</span>
					</div>
				{:else}
					{#each recentItems as item (item.id)}
						<button
							class="recent-card"
							onclick={() => navigateToDetails(item)}
						>
							<div
								class="recent-icon-container"
								style="background: {getImpactColor(
									item.impact,
								)}20;"
							>
								<Icon
									icon="ri:box-3-line"
									width="22"
									style="color: {getImpactColor(
										item.impact,
									)};"
								/>
							</div>
							<div class="recent-info">
								<h3 class="recent-title">{item.title}</h3>
								<p class="recent-date">{item.date}</p>
							</div>
							<div
								class="impact-badge"
								style="background: {getImpactColor(
									item.impact,
								)}15; color: {getImpactColor(
									item.impact,
								)}; border: 1px solid {getImpactColor(
									item.impact,
								)}25;"
							>
								{item.impact}
							</div>
						</button>
					{/each}
				{/if}
			</div>
		</div>
	</div>
</div>

<style>
	.home-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
	}

	.bg-gradient {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
			165deg,
			#064e3b 0%,
			#065f46 15%,
			#047857 30%,
			#0f766e 50%,
			#134e4a 70%,
			#1e3a3a 100%
		);
		z-index: -1;
	}

	.safe-area {
		padding-top: 50px;
		padding-bottom: 140px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 20px 24px;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.logo-icon {
		width: 48px;
		height: 48px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.logo-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.app-name {
		font-size: 26px;
		font-weight: 800;
		color: white;
		margin: 0;
	}

	.tagline {
		color: rgba(255, 255, 255, 0.6);
		margin: 2px 0 0 0;
		font-size: 13px;
	}

	.profile-avatar {
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white;
		cursor: pointer;
	}

	.scroll-content {
		padding: 0 20px 140px;
	}

	.scan-card {
		position: relative;
		background: linear-gradient(
			135deg,
			rgba(74, 222, 128, 0.2),
			rgba(34, 197, 94, 0.1)
		);
		padding: 24px;
		border-radius: 24px;
		border: 1px solid rgba(74, 222, 128, 0.3);
		cursor: pointer;
		transition: all 0.3s ease;
		width: 100%;
		text-align: left;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.scan-card-glow {
		position: absolute;
		top: -20px;
		right: -20px;
		width: 100px;
		height: 100px;
		background: radial-gradient(
			circle,
			rgba(74, 222, 128, 0.3) 0%,
			transparent 70%
		);
		pointer-events: none;
	}

	.scan-card:active {
		transform: scale(0.98);
	}

	.card-inner {
		display: flex;
		align-items: center;
		gap: 16px;
		position: relative;
	}

	.scan-icon-wrapper {
		width: 60px;
		height: 60px;
		background: linear-gradient(135deg, #4ade80, #22c55e);
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #052e16;
		flex-shrink: 0;
		box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
	}

	.card-text-container {
		flex: 1;
	}

	.card-title {
		color: white;
		font-size: 18px;
		font-weight: 700;
		margin: 0;
	}

	.card-text {
		color: rgba(255, 255, 255, 0.6);
		font-size: 13px;
		margin: 4px 0 0 0;
	}

	.arrow-icon {
		color: rgba(255, 255, 255, 0.4);
	}

	.stats-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.06);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 20px;
		padding: 16px 20px;
		margin-bottom: 28px;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: 1;
		justify-content: center;
	}

	.stat-icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stat-icon.green {
		background: rgba(74, 222, 128, 0.2);
		color: #4ade80;
	}

	.stat-icon.blue {
		background: rgba(96, 165, 250, 0.2);
		color: #60a5fa;
	}

	.stat-icon.orange {
		background: rgba(251, 146, 60, 0.2);
		color: #fb923c;
	}

	.stat-info {
		display: flex;
		flex-direction: column;
	}

	.stat-number {
		font-size: 18px;
		font-weight: 800;
		color: white;
		line-height: 1;
	}

	.stat-label {
		font-size: 11px;
		color: rgba(255, 255, 255, 0.5);
		margin-top: 2px;
	}

	.stat-divider {
		width: 1px;
		height: 36px;
		background: rgba(255, 255, 255, 0.1);
	}

	.recent-section {
		margin-top: 8px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-title {
		color: white;
		font-weight: 700;
		font-size: 18px;
		margin: 0;
	}

	.see-all-btn {
		background: none;
		border: none;
		color: #4ade80;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.empty-state {
		text-align: center;
		padding: 40px 20px;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 20px;
		border: 1px dashed rgba(255, 255, 255, 0.1);
	}

	.empty-state p {
		color: rgba(255, 255, 255, 0.6);
		font-weight: 600;
		margin: 12px 0 4px;
	}

	.empty-state span {
		color: rgba(255, 255, 255, 0.4);
		font-size: 13px;
	}

	.recent-card {
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(8px);
		padding: 14px 16px;
		border-radius: 18px;
		border: 1px solid rgba(255, 255, 255, 0.06);
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 10px;
		cursor: pointer;
		transition: all 0.2s ease;
		width: 100%;
		text-align: left;
	}

	.recent-card:active {
		transform: scale(0.98);
		background: rgba(255, 255, 255, 0.08);
	}

	.recent-icon-container {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.recent-info {
		flex: 1;
		min-width: 0;
	}

	.recent-title {
		color: white;
		font-weight: 600;
		font-size: 15px;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.recent-date {
		color: rgba(255, 255, 255, 0.5);
		font-size: 12px;
		margin: 3px 0 0 0;
	}

	.impact-badge {
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}
</style>
