---
import PageLayout from '../layouts/BaseLayout.astro'
import Section from '../components/Section.astro'
import Card from '../components/Card.astro'
import ProjectCard from '../components/ProjectCard.astro'
import Label from '../components/Label.astro'
import SkillLayout from '../components/SkillLayout.astro'
import PostPreview from '@/components/blog/PostPreview.astro'
import { Image } from 'astro:assets'
import kazootttAvatar from '../assets/kazoottt-avatar.jpeg'

import { getAllPosts, sortMDByDate } from '@/utils'
import { Icon } from 'astro-icon/components'
import GiscusComment from '@/components/GiscusComment'

const frontend = ['react(熟悉)', 'vue2(了解)', 'vtk.js(了解)', 'next.js', 'tailwindcss']
const backend = ['nodejs(熟悉)', 'python(了解)', 'elysiajs', 'nextjs', 'cloudflare d1', 'prisma']
const others = ['大模型提示词调优']
const languages = ['英文']

const MAX_POSTS = 10
const MAX_PROJECTS = 6
const allPosts = await getAllPosts()
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)

// Direct projects
const directProjects = [
	{
		title: '油猴脚本合集',
		description: '收录了我开发的一些油猴脚本',
		url: 'https://greasyfork.org/zh-CN/users/904256-kazoottt-wang',
		imagePath: '/src/assets/greasyFork.png',
		altText: 'greasyFork'
	}
]

// Get projects from markdown
const mdProjects = allPosts
	.filter((post) => post.data.category === '项目-已结项')
	.sort((a, b) => {
		if (a.data.pinned && !b.data.pinned) return -1
		if (!a.data.pinned && b.data.pinned) return 1
		return new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
	})
	.map((post) => ({
		title: post.data.title,
		description: post.data.description || '',
		url: post.data.projectUrl ? post.data.projectUrl : `/blog/${post.slug}`,
		imagePath: post.data.coverImage,
		altText: post.data.title,
		isExternal: !!post.data.projectUrl
	}))

// Combine both types of projects
const projects = [...directProjects, ...mdProjects].slice(0, MAX_PROJECTS)
---

