import { loadActiveSkin } from "@/lib/theme";
import { ThemePicker } from "./_picker";

export const metadata = { title: "Theme · Admin" };
export const dynamic = "force-dynamic";

export default async function AdminThemePage() {
  const skin = await loadActiveSkin();
  return (
    <div className="max-w-4xl mx-auto py-6">
      <h1 className="font-display text-2xl mb-2">Theme công khai</h1>
      <p className="text-sm text-ink-muted mb-6">
        Đổi giao diện toàn site (header, homepage, bài viết, footer). Admin panel
        giữ nguyên để dễ điều khiển. Người đọc sẽ thấy theme mới ngay sau khi áp dụng (cache layout
        được revalidate).
      </p>
      <div className="mb-6 p-4 rounded-lg border-2 border-dashed border-accent-primary/40 bg-accent-primary/5">
        <div className="text-[11px] uppercase tracking-wider font-mono text-accent-primary mb-2">
          Đang thiết kế theme mới
        </div>
        <p className="text-sm text-ink-secondary mb-3">
          3 mockup design đang chờ bạn xem & chọn. Mỗi cái render homepage thật với data hiện có.
        </p>
        <a
          href="/admin/theme/preview"
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-primary text-white text-sm font-semibold hover:bg-accent-primary/90"
        >
          Xem 3 mockup →
        </a>
      </div>
      <ThemePicker initialSkin={skin} />
    </div>
  );
}