'use client'
import React, { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { R42Button } from '@/components/r42/R42Button'
import { R42Drawer } from '@/components/r42/R42Drawer'
import { ToastProvider } from '@/components/ui/Toast'
import { getAuthUser } from '@/lib/auth'

const NAV_ITEMS = [
  { href: '/app', label: 'Session', icon: '▶' },
  { href: '/app/library', label: 'Library', icon: '📚' },
  { href: '/app/profile', label: 'Profile', icon: '👤' },
]

export default function AppLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [r42Open, setR42Open] = useState(false)
  const user = getAuthUser()

  return (
    <ToastProvider>
      <div
        style={{
          minHeight: '100dvh',
          display: 'flex',
          flexDirection: 'column',
          background: 'var(--bg)',
          paddingBottom: 'var(--nav-height)',
        }}
      >
        {/* Main content */}
        <main style={{ flex: 1, padding: 'var(--s-4)', maxWidth: '640px', margin: '0 auto', width: '100%' }}>
          {children}
        </main>

        {/* R42 floating button */}
        <R42Button onClick={() => setR42Open(true)} />

        {/* R42 drawer */}
        <R42Drawer
          open={r42Open}
          onClose={() => setR42Open(false)}
          userId={user?.id ?? ''}
        />

        {/* Bottom navigation */}
        <nav
          style={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            height: 'var(--nav-height)',
            background: 'var(--bg)',
            borderTop: '1px solid var(--cream)',
            display: 'flex',
            zIndex: 150,
          }}
        >
          {NAV_ITEMS.map((item) => {
            const active =
              item.href === '/app'
                ? pathname === '/app' || pathname === '/app/'
                : pathname.startsWith(item.href)

            return (
              <Link
                key={item.href}
                href={item.href}
                style={{
                  flex: 1,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '2px',
                  textDecoration: 'none',
                  color: active ? 'var(--accent)' : 'var(--fg-muted)',
                  fontSize: '20px',
                  minHeight: '44px',
                  transition: 'color 150ms',
                }}
              >
                <span>{item.icon}</span>
                <span
                  style={{
                    fontSize: 'var(--t-label)',
                    fontFamily: 'var(--font-mono)',
                    textTransform: 'uppercase',
                    letterSpacing: 'var(--label-ls)',
                    fontWeight: active ? 700 : 400,
                  }}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
        </nav>
      </div>
    </ToastProvider>
  )
}
