---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import {
  personalInfo,
  projects,
  identityFacts,
  heroPrinciples,
  heroSkillGroups,
  brandTimeline,
} from '@/lib/data';
import type { Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';
import { sortPostsByDate } from '@/utils/blog-utils';

const lang = (Astro.currentLocale as Lang) || defaultLang;
const isZh = lang === 'zh';
const prefix = isZh ? '/zh' : '';
const featuredProjects = projects[lang].filter((item) => item.featured).slice(0, 3);
const terminalFacts = identityFacts.filter((item) => item.label.en !== 'Experience');

const postModules = await import.meta.glob('./blog/posts/*.md', { eager: true });
const latestPosts = sortPostsByDate(
  Object.values(postModules).map((post: any) => ({
    title: post.frontmatter.title,
    description: post.frontmatter.description || '',
    slug: post.url?.split('/').filter(Boolean).pop() || '',
    date: post.frontmatter.date || post.frontmatter.pubDate || '',
  })),
).slice(0, 3);
---

<Layout title={isZh ? '首页' : 'Home'}>
  <GlassHeader lang={lang} client:idle transition:persist="header" />

  <main id="main-content" class="min-h-screen pt-24 pb-20">
    <Container>
      <section class="page-content-main space-y-6">
        <p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">{isZh ? 'TERMINAL PROFILE' : 'TERMINAL PROFILE'}</p>

        <div class="space-y-3">
          <h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">{personalInfo.name}</h1>
          <p class="text-lg font-medium text-primary/90">{personalInfo.position[lang]}</p>
        </div>

        <div class="space-y-3 text-xs leading-relaxed sm:text-sm">
          {heroPrinciples.map((line, index) => (
            <p
              class={
                index === 0
                  ? 'inline-flex items-center rounded-md border border-primary/35 bg-primary/10 px-3 py-1.5 font-semibold text-primary'
                  : 'text-foreground/80'
              }
            >
              {index === 0 && <span class="mr-2 text-[10px] uppercase tracking-wider text-primary/80">{isZh ? 'Now Hiring' : 'Open to Work'}</span>}
              {line[lang]}
            </p>
          ))}
        </div>

        <article class="page-surface overflow-hidden border border-border/80">
          <div class="flex items-center justify-between border-b border-border/80 px-4 py-2">
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded-full bg-red-400"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-yellow-400"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-green-400"></span>
            </div>
            <p class="text-xs font-mono text-muted-foreground">joey@engineer:~</p>
          </div>

          <div class="space-y-6 p-5 font-mono text-sm">
            <div class="space-y-2">
              <p><span class="text-primary">$</span> whoami</p>
              <p class="pl-4 text-foreground">{personalInfo.name}</p>
            </div>

            <div class="space-y-2">
              <p><span class="text-primary">$</span> profile --summary</p>
              <div class="grid gap-2 pl-4 text-muted-foreground sm:grid-cols-2">
                {terminalFacts.map((fact) => (
                  <p><span class="text-foreground/90">{fact.label[lang]}:</span> {fact.value[lang]}</p>
                ))}
              </div>
            </div>

            <div class="space-y-3">
              <p><span class="text-primary">$</span> stack --list</p>
              <div class="space-y-3 pl-4">
                {heroSkillGroups.map((group) => (
                  <div>
                    <p class="text-xs uppercase tracking-wide text-primary/80">{group.name[lang]}</p>
                    <div class="mt-2 flex flex-wrap gap-2">
                      {group.items.map((item) => (
                        <span class="rounded-md border border-border/80 bg-muted/40 px-2 py-1 text-xs text-foreground/90">{item}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </article>

      </section>

      <section class="page-content-main mt-20">
        <div class="mb-8 flex items-end justify-between gap-4">
          <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{isZh ? '经历速览' : 'Career Snapshot'}</h2>
          <a href={`${prefix}/about#timeline`} class="text-sm font-semibold text-primary hover:text-primary/80">{isZh ? '查看完整经历' : 'View Full Timeline'}</a>
        </div>

        <div class="relative pl-6">
          <div class="absolute left-[0.7rem] top-2 h-[calc(100%-0.5rem)] w-px bg-border"></div>
          <div class="space-y-6">
            {brandTimeline.map((item) => (
              <article class="relative rounded-lg border border-border/70 bg-card/60 p-5">
                <span class="absolute -left-[1.06rem] top-6 h-3 w-3 rounded-full border-2 border-primary bg-background"></span>
                <p class="text-xs font-semibold uppercase tracking-wider text-primary/80">{item.period[lang]}</p>
                <h3 class="mt-2 text-base font-bold leading-snug">{item.title[lang]}</h3>
                <p class="mt-2 text-sm text-muted-foreground">{item.summary[lang]}</p>
                {item.highlights && item.highlights.length > 0 && (
                  <ul class="mt-3 space-y-1.5 text-sm text-foreground/90">
                    {item.highlights.map((line) => <li>• {line[lang]}</li>)}
                  </ul>
                )}
              </article>
            ))}
          </div>
        </div>
      </section>

      <section class="page-content-main mt-20">
        <div class="mb-8 flex items-end justify-between gap-4">
          <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{isZh ? '项目经历' : 'Project Experience'}</h2>
          <a href={`${prefix}/projects`} class="text-sm font-semibold text-primary hover:text-primary/80">{isZh ? '查看全部项目' : 'View All Projects'}</a>
        </div>

        <div class="grid gap-6 lg:grid-cols-3">
          {featuredProjects.map((project) => (
            <article class="page-surface p-6">
              <p class="text-xs font-semibold uppercase tracking-wider text-primary/80">{project.systemType}</p>
              <h3 class="mt-2 text-lg font-bold">{project.title}</h3>
              <p class="mt-3 text-sm leading-relaxed text-muted-foreground">{project.context}</p>
              <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-foreground/70">{isZh ? '结果' : 'Outcome'}</p>
              <p class="mt-1 text-sm text-foreground/90">{project.outcomes?.[0] ?? project.impact}</p>
            </article>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-20">
        <div class="mb-8 flex items-end justify-between gap-4">
          <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{isZh ? '最新写作' : 'Latest Writing'}</h2>
          <a href={`${prefix}/blog`} class="text-sm font-semibold text-primary hover:text-primary/80">{isZh ? '查看全部文章' : 'View All Writing'}</a>
        </div>

        <div class="grid gap-4 md:grid-cols-3">
          {latestPosts.map((post) => (
            <article class="page-surface p-5">
              <p class="text-xs font-semibold uppercase tracking-wider text-primary/80">{post.date}</p>
              <h3 class="mt-2 text-base font-bold leading-snug">
                <a href={`${prefix}/blog/posts/${post.slug}`} class="hover:text-primary">{post.title}</a>
              </h3>
              <p class="mt-2 line-clamp-3 text-sm text-muted-foreground">{post.description}</p>
            </article>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-20 page-surface p-8">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '关于合作' : 'About Collaboration'}</h2>
        <div class="mt-6 flex flex-wrap gap-3">
          <a href={`${prefix}/about`} class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">{isZh ? '查看完整经历' : 'Read Full Profile'}</a>
          <a href={`${prefix}/hire#contact-card`} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">{isZh ? '合作与联系' : 'Collaborate & Contact'}</a>
        </div>
        <p class="mt-4 text-xs text-muted-foreground">{personalInfo.name} · {personalInfo.position[lang]} · {personalInfo.location}</p>
      </section>
    </Container>
  </main>

  <Footer lang={lang} client:idle />
</Layout>
