import { NavLink } from 'react-router-dom'
import { CalendarClock, Settings, LogOut } from 'lucide-react'
import { can } from '../types'
import type { User } from '../types'
import { useFrameViewport } from '../hooks/useFrameViewport'

interface Props {
  user: User
  children: React.ReactNode
}

export function Layout({ user, children }: Props) {
  useFrameViewport('desktop')

  async function logout() {
    await fetch('/hk-planner/api/auth/logout', { method: 'POST', credentials: 'include' })
    window.location.reload()
  }

  return (
    <div style={{ display: 'flex', height: '100dvh', overflow: 'hidden' }}>
      <nav style={{
        width: '200px', flexShrink: 0, background: 'var(--navy)',
        display: 'flex', flexDirection: 'column', padding: '1rem 0',
        borderRight: '1px solid var(--surface-2)',
      }}>
        <div style={{ padding: '0 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <CalendarClock size={20} strokeWidth={1.75} color="#74c69d" />
            <span style={{ color: '#74c69d', fontWeight: 700, fontSize: '0.95rem' }}>HK Planner</span>
          </div>
        </div>

        <div className="nav-scroll" style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
          <NavItem to="/planner" icon={CalendarClock} label="Planner" />
          {can(user, 'settings') && <NavItem to="/settings" icon={Settings} label="Settings" />}
        </div>

        <div style={{ padding: '0.75rem 1rem', borderTop: '1px solid var(--surface-2)' }}>
          <div style={{ marginBottom: '0.5rem' }}>
            <div style={{ color: 'var(--text)', fontSize: '0.8rem', fontWeight: 600 }}>{user.name}</div>
            <div style={{ color: 'var(--text-muted)', fontSize: '0.72rem' }}>{user.email}</div>
          </div>
          <button onClick={logout} style={{
            display: 'flex', alignItems: 'center', gap: '0.5rem',
            background: 'none', border: 'none', color: 'var(--text-muted)',
            fontSize: '0.8rem', padding: '0.375rem 0', width: '100%', cursor: 'pointer',
          }}>
            <LogOut size={14} strokeWidth={1.75} />
            Sign out
          </button>
        </div>
      </nav>

      <main style={{ flex: 1, overflow: 'auto', background: 'var(--body-bg)' }}>
        {children}
      </main>
    </div>
  )
}

function NavItem({ to, icon: Icon, label }: { to: string; icon: typeof CalendarClock; label: string }) {
  return (
    <NavLink to={to} style={({ isActive }) => ({
      display: 'flex', alignItems: 'center', gap: '0.625rem',
      padding: '0.625rem 1rem', textDecoration: 'none',
      color: isActive ? '#74c69d' : 'var(--text)',
      background: isActive ? 'var(--surface)' : 'transparent',
      borderLeft: isActive ? '2px solid #74c69d' : '2px solid transparent',
      fontSize: '0.875rem', transition: 'background 0.15s',
    })}>
      <Icon size={15} strokeWidth={1.75} />
      {label}
    </NavLink>
  )
}
