'use client';

import { CommandRegistryProvider } from '@bytelyst/command-palette';
import { SidebarNav } from '@/components/sidebar-nav';
import { AuthGuard } from '@/components/auth-guard';
import { CommandMenu } from '@/components/command-menu';
import { ErrorBoundary } from '@/components/error-boundary';
import { useStripeConfig } from '@/lib/stripe-context';
import { FlaskConical, ShieldCheck } from 'lucide-react';

function StripeModeBanner() {
  const { mode, isLive } = useStripeConfig();
  if (mode === null) return null;

  if (isLive) {
    return (
      <div className="bg-emerald-600 text-white text-xs font-semibold text-center py-1.5 px-4 flex items-center justify-center gap-2">
        <ShieldCheck className="h-3.5 w-3.5" />
        STRIPE LIVE MODE — Real payments active
      </div>
    );
  }

  return (
    <div className="bg-amber-400 text-amber-950 text-xs font-semibold text-center py-1.5 px-4 flex items-center justify-center gap-2">
      <FlaskConical className="h-3.5 w-3.5" />
      {mode === 'test'
        ? 'STRIPE TEST MODE — No real charges, use test cards'
        : 'DEV MODE — Stripe not configured, payments disabled'}
    </div>
  );
}

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <AuthGuard>
      <CommandRegistryProvider>
        <SidebarNav />
        <main className="ml-64 min-h-screen bg-background max-md:ml-0">
          <StripeModeBanner />
          <div className="p-8 max-md:p-4">
            <ErrorBoundary>{children}</ErrorBoundary>
          </div>
        </main>
        <CommandMenu />
      </CommandRegistryProvider>
    </AuthGuard>
  );
}