"use client";

import DisabledNotice from "@/components/disabled-notice";
import { FEATURES } from "@/lib/features";
import { useEffect, useState } from "react";
import Link from "next/link";
import { apiFetch, archiveKind, type ArchiveEntry } from "@/lib/api";

function ArchivePageInner() {
  const [entries, setEntries] = useState<ArchiveEntry[] | null>(null);

  useEffect(() => {
    apiFetch<ArchiveEntry[]>("/api/archive").then(setEntries).catch(() => setEntries([]));
  }, []);

  return (
    <div>
      <h1 className="page-title">포스터 숏폼 아카이브</h1>
      <p className="page-subtitle" style={{ marginBottom: "2rem" }}>
        만들어진 모든 포스터 숏폼이 메타태그와 함께 쌓입니다. 행사·지역·키워드로 축적되는 온라인 숏폼 광고판입니다.
      </p>

      {entries === null && <p style={{ color: "var(--text-teal-1)" }}>불러오는 중…</p>}
      {entries?.length === 0 && <p style={{ color: "var(--text-teal-3)" }}>아직 아카이브된 영상이 없습니다.</p>}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "var(--s-5)" }}>
        {entries?.map((e) => (
          <Link key={e.slug} href={`/archive/${e.slug}`} style={{ textDecoration: "none", color: "inherit" }}>
            <div className="card" style={{ overflow: "hidden" }}>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={e.poster_url} alt={e.name}
                style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", display: "block" }} />
              <div style={{ padding: "var(--s-4)" }}>
                <span className="tag" style={{ height: 20, padding: "0 8px", fontSize: "var(--text-xs)", marginBottom: "var(--s-2)" }}>{archiveKind(e)}</span>
                <p style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>{e.metadata?.event_name ?? e.name}</p>
                <p style={{ margin: "var(--s-1) 0 0", fontSize: 13, color: "var(--text-teal-1)" }}>
                  {e.metadata?.place}{e.metadata?.category ? ` · ${e.metadata.category}` : ""}
                </p>
                <div style={{ marginTop: "var(--s-3)", display: "flex", flexWrap: "wrap", gap: "var(--s-1)" }}>
                  {(e.metadata?.keywords ?? []).slice(0, 3).map((k) => (
                    <span key={k} className="tag" style={{ fontSize: 12 }}>{k}</span>
                  ))}
                  {(e.metadata?.keywords?.length ?? 0) > 3 && (
                    <span className="tag" style={{ fontSize: 12 }}>+{(e.metadata!.keywords.length - 3)}</span>
                  )}
                </div>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}


export default function ArchivePage() {
  if (!FEATURES.archive) return <DisabledNotice title="아카이브" backHref="/" />;
  return <ArchivePageInner />;
}