'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { ArrowLeft, ChevronUp, ChevronDown } from 'lucide-react'
import UserMenu from './user-menu'
import SyncIndicator from '@/components/offline/sync-indicator'
import OfflineSafeWrapper from '@/components/offline/offline-error-boundary'
import DateDisplay from './date-display'
import EnvBadge from './env-badge'
// eslint-disable-next-line boundaries/element-types -- ADR-010: Single-Tenant V1 (Constitution IV). Multi-Tenant-Composition-Registry kommt mit Phase 9 / Stage 7 (Brand-Components).
import BmwGroupLogoAuto from '@/lib/customers/bmw/branding/bmw-group-logo-auto' // allow-customer-string

interface Props {
  title: string
  subtitle?: string
  backHref?: string
  actions?: React.ReactNode
  userName: string
  userEmail: string
  avatarUrl: string | null
}

const STORAGE_KEY = 'topbar_collapsed'

export default function CollapsibleHeader({
  title,
  subtitle,
  backHref,
  actions,
  userName,
  userEmail,
  avatarUrl,
}: Props) {
  const [collapsed, setCollapsed] = useState(false)
  const [hydrated, setHydrated] = useState(false)

  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY)
    if (saved === 'true') setCollapsed(true)
    setHydrated(true)
  }, [])

  useEffect(() => {
    if (hydrated) localStorage.setItem(STORAGE_KEY, String(collapsed))
  }, [collapsed, hydrated])

  return (
    <>
      <header
        className={`sticky top-0 z-10 bg-card text-foreground border-b border-border transition-all duration-200 ease-out ${
          collapsed ? 'h-12 opacity-100 px-3 py-2 overflow-visible' : 'opacity-100 px-4 py-3 overflow-visible'
        }`}
      >
        <div className="flex items-center gap-3">
          {backHref ? (
            <Link href={backHref} className="text-foreground/70 hover:text-foreground shrink-0 transition-colors">
              <ArrowLeft size={20} />
            </Link>
          ) : (
            <Link
              href="/projektanlage"
              className={`flex items-center shrink-0 hover:opacity-80 transition-opacity ${collapsed ? 'gap-2' : 'gap-6 mr-4'}`}
              aria-label="SupplierPulse Home"
            >
              <BmwGroupLogoAuto brand="bmw" size={collapsed ? 'sm' : 'md'} priority /> {/* // allow-customer-string */}
              {!collapsed && (
                <span className="hidden md:inline font-display font-semibold text-base tracking-tight text-foreground">
                  SupplierPulse
                </span>
              )}
            </Link>
          )}

          {!backHref && !collapsed && (
            <EnvBadge env={process.env.NEXT_PUBLIC_VERCEL_ENV ?? process.env.NODE_ENV} />
          )}

          {!collapsed && (
            <>
              <div className="flex-1 min-w-0">
                <h1 className="font-semibold truncate leading-tight font-display">{title}</h1>
                {subtitle && <p className="text-xs text-muted-foreground truncate">{subtitle}</p>}
              </div>

              {actions && <div className="shrink-0">{actions}</div>}
              <DateDisplay />
              <OfflineSafeWrapper>
                <SyncIndicator />
              </OfflineSafeWrapper>
              <UserMenu name={userName} email={userEmail} avatarUrl={avatarUrl} />
            </>
          )}

          {collapsed && <div className="flex-1" />}

          <button
            onClick={() => setCollapsed(c => !c)}
            className="text-foreground/70 hover:text-foreground shrink-0 p-1 rounded-sm hover:bg-muted transition-colors"
            title={collapsed ? 'Header ausklappen' : 'Header einklappen'}
            aria-label={collapsed ? 'Header ausklappen' : 'Header einklappen'}
          >
            {collapsed ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
          </button>
        </div>
      </header>


    </>
  )
}