'use client';

import type { ReactNode } from 'react';
import { useState } from 'react';
import Link from 'next/link';
import { Shield, Menu, X } from 'lucide-react';

import { NotificationBell } from '@/components/nav/NotificationBell';
import { ProfileDropdown } from '@/components/nav/ProfileDropdown';
import { Sidebar } from '@/components/nav/Sidebar';
import { WalletBalanceCard } from '@/components/wallet/WalletBalanceCard';
import { useAuth } from '@/hooks/useAuth';
import { getDisplayName } from '@/lib/utils';

export default function UserLayout({ children }: { children: ReactNode }) {
  const { user } = useAuth();
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <div className="min-h-screen bg-surface-sunken text-foreground">
      <div className="mx-auto flex max-w-[1440px]">
        <Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} onMobileOpen={() => setMobileOpen(true)} />
        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-40 border-b border-line bg-surface-overlay backdrop-blur-xl md:hidden">
            <div className="flex items-center justify-between gap-4 px-4 py-3">
              <button
                onClick={() => setMobileOpen(true)}
                className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white border border-white/10"
                aria-label="Open menu"
              >
                <Menu className="h-5 w-5" />
              </button>
              <div className="text-sm font-semibold text-ink">
                Welcome, {getDisplayName(user)}
              </div>
              <div className="w-9" />
            </div>
          </header>
          <header className="sticky top-0 z-40 hidden md:flex border-b border-line bg-surface-overlay backdrop-blur-xl">
            <div className="flex items-center justify-between gap-4 px-4 py-3">
              <div className="flex items-center gap-2">
                <Link href="/dashboard" className="flex items-center gap-2">
                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-indigo-600 text-white">
                    <Shield className="h-4 w-4" />
                  </div>
                </Link>
                <div className="text-sm font-semibold text-ink">
                  Welcome, {getDisplayName(user)}
                </div>
              </div>
              <div className="flex items-center gap-3">
                <WalletBalanceCard />
                <NotificationBell />
                <ProfileDropdown />
              </div>
            </div>
          </header>
          <main className="flex-1 p-4 md:p-6">{children}</main>
        </div>
      </div>
    </div>
  );
}