<template>
	<div class="account-container">
		<img src="@/assets/images/account/account-bg.png" alt="" class="banner" />

		<div class="account-main">
			<aside class="designer-panel">
				<div class="designer-avatar">
					<img :src="designerPortrait" alt="Lian Su" />
				</div>

				<div class="designer-content">
					<section class="designer-heading">
						<div class="designer-name">Lian Su</div>
						<h1 class="designer-title">Roaming Clouds</h1>
					</section>

					<section class="designer-section">
						<h2 class="section-title">Contact</h2>
						<div class="contact-list">
							<div class="contact-item">
								<SvgIcon name="brand-email" size="24" />
								<span>lian.su.studio@mail.com</span>
							</div>
							<div class="contact-item">
								<SvgIcon name="brand-call" size="24" />
								<span>+86 139 4829 7710</span>
							</div>
							<div class="contact-item">
								<SvgIcon name="brand-link" size="24" />
								<span>746312432</span>
							</div>
							<div class="contact-item">
								<SvgIcon name="brand-link" size="24" />
								<span>https://urieworweoo.com</span>
							</div>
						</div>
					</section>

					<section class="designer-section">
						<h2 class="section-title">About</h2>
						<p class="designer-about">
							Lian Su's work weaves understated ethnic influences into contemporary minimalism.
							She explores materials and silhouettes that bridge heritage and modern sensibilities.
							Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.
						</p>
					</section>
				</div>
			</aside>

			<section class="items-section">
				<header class="items-header">
					<h2 class="items-title">Items</h2>
					<div class="items-tabs" role="tablist" aria-label="Item gender filters">
						<button
							v-for="tab in tabs"
							:key="tab"
							type="button"
							class="items-tab"
							:class="{ active: activeTab === tab }"
							:aria-selected="activeTab === tab"
							role="tab"
							@click="activeTab = tab"
						>
							{{ tab }}
						</button>
					</div>
				</header>

				<div class="items-grid">
					<article v-for="item in visibleItems" :key="item.id" class="product-card">
						<div class="product-image">
							<img
								:src="item.url"
								:alt="item.title"
								:style="{ transform: `translateY(${item.imageOffset})` }"
								loading="lazy"
							/>
						</div>
						<div class="product-info">
							<div class="product-copy">
								<h3 class="product-name">{{ item.title }}</h3>
								<div class="product-price">{{ item.price }}</div>
							</div>
							<button
								type="button"
								class="add-button"
								:aria-label="`Add ${item.title} to cart`"
								@click="addShopping(item)"
							>
								<SvgIcon name="add" size="24" color="#232323" />
							</button>
						</div>
					</article>
				</div>
			</section>
		</div>

		<Footer />
	</div>
</template>

<script setup lang="ts">
	import { computed, shallowRef } from 'vue'
	import myEvent from '@/utils/myEvent'
	import designerPortrait from '@/assets/images/account/designer-lian-su.png'
	import item01 from '@/assets/images/account/item-01.png'
	import item02 from '@/assets/images/account/item-02.png'
	import item03 from '@/assets/images/account/item-03.png'
	import item04 from '@/assets/images/account/item-04.png'
	import item05 from '@/assets/images/account/item-05.png'
	import item06 from '@/assets/images/account/item-06.png'
	import item07 from '@/assets/images/account/item-07.png'
	import item08 from '@/assets/images/account/item-08.png'
	import item09 from '@/assets/images/account/item-09.png'

	type Gender = 'Male' | 'Female'
	type Tab = 'All' | Gender

	interface AccountItem {
		id: number
		title: string
		price: string
		url: string
		gender: Gender
		imageOffset: string
	}

	const tabs: Tab[] = ['All', 'Male', 'Female']
	const activeTab = shallowRef<Tab>('All')

	const items: AccountItem[] = [
		{ id: 1, title: 'Item Name', price: '$430', url: item01, gender: 'Female', imageOffset: '0rem' },
		{ id: 2, title: 'Item Name', price: '$392', url: item02, gender: 'Female', imageOffset: '0rem' },
		{ id: 3, title: 'Item Name', price: '$211', url: item03, gender: 'Male', imageOffset: '0rem' },
		{ id: 4, title: 'Item Name', price: '$187', url: item04, gender: 'Female', imageOffset: '0rem' },
		{ id: 5, title: 'Item Name', price: '$325', url: item05, gender: 'Male', imageOffset: '-1.4rem' },
		{ id: 6, title: 'Item Name', price: '$458', url: item06, gender: 'Female', imageOffset: '-0.4rem' },
		{ id: 7, title: 'Item Name', price: '$192', url: item07, gender: 'Male', imageOffset: '-3.6rem' },
		{ id: 8, title: 'Item Name', price: '$93', url: item08, gender: 'Female', imageOffset: '0rem' },
		{ id: 9, title: 'Item Name', price: '$198', url: item09, gender: 'Male', imageOffset: '-3.8rem' }
	]

	const visibleItems = computed(() => {
		if (activeTab.value === 'All') return items
		return items.filter((item) => item.gender === activeTab.value)
	})

	const addShopping = (item: AccountItem) => {
		myEvent.emit('addShopping', item)
	}
</script>

