"use client";

import Link from "next/link";
import SessionCoverImage from "../components/SessionCoverImage";
import AddressLink from "../components/AddressLink";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { PAST_SESSIONS } from "@/config/home.config";
import { ACTIVITY_TYPES } from "@/config/home.config";

export default function HistoryPage() {
  return (
    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
      <Header />
      <main className="max-w-[700px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
        <h1 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2">
          历史活动
        </h1>
        <p className="text-sm text-stone-500 dark:text-stone-400 mb-8">
          看看之前都举办了什么～
        </p>

        <div className="relative">
          <div className="absolute left-[11px] sm:left-[15px] top-0 bottom-0 w-px bg-stone-200 dark:bg-stone-700" />
          <div className="space-y-0">
            {PAST_SESSIONS.map((s, i) => (
              <Link
                key={s.id}
                href={`/history/${s.id}`}
                className="group flex gap-4 sm:gap-6 py-6 sm:py-8 relative"
              >
                <div className="relative z-10 w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-amber-500 shrink-0 mt-1 flex items-center justify-center text-white text-[10px] sm:text-xs font-bold">
                  {PAST_SESSIONS.length - i}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4">
                    <div className="relative w-full sm:w-28 sm:h-28 shrink-0 aspect-[4/3] sm:aspect-square rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
                      {s.coverImage ? (
                        <SessionCoverImage
                          src={s.coverImage}
                          alt={s.title}
                          type={s.type}
                          fill
                          sizes="(max-width: 640px) 100vw, 112px"
                          className="object-cover"
                        />
                      ) : (
                        <div className="absolute inset-0 flex items-center justify-center text-2xl">☕</div>
                      )}
                    </div>
                    <div className="min-w-0 flex-1">
                      <span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
                        {ACTIVITY_TYPES[s.type]} · {s.city}
                      </span>
                      <h2 className="font-semibold text-stone-800 dark:text-stone-100 text-base sm:text-lg mt-0.5 group-hover:text-amber-600 dark:group-hover:text-amber-400">
                        {s.title}
                      </h2>
                      <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
                        {s.date} {s.time} · <AddressLink place={s.place} city={s.city} />
                      </p>
                      <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
                        查看主页 →
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>

        <div className="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800">
          <Link
            href="/"
            className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
          >
            ← 返回首页
          </Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}