export type TuViSchedulePlaceholderLayer =
  | "dai-van"
  | "tieu-van"
  | "nguyet-van"
  | "nhat-van"
  | "chuyen-de";

type Props = {
  layer: TuViSchedulePlaceholderLayer;
  /** Gọi khi người dùng muốn quay về tab Lá số (điều khiển từ trang). */
  onGoLaSo?: () => void;
  className?: string;
};

const LAYER_META: Record<
  TuViSchedulePlaceholderLayer,
  { title: string; kicker: string; scope: string; apiHint: string[] }
> = {
  "dai-van": {
    title: "Đại vận",
    kicker: "Mười năm một bước",
    scope:
      "Đại vận là tầng vận hạn mười năm theo chi và tinh trên các ô; dùng để đọc xu thế dài theo từng giai đoạn đời.",
    apiHint: [
      "Thứ tự đại vận theo Mệnh và chi khởi vận.",
      "Tinh phụ và sát cát giao từng đại hạn (khi bản sau bổ sung đủ lớp vận).",
      "Liên kết với niên mệnh người xem (canh khắc đã ghi).",
    ],
  },
  "tieu-van": {
    title: "Tiểu vận",
    kicker: "Một năm một vòng",
    scope: "Tiểu vận là năm dương lịch / âm lịch xét trên lưới năm — nối giữa đại vận và nguyệt vận.",
    apiHint: [
      "Năm xem và nhánh tiểu vận trên các cung.",
      "Sao lưu, phản chiếu với đại hạn và nguyệt vận.",
    ],
  },
  "nguyet-van": {
    title: "Nguyệt vận",
    kicker: "Tháng trong năm",
    scope: "Nguyệt vận đọc tháng âm dương chọn, xem sao lưu nguyệt và tác động ngắn trên các ô liên quan.",
    apiHint: [
      "Tháng xem (âm / dương theo cài đặt).",
      "Luận cung nhận ảnh hưởng trọng điểm trong tháng.",
    ],
  },
  "nhat-van": {
    title: "Nhật vận",
    kicker: "Ngày cụ thể",
    scope: "Nhật vận dùng cho một ngày — chọn việc, xuất hành hoặc đối chiếu biến động ngắn trên lá.",
    apiHint: [
      "Ngày dương lịch + giờ (nếu có) neo vào can chi ngày.",
      "Gợi ô và sao nhận xung, cát, khắc trong phiên.",
    ],
  },
  "chuyen-de": {
    title: "Chuyên đề",
    kicker: "Đào sâu có cấu trúc",
    scope:
      "Mục chuyên đề dự kiến gom các chủ đề luận tách riêng: cách cục, sao hãm đắc, tổ hợp đặc thù, đối chiếu Đại / Tiểu / Nguyệt.",
    apiHint: [
      "Mẫu chủ đề và khóa dữ liệu lấy từ lá đã ghi.",
      "Lớp trích dẫn luận để đối chiếu khi cần.",
    ],
  },
};

export function TuViScheduleLayerPlaceholder({ layer, onGoLaSo, className = "" }: Props) {
  const m = LAYER_META[layer];
  return (
    <section
      className={`mx-auto max-w-2xl rounded-xl border border-[#d4af37]/18 bg-[linear-gradient(165deg,rgba(16,22,38,0.9),rgba(6,8,16,0.94))] p-6 shadow-[inset_0_1px_0_rgba(212,175,55,0.08)] sm:p-8 ${className}`}
      aria-labelledby={`tuvi-placeholder-${layer}-h`}
    >
      <p className="font-ctkp-serif text-[10px] uppercase tracking-[0.32em] text-[#d4af37]/72">{m.kicker}</p>
      <h2 id={`tuvi-placeholder-${layer}-h`} className="ctkp-tuvi-text-title-soft mt-2 font-ctkp-serif text-xl tracking-[0.06em]">
        {m.title}
      </h2>
      <p className="mt-4 font-sans text-sm leading-relaxed text-slate-300">{m.scope}</p>

      <div className="mt-6 rounded-lg border border-amber-800/35 bg-amber-950/15 px-4 py-3">
        <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.14em] text-amber-200/95">Trạng thái phiên bản</p>
        <p className="mt-2 font-sans text-[13px] leading-relaxed text-amber-100/88">
          Mục «{m.title}» trong bản beta này chưa hiển thị bảng vận chi tiết — chúng tôi không dùng số liệu minh hoạ. Khi
          tính năng sẵn sàng, phần này sẽ hiển thị lưới vận và luận gắn với lá bạn đã ghi.
        </p>
      </div>

      <div className="mt-6 border-t border-[#d4af37]/12 pt-5">
        <h3 className="font-ctkp-serif text-[11px] uppercase tracking-[0.18em] text-[#d4af37]/68">Gợi ý đọc khi chưa có bảng vận</h3>
        <ul className="mt-3 list-none space-y-2 font-sans text-[13px] leading-relaxed text-slate-400">
          {m.apiHint.map((line, i) => (
            <li key={i} className="flex gap-2">
              <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-[#d4af37]/45" aria-hidden />
              <span>{line}</span>
            </li>
          ))}
        </ul>
      </div>

      <p className="mt-8 font-sans text-[12px] leading-relaxed text-slate-500">
        Trong lúc chờ, bạn có thể xem lưới và luận theo từng cung ở tab{" "}
        {onGoLaSo ?
          <button
            type="button"
            onClick={onGoLaSo}
            className="font-ctkp-serif text-[#e8d9a8] underline underline-offset-2 decoration-[#d4af37]/45 hover:decoration-[#d4af37]/65"
          >
            Lá số
          </button>
        : <span className="text-[#e8d9a8]/92">Lá số</span>}
        {" "}hoặc luận theo ô ở tab <span className="text-[#e8d9a8]/92">Luận cung</span>.
      </p>
    </section>
  );
}