---
import { getCollection } from 'astro:content';
const posts = await getCollection('docs');
import { basename, wrapBasename } from '@/modules/basename';
import Blank from '@/layouts/blank.astro';
---

<Blank>
  <main class='min-h-screen bg-linear-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800'>
    <div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
      {/* 页面标题区域 */}
      <div class='mb-12'>
        <h1 class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>📚 文档列表</h1>
        <p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
        <div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
      </div>

      {/* 文档列表 */}
      <div class='space-y-4'>
        {
          posts.map((post) => {
            const tags = post.data.tags || [];
            const postUrl = wrapBasename(`/docs/${post.id}`);
            return (
              <article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
                <div class='p-6'>
                  {/* 文档标题 */}
                  <a href={postUrl} class='block'>
                    <h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
                      {post.data.title}
                    </h2>
                  </a>

                  {/* 文档描述(如果有) */}
                  {post.data.description && <p class='text-slate-600 dark:text-slate-400 mb-4 line-clamp-2'>{post.data.description}</p>}

                  {/* 标签列表 */}
                  {tags.length > 0 && (
                    <div class='flex flex-wrap gap-2 mt-4'>
                      {tags.map((tag) => (
                        <div class='inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors duration-200 border border-blue-200 dark:border-blue-800'>
                          <span class='mr-1'>#</span>
                          {tag}
                        </div>
                      ))}
                    </div>
                  )}

                  {/* 阅读更多指示器 */}
                  <a
                    href={postUrl}
                    class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
                    <span>阅读更多</span>
                    <svg
                      class='w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200'
                      fill='none'
                      viewBox='0 0 24 24'
                      stroke='currentColor'>
                      <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' />
                    </svg>
                  </a>
                </div>
              </article>
            );
          })
        }
      </div>

      {/* 空状态 */}
      {
        posts.length === 0 && (
          <div class='text-center py-16'>
            <div class='text-6xl mb-4'>📭</div>
            <p class='text-xl text-slate-600 dark:text-slate-400'>暂无文档</p>
          </div>
        )
      }
    </div>
  </main>
</Blank>