"use client"

import * as React from "react"
import { cn } from "../core/cn"

interface TabItem {
  label: string
  value: string
  icon?: React.ReactNode
  disabled?: boolean
}

interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  subtitle?: string
  actions?: React.ReactNode
  onBack?: () => void
  tabs?: TabItem[]
  activeTab?: string
  onTabChange?: (value: string) => void
  badge?: React.ReactNode
  sticky?: boolean
}

function PageHeader({
  title, subtitle, actions, onBack, tabs, activeTab, onTabChange,
  badge, sticky = false, className, ...props
}: PageHeaderProps) {
  return (
    <header
      data-slot="page-header"
      className={cn("space-y-4 border-b bg-background pb-4", sticky && "sticky top-0 z-20", className)}
      {...props}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3">
          {onBack && (
            <button onClick={onBack} className="mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-muted">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
            </button>
          )}
          <div className="space-y-1">
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
              {badge}
            </div>
            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
          </div>
        </div>
        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
      </div>
      {tabs && tabs.length > 0 && (
        <nav className="flex gap-4 border-b -mb-4 pb-0">
          {tabs.map((tab) => (
            <button
              key={tab.value}
              type="button"
              disabled={tab.disabled}
              onClick={() => onTabChange?.(tab.value)}
              className={cn(
                "inline-flex items-center gap-2 border-b-2 px-1 pb-3 text-sm font-medium transition-colors",
                activeTab === tab.value ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
                tab.disabled && "pointer-events-none opacity-50"
              )}
            >
              {tab.icon && <span className="size-4">{tab.icon}</span>}
              {tab.label}
            </button>
          ))}
        </nav>
      )}
    </header>
  )
}

interface SimplePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  description?: string
  children?: React.ReactNode
}

function SimplePageHeader({ title, description, children, className, ...props }: SimplePageHeaderProps) {
  return (
    <div className={cn("flex items-center justify-between border-b pb-4", className)} {...props}>
      <div className="space-y-1">
        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
        {description && <p className="text-sm text-muted-foreground">{description}</p>}
      </div>
      {children && <div className="flex items-center gap-2">{children}</div>}
    </div>
  )
}

export { PageHeader, SimplePageHeader }