'use client';

import Image from 'next/image';
import Link from 'next/link';
import { signOut } from 'next-auth/react';
import { ExternalLink, LogOut } from 'lucide-react';
import { BrandName } from '@/components/ui/brand-name';
import type { Locale } from '@/i18n/config';

// Minimal admin top bar: logo + brand, a back-to-site link and logout.
// Kept deliberately bare — admin chrome only, no public nav.
export function AdminTopBar({ locale, loggedIn }: { locale: Locale; loggedIn: boolean }) {
  return (
    <header className="sticky top-0 z-40 border-b border-graphite-800/10 bg-white/95 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-screen-2xl items-center justify-between gap-4 px-6">
        <Link
          href={`/${locale}/admin`}
          className="flex items-center gap-2.5 font-display text-base font-semibold"
        >
          <Image
            src="/images/logo-square.jpg"
            alt="Logo TechnoSolaire-Nord"
            width={32}
            height={32}
            className="h-8 w-8 rounded-full object-cover ring-2 ring-copper-500/25"
          />
          <BrandName className="text-graphite-950" accentClass="text-copper-600" />
        </Link>

        <div className="flex items-center gap-4">
          <Link
            href={`/${locale}`}
            className="inline-flex items-center gap-1.5 text-sm text-graphite-900/60 hover:text-graphite-950"
          >
            <ExternalLink className="h-4 w-4" aria-hidden="true" />
            {locale === 'ar' ? 'عرض الموقع' : 'Voir le site'}
          </Link>
          {loggedIn && (
            <button
              onClick={() => signOut()}
              className="inline-flex items-center gap-1.5 rounded-full bg-copper-500 px-4 py-2 text-sm font-semibold text-graphite-950 transition-colors hover:bg-copper-400"
            >
              <LogOut className="h-4 w-4" aria-hidden="true" />
              {locale === 'ar' ? 'تسجيل الخروج' : 'Déconnexion'}
            </button>
          )}
        </div>
      </div>
    </header>
  );
}