import Link from "next/link";
import type { ReactNode } from "react";

type Props = {
  title: string;
  /** Mặc định: «Lá số Tử Vi» */
  kicker?: string;
  /** Dòng phụ dưới tiêu đề (ví dụ hướng dẫn tab Luận cung) */
  subtitle?: string;
  onDeepDive?: () => void;
  /** Nút/bổ sung bên phải (vd. Xuất PDF) */
  trailingActions?: ReactNode;
  /** Mặc định: `/fortune/history` · «Nhật ký». Đặt `null` để ẩn nút. */
  journalLink?: { href: string; label: string } | null;
  className?: string;
};

const btnBase =
  "inline-flex items-center justify-center rounded-md border px-3 py-2 font-ctkp-serif text-[11px] tracking-[0.12em] transition-[background-color,border-color,box-shadow,color] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/35";

export function TuViChartTitleBar({
  title,
  kicker = "Lá số Tử Vi",
  subtitle,
  onDeepDive,
  trailingActions,
  journalLink,
  className = "",
}: Props) {
  const j = journalLink === undefined ? { href: "/fortune/history", label: "Nhật ký" } : journalLink;
  return (
    <header
      className={`flex flex-col gap-4 border-b border-[#d4af37]/12 pb-4 sm:flex-row sm:items-end sm:justify-between ${className}`}
    >
      <div className="min-w-0 text-center sm:max-w-2xl sm:text-left">
        <p className="font-ctkp-serif text-[10px] font-normal uppercase tracking-[0.38em] text-[#d4af37]/75">
          {kicker}
        </p>
        <h1 className="ctkp-tuvi-text-title-soft mt-2.5 font-ctkp-serif text-xl font-normal leading-snug tracking-[0.05em] sm:text-2xl">
          {title}
        </h1>
        {subtitle ?
          <p className="mt-2 max-w-prose font-sans text-[12px] leading-relaxed text-slate-400 sm:text-[13px]">
            {subtitle}
          </p>
        : null}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2 sm:justify-end">
        <Link
          href="/tu-vi"
          className={`${btnBase} border-[#d4af37]/28 bg-[#0c1020]/80 text-[#e8d9a8] hover:border-[#d4af37]/45 hover:bg-[#141b2e]/90`}
        >
          Ghi lá mới
        </Link>
        {j ?
          <Link
            href={j.href}
            className={`${btnBase} border-stone-600/45 bg-[#06080f]/70 text-stone-300 hover:border-[#d4af37]/28 hover:text-[#f5e6c8]`}
          >
            {j.label}
          </Link>
        : null}
        {onDeepDive ?
          <button
            type="button"
            onClick={onDeepDive}
            className={`${btnBase} border-[#d4af37]/42 bg-[#d4af37]/12 text-[#f5e6bc] shadow-[inset_0_1px_0_rgba(212,175,55,0.15)] hover:border-[#d4af37]/55 hover:bg-[#d4af37]/18`}
          >
            Luận sâu
          </button>
        : null}
        {trailingActions}
      </div>
    </header>
  );
}