'use client'

import Image from 'next/image'
import Link from 'next/link'

export function WorkReviewHeader({
  name,
  avatar,
  secondaryAction,
  primaryAction,
  wide = false,
}: {
  name: string
  avatar?: string | null
  secondaryAction?: {
    label: string
    onClick: () => void
    icon: 'add' | 'back'
  }
  primaryAction?: {
    label: string
    onClick: () => void
    icon: 'add' | 'back'
  }
  wide?: boolean
}) {
  const initials = name.trim().slice(0, 2) || '我'

  return (
    <header className="sticky top-0 z-30 bg-[#1f2937] text-white shadow-sm">
      <div className={`mx-auto flex min-h-[64px] w-full flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3 sm:flex-nowrap sm:px-6 ${wide ? 'max-w-[1600px]' : 'max-w-[1280px]'}`}>
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-white/15 bg-white/15 text-[12px] font-bold">
            {avatar ? (
              <Image
                src={avatar}
                alt={name}
                width={36}
                height={36}
                unoptimized
                className="h-full w-full object-cover"
              />
            ) : initials}
          </div>
          <div className="min-w-0">
            <div className="truncate text-[16px] font-bold">作品过稿看板</div>
            <div className="truncate text-[11px] font-medium text-white/65">{name}</div>
          </div>
        </div>

        <div className={`flex shrink-0 items-center gap-2 ${secondaryAction ? 'w-full sm:w-auto' : ''}`}>
          {secondaryAction && (
            <button
              type="button"
              onClick={secondaryAction.onClick}
              className="inline-flex min-h-10 flex-1 items-center justify-center rounded bg-[#0050cb] px-3 text-[12px] font-bold text-white transition-colors hover:bg-[#003fa3] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#1f2937] sm:min-h-9 sm:flex-none sm:px-4 sm:text-[13px]"
            >
              <span className="mr-1 text-[17px] font-light leading-none" aria-hidden="true">
                {secondaryAction.icon === 'add' ? '＋' : '←'}
              </span>
              {secondaryAction.label}
            </button>
          )}
          {primaryAction && (
            <button
              type="button"
              onClick={primaryAction.onClick}
              className={`inline-flex items-center justify-center rounded px-3 text-[12px] font-bold text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#1f2937] sm:min-h-9 sm:px-4 sm:text-[13px] ${
                secondaryAction
                  ? 'min-h-10 flex-1 border border-white/25 bg-white/10 hover:bg-white/15 sm:flex-none'
                  : 'min-h-9 bg-[#0050cb] hover:bg-[#003fa3]'
              }`}
            >
              <span className="mr-1 text-[17px] font-light leading-none" aria-hidden="true">
                {primaryAction.icon === 'add' ? '＋' : '←'}
              </span>
              {primaryAction.label}
            </button>
          )}
          <Link
            href="/"
            target="_top"
            className="inline-flex min-h-10 items-center justify-center rounded px-2 text-[12px] font-semibold text-white/80 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white sm:min-h-9 sm:px-3 sm:text-[13px]"
          >
            返回品牌中心
          </Link>
        </div>
      </div>
    </header>
  )
}