'use client'

import { useState } from 'react'
{{#IF_DESIGN_FRAMER_MOTION}}
import { AnimatePresence, motion } from 'framer-motion'
{{/IF_DESIGN_FRAMER_MOTION}}
import { Sidebar } from './Sidebar'
// TODO: Import your auth provider and check authentication state
// import { useAuth } from '@/lib/auth'

/**
 * AppShell — Main layout wrapper
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 *
 * Provides: sidebar + top bar + main content area
 * Responsive: sidebar hidden on mobile, full on lg+
 */
export function AppShell({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  // TODO: Replace with your auth check
  const isAuthenticated = true

  if (!isAuthenticated) {
    // TODO: Return your landing/login page here
    return <>{children}</>
  }

  return (
    <div className="flex h-screen bg-design-bg text-design-fg overflow-hidden">
      {/* Desktop sidebar */}
      <div className="hidden lg:flex">
        <Sidebar />
      </div>

      {/* Mobile sidebar overlay */}
{{#IF_DESIGN_FRAMER_MOTION}}
      <AnimatePresence>
        {sidebarOpen && (
          <>
            <motion.div
              className="fixed inset-0 z-40 bg-black/50 lg:hidden"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setSidebarOpen(false)}
            />
            <motion.div
              className="fixed inset-y-0 left-0 z-50 lg:hidden"
              initial={{ x: '-100%' }}
              animate={{ x: 0 }}
              exit={{ x: '-100%' }}
              transition={{ type: 'spring', stiffness: {{DESIGN_SPRING_STIFFNESS}}, damping: {{DESIGN_SPRING_DAMPING}} }}
            >
              <Sidebar onClose={() => setSidebarOpen(false)} />
            </motion.div>
          </>
        )}
      </AnimatePresence>
{{/IF_DESIGN_FRAMER_MOTION}}
{{#IF_DESIGN_ANIMATIONS}}
      {!{{DESIGN_FRAMER_MOTION}} && sidebarOpen && (
        <>
          <div
            className="fixed inset-0 z-40 bg-black/50 lg:hidden design-transition"
            onClick={() => setSidebarOpen(false)}
          />
          <div className="fixed inset-y-0 left-0 z-50 lg:hidden design-transition">
            <Sidebar onClose={() => setSidebarOpen(false)} />
          </div>
        </>
      )}
{{/IF_DESIGN_ANIMATIONS}}

      {/* Main content */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Top bar */}
        <header className="flex h-14 items-center gap-4 border-b border-design-border bg-design-card px-4 lg:px-6">
          {/* Mobile menu button */}
          <button
            className="lg:hidden text-design-muted hover:text-design-fg design-transition"
            onClick={() => setSidebarOpen(true)}
            aria-label="Open sidebar"
          >
            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
          </button>

          <h1 className="text-lg font-semibold">{{DESIGN_APP_DISPLAY_NAME}}</h1>

          <div className="ml-auto flex items-center gap-3">
            {/* TODO: Add user menu, notifications, theme toggle here */}
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 overflow-y-auto p-4 lg:p-6">
{{#IF_DESIGN_FRAMER_MOTION}}
          <motion.div
            initial={{ opacity: 0, y: {{DESIGN_ENTRANCE_Y}} }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.2 }}
          >
            {children}
          </motion.div>
{{/IF_DESIGN_FRAMER_MOTION}}
{{#IF_DESIGN_ANIMATIONS}}
          <div className="design-animate-in">
            {children}
          </div>
{{/IF_DESIGN_ANIMATIONS}}
        </main>
      </div>
    </div>
  )
}