import type { ReactNode } from 'react';

type Stat = {
  label: string;
  value: string;
};

type PagePlaceholderProps = {
  tag: string;
  title: string;
  subtitle: string;
  description: string;
  stats?: Stat[];
  actions?: ReactNode;
};

export default function PagePlaceholder({
  tag,
  title,
  subtitle,
  description,
  stats = [],
  actions,
}: PagePlaceholderProps) {
  return (
    <div className="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
      <div className="w-full flex flex-col h-full p-10 pt-12">
        <div className="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
          <div>
            <div className="inline-flex items-center rounded-full bg-[#2B7FFF]/10 px-3 py-1 text-[12px] font-medium text-[#2B7FFF] dark:text-sky-300 dark:bg-sky-500/10 mb-3">
              {tag}
            </div>
            <h1
              className="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight"
              style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
            >
              {title}
            </h1>
            <p className="text-[17px] text-[#171717]/70 dark:text-gray-400 font-medium">{subtitle}</p>
          </div>

          {actions ? <div className="flex items-center gap-3 md:mt-2">{actions}</div> : null}
        </div>

        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2 space-y-4">
          <div className="rounded-[16px] bg-gray-50 dark:bg-[#222225] border border-black/10 dark:border-[#2a2a2d] p-6">
            <p className="text-[15px] text-[#171717] dark:text-[#f3f4f6] font-medium leading-7">
              {description}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            {stats.map((stat) => (
              <div
                key={stat.label}
                className="rounded-[16px] bg-white dark:bg-[#1f1f22] border border-black/10 dark:border-[#2a2a2d] p-5"
              >
                <div className="text-[13px] text-[#525866] dark:text-gray-500">{stat.label}</div>
                <div className="mt-2 text-[22px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
                  {stat.value}
                </div>
              </div>
            ))}
          </div>

          <div className="rounded-[16px] border border-dashed border-black/10 dark:border-[#2a2a2d] bg-transparent dark:bg-[#1f1f22] px-6 py-8 text-[#525866] dark:text-gray-400">
            这里先保留 React 页面壳，后续会按原有 Vue 页面逐块迁移真实内容。
          </div>
        </div>
      </div>
    </div>
  );
}