<PageLayout meta={{ title: 'Home' }}>
	<div class='flex w-full flex-col gap-y-10'>
		<section class='flex flex-col items-center gap-y-7'>
			<Image
				src={kazootttAvatar}
				alt='profile photo'
				class='h-28 w-auto rounded-full bg-[#FFBE98] p-1'
				loading='eager'
			/>

			<div class='flex flex-col items-center gap-y-4'>
				<h1 class='text-3xl font-bold'>KazooTTT</h1>
				<a href='https://wakatime.com/@d3dc2570-e4bf-4469-b0c2-127b495e8b91'
					><img
						src='https://wakatime.com/badge/user/d3dc2570-e4bf-4469-b0c2-127b495e8b91.svg'
						alt='Total time coded since Nov 4 2017'
					/></a
				>
				<div class='flex flex-wrap justify-center gap-x-4 gap-y-3'>
					<Label title='github' as='a' href='https://github.com/KazooTTT' target='_blank'>
						<Icon name='github' slot='icon' />
					</Label>
					<Label title='twitter' as='a' href='https://x.com/KazooTTT' target='_blank'>
						<Icon name='twitter' slot='icon' />
					</Label>
					<Label title='photo' as='a' href='https://unsplash.com/@kazoottt' target='_blank'>
						<Icon name='round-photo' slot='icon' />
					</Label>
					<Label title='notes' as='a' href='https://notes.kazoottt.top/' target='_blank'>
						<Icon name='link' slot='icon' />
					</Label>
					<Label title='汇总' as='a' href='https://bento.me/KazooTTT' target='_blank'>
						<Icon name='link' slot='icon' />
					</Label>
				</div>
			</div>
		</section>

		<Section title='About'>
			<div class='text-muted-foreground space-y-2'>
				<p>你是一位专注于前端开发的工程师，深度使用 React 技术栈。通过持续学习和实践，你在现代前端工程化方面积累了丰富经验。</p>
				<p>你的技术栈：</p>
				<ul class="list-disc list-inside ml-2 mt-1">
					<li>基于 React 生态系统进行 Web 应用开发</li>
					<li>使用 VTK.js 探索数据可视化领域</li>
					<li>具备 Python 和 Node.js 全栈开发经验</li>
				</ul>
				<p class="mt-2">保持技术热情，持续学习成长中 🌱</p>
			</div>
		</Section>
		{
			allPostsByDate.length > 0 && (
				<Section title='Posts'>
					<ul class='flex flex-col gap-y-2'>
						{allPostsByDate.map((p) => (
							<li class='flex flex-col gap-x-2 sm:flex-row'>
								<PostPreview post={p} />
							</li>
						))}
					</ul>
				</Section>
			)
		}

		<Section title='Experience'>
			<Card
				heading='方田医创科技有限公司'
				subheading='高级前端开发工程师'
				date='2024年09月-至今'
				imagePath='/src/assets/finetool.png'
				altText='方田医创科技有限公司'
				imageClass='h-12 w-auto md:-left-16'
				href='https://www.finetool.cn/'
				target='_blank'
			/>
			<Card
				heading='wind信息技术有限公司'
				subheading='web前端开发'
				date='2021年07月-2024年8月'
				imagePath='/src/assets/wind.png'
				altText='wind信息技术有限公司'
				imageClass='h-12 w-auto md:-left-16'
				href='https://www.wind.com.cn'
				target='_blank'
			>
				<ul class='ml-4 list-disc text-muted-foreground'>
					<li>主导电商平台前后台开发，采用React+TypeScript技术栈，提升用户体验及运营效率</li>
					<li>负责数据管理中台的架构设计与开发，实现数据可视化及智能分析功能</li>
					<li>设计并开发基于大语言模型的智能应用，优化提示词系统，提升模型输出质量</li>
				</ul>
			</Card>
			<Card
				heading='百词斩'
				subheading='web前端开发（实习）'
				date='2020年10月-2021年01月'
				imagePath='/src/assets/baicizhan.png'
				altText='百词斩'
				imageClass='h-12 w-auto md:-left-16'
				href='https://www.baicizhan.com/'
				target='_blank'
			>
				<ul class='ml-4 list-disc text-muted-foreground'>
					<li>参与百词斩电商平台的前后端开发，提升用户购物体验</li>
				</ul>
			</Card>
		</Section>

		<Section title='Education'>
			<Card
				heading='四川大学'
				subheading='软件学院本科'
				date='2017年9月-2021年7月'
				imagePath='/src/assets/scu.png'
				altText='四川大学'
				imageClass='h-12 w-auto md:-left-16'
				href='https://www.scu.edu.cn'
				target='_blank'
			/>
		</Section>

		<Section title='Skills'>
			<SkillLayout title='Frontend' skills={frontend} />
			<SkillLayout title='Backend' skills={backend} />
			<SkillLayout title='Others' skills={others} />
			<SkillLayout title='Languages' skills={languages} />
		</Section>

		<Section title='Projects' subtitle='(open source)'>
			<div class='grid grid-cols-1 gap-3 sm:grid-cols-2'>
				{
					projects.map((project) => (
						<ProjectCard
							href={project.url}
							heading={project.title}
							subheading={project.description}
							imagePath={project.imagePath}
							altText={project.altText}
							target={'_blank'}
						/>
					))
				}
			</div>
			<div class='mt-4 flex justify-end'>
				<a
					href={`/categories/${encodeURIComponent('项目-已结项')}`}
					class='flex items-center gap-x-1 text-sm text-muted-foreground transition-colors hover:text-foreground'
				>
					查看更多项目
					<Icon name='link' class='h-4 w-4' />
				</a>
			</div>
		</Section>
	</div>
	<GiscusComment client:only='react' />
</PageLayout>