// src/components/ui/ProfilePageHeader.jsx
// A specialised page header for entity detail pages featuring a profile photo,
// name, subtitle, and optional action buttons.
//
// Two named exports:
//   ProfilePageHeader        — photo + title + subtitle (no actions)
//   ProfilePageHeaderActions — photo + title + subtitle + action buttons slot
//
// Props (both variants):
//   name         — string (required) — primary heading
//   subtitle     — string | ReactNode — muted line below the name
//   photoUrl     — string — src for the photo; falls back to initials avatar
//   breadcrumbs  — Array<{ label: string, href?: string }> — trail above the header
//   onPhotoClick — () => void — if provided, the avatar becomes a click target
//   badge        — ReactNode — e.g. a <StatusBadge> rendered beside the name
//   className    — extra class on the root element
//
// Additional prop (ProfilePageHeaderActions only):
//   children     — ReactNode — action buttons rendered in the top-right slot

import { Link } from 'react-router-dom'

// ─── Shared avatar sub-component ─────────────────────────────────────────────

function Avatar({ name, photoUrl, onPhotoClick, size = 72 }) {
  const initial = (name || '?').charAt(0).toUpperCase()
  const clickable = typeof onPhotoClick === 'function'

  return (
    <div
      className={`profile-header-avatar${clickable ? ' profile-header-avatar--clickable' : ''}`}
      style={{ width: size, height: size, minWidth: size }}
      onClick={clickable ? onPhotoClick : undefined}
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') onPhotoClick() } : undefined}
      aria-label={clickable ? 'Change photo' : undefined}
    >
      {photoUrl ? (
        <img src={photoUrl} alt={name || 'Profile photo'} className="profile-header-avatar-img" />
      ) : (
        <span className="profile-header-avatar-initial">{initial}</span>
      )}
      {clickable && (
        <div className="profile-header-avatar-overlay" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" />
            <circle cx="12" cy="13" r="4" />
          </svg>
        </div>
      )}
    </div>
  )
}

// ─── Breadcrumb trail ─────────────────────────────────────────────────────────

function BreadcrumbTrail({ items }) {
  if (!items?.length) return null
  return (
    <nav aria-label="Breadcrumb" className="breadcrumbs" style={{ marginBottom: 'var(--space-3)' }}>
      {items.map((item, i) => {
        const isLast = i === items.length - 1
        return (
          <span key={i} className="contents">
            {i > 0 && <span className="breadcrumbs-sep" aria-hidden="true">/</span>}
            {isLast || !item.href ? (
              <span className="breadcrumbs-current" aria-current={isLast ? 'page' : undefined}>
                {item.label}
              </span>
            ) : (
              <Link to={item.href}>{item.label}</Link>
            )}
          </span>
        )
      })}
    </nav>
  )
}

// ─── Variant 1: no actions ────────────────────────────────────────────────────

export function ProfilePageHeader({
  name,
  subtitle,
  photoUrl,
  breadcrumbs,
  onPhotoClick,
  badge,
  className = '',
}) {
  return (
    <header className={`profile-header ${className}`}>
      {breadcrumbs?.length > 0 && <BreadcrumbTrail items={breadcrumbs} />}
      <div className="profile-header-inner">
        <Avatar name={name} photoUrl={photoUrl} onPhotoClick={onPhotoClick} />
        <div className="profile-header-text">
          <div className="profile-header-name-row">
            <h1 className="profile-header-name">{name || 'Unnamed'}</h1>
            {badge && <div className="profile-header-badge">{badge}</div>}
          </div>
          {subtitle && <p className="profile-header-subtitle">{subtitle}</p>}
        </div>
      </div>
    </header>
  )
}

// ─── Variant 2: with actions ──────────────────────────────────────────────────

export function ProfilePageHeaderActions({
  name,
  subtitle,
  photoUrl,
  breadcrumbs,
  onPhotoClick,
  badge,
  className = '',
  children,
}) {
  return (
    <header className={`profile-header ${className}`}>
      {breadcrumbs?.length > 0 && <BreadcrumbTrail items={breadcrumbs} />}
      <div className="profile-header-inner profile-header-inner--with-actions">
        {/* Left: avatar + text */}
        <div className="profile-header-left">
          <Avatar name={name} photoUrl={photoUrl} onPhotoClick={onPhotoClick} />
          <div className="profile-header-text">
            <div className="profile-header-name-row">
              <h1 className="profile-header-name">{name || 'Unnamed'}</h1>
              {badge && <div className="profile-header-badge">{badge}</div>}
            </div>
            {subtitle && <p className="profile-header-subtitle">{subtitle}</p>}
          </div>
        </div>
        {/* Right: action buttons */}
        {children && (
          <div className="profile-header-actions">{children}</div>
        )}
      </div>
    </header>
  )
}

// Default export is the actions variant (most commonly needed)
export default ProfilePageHeaderActions
