import type { ReactNode } from 'react'
import { cn } from '@/lib/cn'

// PageHeader (ui) — standard page header for the Văn phòng số (E-Office) module,
// PURO-style: accent-tinted icon-chip + title + actions slot. Richer than the
// constrained @/components/PageHeader ({title,description,actions}); this one
// adds eyebrow / icon / accent / breadcrumb for module landing pages.
//
// Visual idiom copied from pages/hrm/EmployeesListPage.tsx: the ACCENT map
// recolours the icon-chip (via --chip-bg / --chip-fg) and the heading. Accent
// palettes (teal/violet/amberx/greenx) ship stops 50/100/500/600/700 ONLY — no
// -800 — so headings use -700 (brand uses brand-800, which DOES exist). Using a
// non-existent stop would silently emit no class in Tailwind v4.
//
// gotcha 66: index.css has `h1,h2,h3,h4 { color:#0b1220 }` OUTSIDE @layer, which
// in Tailwind v4 beats `text-white`. There is no dark background in THIS header
// (it sits on the light page), so the title uses the accent ink directly. Any
// heading placed on a dark/gradient surface must use `text-white!`.
export type Accent = 'brand' | 'teal' | 'violet' | 'amberx' | 'greenx'

type AccentTokens = { chipBg: string; chipFg: string; head: string }

const ACCENT: Record<Accent, AccentTokens> = {
  brand: { chipBg: 'var(--color-brand-50)', chipFg: 'var(--color-brand-600)', head: 'text-brand-800' },
  teal: { chipBg: 'var(--color-teal-50)', chipFg: 'var(--color-teal-700)', head: 'text-teal-700' },
  violet: { chipBg: 'var(--color-violet-50)', chipFg: 'var(--color-violet-700)', head: 'text-violet-700' },
  amberx: { chipBg: 'var(--color-amberx-50)', chipFg: 'var(--color-amberx-700)', head: 'text-amberx-700' },
  greenx: { chipBg: 'var(--color-greenx-50)', chipFg: 'var(--color-greenx-700)', head: 'text-greenx-700' },
}

export function PageHeader({
  eyebrow,
  title,
  subtitle,
  icon,
  accent = 'brand',
  actions,
  breadcrumb,
  className,
}: {
  /** Optional uppercase kicker rendered above the title (.label-eyebrow). */
  eyebrow?: string
  /** Page title. */
  title: string
  /** Optional one-line description rendered below the title. */
  subtitle?: string
  /** Optional lucide icon node, shown inside the accent-tinted chip. */
  icon?: ReactNode
  /** Accent colour for the chip + title (default brand). */
  accent?: Accent
  /** Optional right-aligned actions slot (buttons, filters…). */
  actions?: ReactNode
  /** Optional breadcrumb node rendered above the whole header row. */
  breadcrumb?: ReactNode
  className?: string
}) {
  const a = ACCENT[accent]
  return (
    <div className={cn('mb-5 border-b border-slate-200 pb-3.5', className)}>
      {breadcrumb && <div className="mb-2 text-xs text-slate-500">{breadcrumb}</div>}
      <div className="flex items-start justify-between gap-6">
        <div className="flex min-w-0 items-start gap-3">
          {icon && (
            <span
              className="icon-chip mt-0.5 shrink-0"
              style={{ ['--chip-bg' as string]: a.chipBg, ['--chip-fg' as string]: a.chipFg }}
              aria-hidden
            >
              {icon}
            </span>
          )}
          <div className="min-w-0">
            {eyebrow && <div className="label-eyebrow mb-1">{eyebrow}</div>}
            <h1 className={cn('text-xl font-bold leading-tight tracking-tight', a.head)}>{title}</h1>
            {subtitle && <p className="mt-1 text-[13px] leading-relaxed text-slate-500">{subtitle}</p>}
          </div>
        </div>
        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
      </div>
    </div>
  )
}
