"use client";

import Link from "next/link";
import NextImage from "next/image";
import { motion, useReducedMotion } from "motion/react";
import { ArrowUpRight, Calendar, Clock, Sparkles, BookOpen, Image as ImageIcon, Coffee, Music, Camera, Plane, Brain } from "lucide-react";
import { getLifePostCoverImage, getLifePostImages } from "@/content/life/content";
import type { LifePost } from "@/content/life/types";

const topics = [
  { name: "Daily", icon: Coffee },
  { name: "Reading", icon: BookOpen },
  { name: "Music", icon: Music },
  { name: "Photo", icon: Camera },
  { name: "Travel", icon: Plane },
  { name: "Thoughts", icon: Brain },
];

type LifePageProps = {
  posts: readonly LifePost[];
};

export function LifePage({ posts }: LifePageProps) {
  const reduceMotion = useReducedMotion();
  const distance = reduceMotion ? 0 : 24;
  const duration = reduceMotion ? 0 : 0.55;
  const easeOut = [0.22, 1, 0.36, 1] as const;

  const container = {
    hidden: {},
    show: {
      transition: {
        staggerChildren: reduceMotion ? 0 : 0.08,
        delayChildren: reduceMotion ? 0 : 0.1,
      },
    },
  };

  const reveal = {
    hidden: { opacity: 0, y: distance, filter: reduceMotion ? "none" : "blur(8px)" },
    show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration, ease: easeOut } },
  };

  const scaleReveal = {
    hidden: { opacity: 0, y: distance, scale: reduceMotion ? 1 : 0.97 },
    show: { opacity: 1, y: 0, scale: 1, transition: { duration, ease: easeOut } },
  };

  const latestPost = posts[0];
  const latestPostImages = latestPost ? getLifePostImages(latestPost) : [];
  const latestPostCoverImage = latestPost ? getLifePostCoverImage(latestPost) : undefined;

  return (
    <main className="relative min-h-dvh overflow-x-clip bg-[#f4f5f1] text-[#151515]">
      {/* 背景装饰 */}
      <div className="pointer-events-none absolute inset-0 -z-10">
        {/* 顶部绿色光晕 */}
        <div
          className="absolute -top-32 left-1/2 h-[28rem] w-[90%] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
          style={{
            background:
              "radial-gradient(ellipse at center, rgba(95, 111, 82, 0.25) 0%, rgba(95, 111, 82, 0.08) 45%, transparent 70%)",
          }}
        />
        {/* 右下角暖绿色光晕 */}
        <div
          className="absolute -bottom-20 -right-20 h-96 w-96 rounded-full opacity-30 blur-3xl"
          style={{
            background:
              "radial-gradient(circle, rgba(163, 177, 138, 0.35) 0%, rgba(163, 177, 138, 0.1) 50%, transparent 70%)",
          }}
        />
        {/* 左下角深绿色光晕 */}
        <div
          className="absolute bottom-1/4 -left-32 h-72 w-72 rounded-full opacity-20 blur-3xl"
          style={{
            background:
              "radial-gradient(circle, rgba(95, 111, 82, 0.3) 0%, transparent 65%)",
          }}
        />
        {/* 细微纹理网格 */}
        <div
          className="absolute inset-0 opacity-[0.015]"
          style={{
            backgroundImage:
              "linear-gradient(rgba(95, 111, 82, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 111, 82, 0.5) 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />
      </div>

      <div className="mx-auto flex min-h-dvh w-full max-w-6xl flex-col px-5 py-5 sm:px-8 lg:px-10">
        {/* 顶部导航 */}
        <motion.header
          initial="hidden"
          animate="show"
          variants={container}
          className="relative z-10 flex items-center justify-between rounded-full border border-[#151515]/8 bg-white/55 px-4 py-2.5 shadow-lg shadow-[#5f6f52]/6 backdrop-blur-xl"
        >
          <motion.div variants={scaleReveal}>
            <Link
              href="/"
              className="group inline-flex h-10 items-center gap-2 rounded-full bg-[#151515] px-4 text-sm font-black text-white outline-none transition hover:bg-[#5f6f52] focus-visible:ring-2 focus-visible:ring-[#5f6f52]/40"
            >
              <Sparkles className="h-3.5 w-3.5 transition group-hover:rotate-12" />
              fly
            </Link>
          </motion.div>

          <motion.div variants={reveal} className="hidden items-center gap-0.5 md:flex">
            <Link
              href="/"
              className="rounded-full px-4 py-2 text-sm font-medium text-[#151515]/55 outline-none transition hover:bg-[#151515]/5 hover:text-[#151515] focus-visible:ring-2 focus-visible:ring-[#5f6f52]/30"
            >
              首页
            </Link>
            <Link
              href="/notes/frontend"
              className="rounded-full px-4 py-2 text-sm font-medium text-[#151515]/55 outline-none transition hover:bg-[#151515]/5 hover:text-[#151515] focus-visible:ring-2 focus-visible:ring-[#5f6f52]/30"
            >
              技术笔记
            </Link>
            <span className="relative rounded-full px-4 py-2 text-sm font-semibold text-[#5f6f52]">
              <span className="absolute inset-0 rounded-full bg-[#5f6f52]/10" />
              <span className="relative">日常分享</span>
            </span>
          </motion.div>
        </motion.header>

        {/* Hero 区域 */}
        <motion.section
          initial="hidden"
          animate="show"
          variants={container}
          className="grid gap-10 py-14 sm:py-20 lg:grid-cols-[1fr_16rem] lg:items-end"
        >
          <div className="max-w-3xl">
            <motion.p
              variants={reveal}
              className="inline-flex items-center gap-2 rounded-full border border-[#5f6f52]/20 bg-[#5f6f52]/8 px-4 py-2 font-mono text-xs uppercase tracking-normal text-[#5f6f52]"
            >
              <Sparkles className="h-3.5 w-3.5" />
              daily notes / life stream
            </motion.p>
            <motion.h1
              variants={reveal}
              className="mt-6 font-display text-6xl font-medium leading-none tracking-tight text-[#151515] sm:text-7xl lg:text-[8.5rem]"
            >
              日常分享
            </motion.h1>
            <motion.p variants={reveal} className="mt-6 max-w-xl text-lg leading-8 text-[#151515]/58">
              记录真实经历里的小路标：工具使用、阶段复盘、生活观察，以及一些值得回头看的想法。
            </motion.p>

            {/* 主题标签 */}
            <motion.div variants={reveal} className="mt-8 flex flex-wrap gap-2">
              {topics.map((topic) => {
                const Icon = topic.icon;
                return (
                  <span
                    key={topic.name}
                    className="group inline-flex items-center gap-1.5 rounded-full border border-[#151515]/8 bg-white/50 px-3 py-1.5 font-mono text-xs text-[#151515]/45 backdrop-blur transition hover:border-[#5f6f52]/25 hover:bg-[#5f6f52]/8 hover:text-[#5f6f52]"
                  >
                    <Icon className="h-3 w-3" />
                    {topic.name}
                  </span>
                );
              })}
            </motion.div>
          </div>

          <motion.div
            variants={scaleReveal}
            className="grid grid-cols-2 gap-4 rounded-3xl border border-[#151515]/8 bg-white/70 p-5 shadow-xl shadow-[#5f6f52]/8 backdrop-blur-xl"
          >
            <div className="space-y-2">
              <p className="font-mono text-[0.68rem] uppercase tracking-normal text-[#151515]/38">
                文章总数
              </p>
              <p className="font-display text-4xl font-medium leading-none text-[#151515]">
                {posts.length.toString().padStart(2, "0")}
              </p>
            </div>
            <div className="space-y-2">
              <p className="font-mono text-[0.68rem] uppercase tracking-normal text-[#151515]/38">
                最新更新
              </p>
              <p className="font-mono text-sm font-medium text-[#5f6f52]">{latestPost?.date}</p>
            </div>
            <div className="col-span-2 flex items-center gap-2 border-t border-[#151515]/8 pt-4">
              <Calendar className="h-4 w-4 text-[#5f6f52]" />
              <span className="text-sm text-[#151515]/50">不定期更新，记录生活点滴</span>
            </div>
          </motion.div>
        </motion.section>

        {/* 精选文章（最新一篇） */}
        {latestPost && (
          <motion.section
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            variants={container}
            className="pb-12"
          >
            <motion.p
              variants={reveal}
              className="mb-5 flex items-center gap-2 font-mono text-xs uppercase tracking-normal text-[#5f6f52]"
            >
              <span className="h-1 w-1 rounded-full bg-[#5f6f52]" />
              featured / 最新文章
            </motion.p>
            <motion.div variants={scaleReveal}>
              <Link
                href={`/life/${latestPost.slug}`}
                className="group relative block overflow-hidden rounded-[2rem] border border-[#151515]/8 bg-white/75 shadow-2xl shadow-[#5f6f52]/10 backdrop-blur-xl transition hover:-translate-y-1.5 hover:border-[#5f6f52]/25 hover:shadow-[#5f6f52]/18 focus-visible:ring-2 focus-visible:ring-[#5f6f52]/40"
              >
                {/* 渐变装饰 */}
                <div
                  className="absolute inset-0 opacity-0 transition duration-500 group-hover:opacity-100"
                  style={{
                    background:
                      "linear-gradient(135deg, rgba(95, 111, 82, 0.05) 0%, rgba(163, 177, 138, 0.03) 50%, rgba(95, 111, 82, 0.04) 100%)",
                  }}
                />
                {/* 悬停时的光晕效果 */}
                <div className="absolute -top-1/2 -right-1/2 h-full w-full rounded-full bg-[#5f6f52]/0 blur-3xl transition duration-700 group-hover:bg-[#5f6f52]/8" />

                <div
                  className={`relative grid gap-8 p-6 sm:p-8 lg:items-center lg:p-10 ${
                    latestPostCoverImage ? "lg:grid-cols-[1fr_20rem]" : ""
                  }`}
                >
                  <div className="space-y-5">
                    <div className="flex items-center gap-3">
                      <span className="inline-flex items-center gap-1.5 rounded-full bg-[#5f6f52]/12 px-3 py-1 font-mono text-xs font-medium text-[#5f6f52]">
                        <Clock className="h-3 w-3" />
                        {latestPost.date}
                      </span>
                      <span className="inline-flex items-center gap-1 font-mono text-xs uppercase text-[#151515]/30">
                        <ImageIcon className="h-3 w-3" />
                        {latestPostImages.length} 张图片
                      </span>
                    </div>
                    <h2 className="font-display text-3xl font-semibold leading-tight text-[#151515] transition duration-300 group-hover:text-[#5f6f52] sm:text-4xl">
                      {latestPost.title}
                    </h2>
                    <p className="max-w-xl text-base leading-7 text-[#151515]/55">
                      {latestPost.description}
                    </p>
                    <div className="pt-2">
                      <span className="group/btn inline-flex items-center gap-2 text-sm font-semibold text-[#5f6f52]">
                        阅读全文
                        <ArrowUpRight className="h-4 w-4 transition duration-300 group-hover/btn:-translate-y-0.5 group-hover/btn:translate-x-0.5" />
                      </span>
                    </div>
                  </div>

                  {/* 图片预览区域 */}
                  {latestPostCoverImage && (
                    <div className="relative overflow-hidden rounded-2xl border border-[#151515]/8 bg-[#f4f5f1]">
                      <div className="relative aspect-[4/3] w-full">
                        <NextImage
                          src={latestPostCoverImage.src}
                          alt={latestPostCoverImage.alt}
                          fill
                          sizes="(max-width: 1024px) 100vw, 320px"
                          className="object-cover transition duration-500 group-hover:scale-105"
                        />
                        {/* 图片渐变遮罩 */}
                        <div className="absolute inset-0 bg-gradient-to-t from-[#5f6f52]/10 via-transparent to-transparent" />
                      </div>
                      {/* 图片装饰角标 */}
                      <div className="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-white/80 px-2 py-1 font-mono text-[0.65rem] font-medium text-[#5f6f52] backdrop-blur">
                        <ImageIcon className="h-3 w-3" />
                        {latestPostImages.length}P
                      </div>
                    </div>
                  )}
                </div>
              </Link>
            </motion.div>
          </motion.section>
        )}

        {/* 文章列表 */}
        <motion.section
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, margin: "-60px" }}
          variants={container}
          className="flex-1 py-8 sm:py-10"
        >
          <motion.div
            variants={reveal}
            className="mb-6 flex items-center justify-between"
          >
            <p className="flex items-center gap-2 font-mono text-xs uppercase tracking-normal text-[#5f6f52]">
              <span className="h-1 w-1 rounded-full bg-[#5f6f52]" />
              all posts / 全部文章
            </p>
            <span className="font-mono text-xs text-[#151515]/35">
              {posts.length} 篇
            </span>
          </motion.div>

          <div className="space-y-3">
            {posts.map((post, index) => {
              const postImages = getLifePostImages(post);

              return (
                <motion.div key={post.slug} variants={reveal}>
                  <Link
                    href={`/life/${post.slug}`}
                    className="group relative flex items-center gap-4 overflow-hidden rounded-2xl border border-[#151515]/8 bg-white/45 p-5 transition-all duration-300 hover:border-[#5f6f52]/20 hover:bg-white/80 hover:shadow-lg hover:shadow-[#5f6f52]/6 focus-visible:ring-2 focus-visible:ring-[#5f6f52]/40 sm:gap-6 sm:p-6"
                  >
                    {/* 左侧装饰条 */}
                    <div className="absolute left-0 top-0 h-full w-1 bg-[#5f6f52]/0 transition-all duration-300 group-hover:bg-[#5f6f52]/40" />

                    {/* 序号 */}
                    <span className="hidden font-mono text-sm font-medium text-[#151515]/20 sm:block">
                      {String(index + 1).padStart(2, "0")}
                    </span>

                    {/* 日期和图片数 */}
                    <div className="flex shrink-0 flex-col gap-1.5">
                      <time className="font-mono text-xs uppercase tracking-normal text-[#151515]/40">
                        {post.date}
                      </time>
                      <span className="hidden items-center gap-1 font-mono text-[0.65rem] text-[#151515]/25 sm:inline-flex">
                        <ImageIcon className="h-3 w-3" />
                        {postImages.length} 张
                      </span>
                    </div>

                    {/* 标题和描述 */}
                    <div className="min-w-0 flex-1">
                      <h3 className="truncate text-xl font-medium text-[#151515] transition-colors duration-300 group-hover:text-[#5f6f52] sm:text-2xl">
                        {post.title}
                      </h3>
                      <p className="mt-1 truncate text-sm text-[#151515]/48">
                        {post.description}
                      </p>
                    </div>

                    {/* 箭头 */}
                    <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[#151515]/8 text-[#151515]/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:border-[#5f6f52]/30 group-hover:bg-[#5f6f52]/8 group-hover:text-[#5f6f52]">
                      <ArrowUpRight className="h-4 w-4" />
                    </span>
                  </Link>
                </motion.div>
              );
            })}
          </div>

          {/* 底部装饰 */}
          <motion.div
            variants={reveal}
            className="mt-auto flex items-center justify-between border-t border-[#151515]/8 pt-8"
          >
            <span className="font-mono text-xs uppercase tracking-normal text-[#151515]/25">
              fly / life
            </span>
            <span className="font-mono text-xs text-[#151515]/25">
              made with ♥
            </span>
          </motion.div>
        </motion.section>
      </div>
    </main>
  );
}
