import { define } from '@because/forge'
import { theme } from '../themes'

export const Layout = define('Layout', {
  display: 'flex',
  height: '100vh',
  fontFamily: theme('fonts-sans'),
  background: theme('colors-bg'),
  color: theme('colors-text'),
})

export const Sidebar = define('Sidebar', {
  width: 220,
  borderRight: `1px solid ${theme('colors-border')}`,
  display: 'flex',
  flexDirection: 'column',
  flexShrink: 0,
})

export const Logo = define('Logo', {
  height: 64,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '0 16px',
  fontSize: 20,
  fontWeight: 'bold',
  borderBottom: `1px solid ${theme('colors-border')}`,
})

export const LogoLink = define('LogoLink', {
  cursor: 'pointer',
  borderRadius: theme('radius-md'),
  padding: '4px 8px',
  margin: '-4px -8px',
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
    },
  },
})

export const HamburgerButton = define('HamburgerButton', {
  base: 'button',
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  padding: 4,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  gap: 4,
  selectors: {
    '&:hover span': { background: theme('colors-text') },
  },
})

export const HamburgerLine = define('HamburgerLine', {
  width: 18,
  height: 2,
  background: theme('colors-textMuted'),
  borderRadius: 1,
  transition: 'background 0.15s',
})

export const SectionLabel = define('SectionLabel', {
  padding: '16px 16px 8px',
  fontSize: 12,
  fontWeight: 600,
  color: theme('colors-textFaint'),
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
})

export const SectionSwitcher = define('SectionSwitcher', {
  display: 'flex',
  gap: 0,
  padding: '12px 16px',
  borderBottom: `1px solid ${theme('colors-border')}`,
})

export const SectionTab = define('SectionTab', {
  base: 'button',
  flex: 1,
  padding: '6px 12px',
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  fontSize: 12,
  fontWeight: 600,
  color: theme('colors-textMuted'),
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
  borderRadius: theme('radius-md'),
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
      color: theme('colors-text'),
    },
  },
  variants: {
    active: {
      background: theme('colors-bgSelected'),
      color: theme('colors-text'),
    },
  },
})

export const AppList = define('AppList', {
  flex: 1,
  overflow: 'auto',
})

export const AppItem = define('AppItem', {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  gap: 8,
  padding: '8px 16px',
  color: theme('colors-textMuted'),
  textDecoration: 'none',
  fontSize: 14,
  cursor: 'pointer',
  selectors: {
    '&:hover': { background: theme('colors-bgHover'), color: theme('colors-text') },
  },
  variants: {
    selected: { background: theme('colors-bgSelected'), color: theme('colors-text'), fontWeight: 500 },
  },
})

export const SidebarFooter = define('SidebarFooter', {
  padding: 16,
  borderTop: `1px solid ${theme('colors-border')}`,
})

export const Main = define('Main', {
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
})

export const MainHeader = define('MainHeader', {
  height: 64,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '0 24px',
  borderBottom: `1px solid ${theme('colors-border')}`,
})

export const MainTitle = define('MainTitle', {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  fontSize: 20,
  fontWeight: 600,
  margin: 0,
})

export const AppSelectorChevron = define('AppSelectorChevron', {
  base: 'button',
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  padding: '4px 8px',
  marginLeft: 4,
  fontSize: 14,
  color: theme('colors-textMuted'),
  selectors: {
    '&:hover': { color: theme('colors-text') },
  },
})

export const ClickableAppName = define('ClickableAppName', {
  cursor: 'pointer',
  borderRadius: theme('radius-md'),
  padding: '2px 6px',
  margin: '-2px -6px',
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
    },
  },
})

export const HeaderActions = define('HeaderActions', {
  display: 'flex',
  gap: 8,
})

export const MainContent = define('MainContent', {
  flex: 1,
  padding: '10px 24px',
  overflow: 'auto',
})

export const DashboardContainer = define('DashboardContainer', {
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 40,
  gap: 40,
})

export const DashboardHeader = define('DashboardHeader', {
  textAlign: 'center',
})

export const DashboardTitle = define('DashboardTitle', {
  fontSize: 48,
  fontWeight: 'bold',
  margin: 0,
  marginBottom: 8,
})

export const DashboardSubtitle = define('DashboardSubtitle', {
  fontSize: 16,
  color: theme('colors-textMuted'),
  margin: 0,
})

export const StatsGrid = define('StatsGrid', {
  display: 'flex',
  gap: 24,
})

export const StatCard = define('StatCard', {
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  padding: '24px 40px',
  textAlign: 'center',
  minWidth: 120,
})

export const StatValue = define('StatValue', {
  fontSize: 36,
  fontWeight: 'bold',
  color: theme('colors-text'),
  marginBottom: 4,
})

export const StatLabel = define('StatLabel', {
  fontSize: 14,
  color: theme('colors-textMuted'),
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
})