'use client'

import { Lock, Radio } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ADMIN, AGENT } from '@/lib/agent-brand'

export function AdminShell({
  children,
  onLogout,
}: {
  children: React.ReactNode
  onLogout?: () => void
}) {
  return (
    <div className="min-h-screen bg-[#f5f4f1] text-stone-800">
      <header className="sticky top-0 z-40 border-b border-stone-200/80 bg-[#f5f4f1]/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
          <div className="flex min-w-0 items-center gap-3">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-stone-900 text-sm font-semibold text-white">
              {AGENT.firstName.charAt(0)}
              {AGENT.name.split(' ')[1]?.charAt(0) ?? ''}
            </div>
            <div className="min-w-0">
              <p className="truncate text-sm font-semibold text-stone-900">{ADMIN.title}</p>
              <p className="truncate text-xs text-stone-500">{ADMIN.subtitle}</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <span className="hidden items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[11px] font-medium text-emerald-800 sm:inline-flex">
              <Radio className="h-3 w-3" />
              Live
            </span>
            {onLogout ? (
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={onLogout}
                className="h-9 border-stone-300 bg-white text-xs text-stone-700 hover:bg-stone-50"
              >
                <Lock className="mr-1.5 h-3.5 w-3.5" />
                Sign out
              </Button>
            ) : null}
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-6xl space-y-4 px-4 py-5 sm:px-6 sm:py-6">{children}</main>
    </div>
  )
}