<style lang="less" scoped>
	.account-container {
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		background-color: #ffffff;

		.banner {
			display: block;
			width: 100%;
			height: 27.6rem;
			object-fit: cover;
		}
	}

	.account-main {
		display: flex;
		align-items: flex-start;
		margin: 0 9rem;
		min-height: 170.3rem;
		border-top: 0.5px solid #585858;
	}

	.designer-panel {
		position: sticky;
		top: 0;
		width: 29.7rem;
		height: var(--app-view-height);
		padding-top: 4rem;
		overflow-y: auto;
		flex: 0 0 29.7rem;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
	}

	.designer-avatar {
		width: 20rem;
		height: 20rem;
		margin-left: 5.5rem;
		border: 0.1rem solid #d2d2d7;

		> img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.designer-content {
		display: flex;
		flex-direction: column;
		gap: 6rem;
		width: 24.6rem;
		margin-top: 4rem;
		margin-left: 3.7rem;
	}

	.designer-heading,
	.designer-section {
		width: 100%;
	}

	.designer-name {
		margin-bottom: 0.8rem;
		font-family: KaiseiOpti-Medium;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1;
		color: #232323;
	}

	.designer-title,
	.section-title {
		margin: 0;
		font-family: KaiseiOpti-Bold;
		font-weight: 700;
		color: #121212;
	}

	.designer-title {
		width: 23.1rem;
		font-size: 3.4rem;
		line-height: 3.6rem;
	}

	.section-title {
		margin-bottom: 2rem;
		font-size: 3.4rem;
		line-height: 3.1rem;
	}

	.contact-list {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.contact-item {
		display: flex;
		align-items: center;
		gap: 2rem;
		min-width: 0;
		font-family: KaiseiOpti-Regular;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2.4rem;
		color: #585858;

		> :first-child {
			width: 2.4rem;
			height: 2.4rem;
			flex: 0 0 2.4rem;
		}

		> span {
			min-width: 0;
			overflow-wrap: anywhere;
		}
	}

	.designer-about {
		width: 22rem;
		margin: 0;
		font-family: KaiseiOpti-Regular;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 2.3rem;
		color: #585858;
	}

	.items-section {
		flex: 1;
		min-height: 170.3rem;
		border-left: 0.5px solid #585858;
		border-right: 0.5px solid #585858;
	}

	.items-header {
		position: sticky;
		top: 0;
		z-index: 2;
		background-color: #ffffff;
	}

	.items-title {
		margin: 0;
		padding: 4rem 0 3.6rem 1.2rem;
		font-family: KaiseiOpti-Bold;
		font-size: 3.6rem;
		font-weight: 700;
		line-height: 6rem;
		color: #121212;
	}

	.items-tabs {
		display: flex;
		gap: 2rem;
		padding: 0 1.2rem;
		margin-bottom: 5.9rem;
	}

	.items-tab {
		position: relative;
		min-width: 6rem;
		padding: 0;
		border: none;
		background: transparent;
		font-family: KaiseiOpti-Regular;
		font-size: 1.988rem;
		font-weight: 400;
		line-height: 2.6rem;
		text-align: center;
		color: #7b7b7b;
		cursor: pointer;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -0.1rem;
			display: none;
			width: 100%;
			border-bottom: 0.1rem solid #232323;
		}

		&.active {
			font-family: KaiseiOpti-Bold;
			font-weight: 700;
			color: #232323;

			&::after {
				display: block;
			}
		}
	}

	.items-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-content: start;
		border-top: 0.5px solid #585858;
	}

	.product-card {
		position: relative;
		min-height: 44.7rem;
		padding: 1.2rem;

		&::before,
		&::after {
			content: '';
			position: absolute;
			z-index: 1;
			pointer-events: none;
		}

		&::before {
			top: 0;
			right: 0;
			height: 100%;
			border-right: 0.5px solid #585858;
		}

		&::after {
			left: 0;
			bottom: 0;
			width: 100%;
			border-bottom: 0.5px solid #585858;
		}

		&:nth-child(3n)::before {
			display: none;
		}
	}

	.product-image {
		height: 37.5rem;
		margin-bottom: 0.8rem;
		overflow: hidden;
		background-color: #f7f7f7;

		> img {
			display: block;
			width: 100%;
			height: auto;
			will-change: transform;
		}
	}

	.product-info {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1.2rem;
	}

	.product-copy {
		min-width: 0;
	}

	.product-name {
		margin: 0;
		font-family: KaiseiOpti-Regular;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 2.3rem;
		color: #232323;
	}

	.product-price {
		font-family: KaiseiOpti-Regular;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2.3rem;
		color: #585858;
	}

	.add-button {
		width: 2.4rem;
		height: 2.4rem;
		padding: 0;
		margin-top: 1rem;
		border: none;
		background: transparent;
		cursor: pointer;
		flex: 0 0 2.4rem;
	}

	@media (max-width: 900px) {
		.account-main {
			display: block;
			margin: 0 2.4rem;
			min-height: auto;
		}

		.designer-panel {
			position: static;
			width: 100%;
			height: auto;
			padding: 4rem 0;
			overflow: visible;
		}

		.designer-avatar {
			margin-left: 0;
		}

		.designer-content {
			width: 100%;
		}

		.items-section {
			min-height: auto;
			border-left: none;
			border-right: none;
		}

		.items-header {
			position: static;
		}

		.items-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.product-card:nth-child(3n)::before {
			display: block;
		}

		.product-card:nth-child(2n)::before {
			display: none;
		}
	}

	@media (max-width: 600px) {
		.account-main {
			margin: 0 1.6rem;
		}

		.items-grid {
			grid-template-columns: 1fr;
		}

		.product-card::before {
			display: none;
		}
	}
</style>
