import { createElement } from 'react'
import { addons } from 'storybook/manager-api'
import { create } from 'storybook/theming'
import { decorateHanmacNavigation } from './manager-navigation.js'

// Match the measured Manager content background via its existing CSS variable.
// Keep mobile navigation, addon tabs,
// portalled menus and the preview iframe outside this toolbar scope.
const toolbarStyle = document.createElement('style')
toolbarStyle.id = 'hm-manager-toolbar-style'
toolbarStyle.textContent = `
  .sb-bar[data-testid="sb-preview-toolbar"] {
    background: var(--color-bg-content);
    color: #000000;
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
    color: inherit;
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
    background: rgba(0, 0, 0, 0.10);
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
    background: rgba(0, 0, 0, 0.20);
  }
  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
    outline-color: currentColor;
  }
`
document.head.appendChild(toolbarStyle)

// Sidebar display names only. Story titles, Story IDs and storySort stay English; items not listed keep item.name.
const koreanLabels = {
  foundation: '기본 요소',
  components: '컴포넌트',
  'components-form': '폼 요소',
  'components-navigation': '내비게이션',
  'components-overlay': '오버레이',
  'components-data-display': '데이터 표시',
  'components-disclosure': '영역 확장·조절',
  'components-search-date': '검색·날짜',
  'components-feedback': '알림·피드백',
  'components-form-button': '버튼',
  'components-form-input': '입력창',
  'components-form-textarea': '여러 줄 입력창',
  'components-form-select': '선택 목록',
  'components-form-checkbox': '체크박스',
  'components-form-radio-group': '라디오 버튼 그룹',
  'components-form-switch': '스위치',
  'components-form-slider': '슬라이더',
  'components-form-toggle': '토글 버튼',
  'components-navigation-tabs': '탭',
  'components-navigation-breadcrumb': '이동 경로',
  'components-navigation-pagination': '페이지네이션',
  'components-navigation-navigation-menu': '내비게이션 메뉴',
  'components-navigation-menubar': '메뉴바',
  'components-overlay-dialog': '대화상자',
  'components-overlay-alert-dialog': '확인·경고 대화상자',
  'components-overlay-sheet': '시트 패널',
  'components-overlay-drawer': '드로어',
  'components-overlay-dropdown-menu': '드롭다운 메뉴',
  'components-overlay-context-menu': '컨텍스트 메뉴',
  'components-overlay-popover': '팝오버',
  'components-overlay-tooltip': '툴팁',
  'components-overlay-hover-card': '호버 카드',
  'components-data-display-card': '카드',
  'components-data-display-table': '테이블',
  'components-data-display-badge': '배지',
  'components-data-display-avatar': '아바타',
  'components-data-display-progress': '진행률',
  'components-data-display-skeleton': '스켈레톤',
  'components-data-display-separator': '구분선',
  'components-data-display-aspect-ratio': '화면 비율',
  'components-data-display-carousel': '캐러셀',
  'components-data-display-scroll-area': '스크롤 영역',
  'components-disclosure-accordion': '아코디언',
  'components-disclosure-collapsible': '접기·펼치기',
  'components-disclosure-resizable': '크기 조절',
  'components-search-date-command': '명령어 검색',
  'components-search-date-combobox': '콤보박스',
  'components-search-date-calendar': '달력',
  'components-search-date-date-picker': '날짜 선택기',
  'components-feedback-alert': '알림 메시지',
  'components-feedback-sonner': '토스트 알림',
  patterns: 'UI 패턴',
  'patterns-data': '데이터 조회',
  'patterns-data-data-table': '데이터 테이블',
  'patterns-data-filter-bar': '필터 바',
  'patterns-layout': '화면 구성',
  'patterns-layout-gnb': '전체 메뉴 (GNB)',
  'patterns-layout-lnb': '좌측 메뉴 (LNB)',
  'patterns-layout-dashboard-layout': '대시보드',
  'patterns-layout-page-header': '페이지 헤더',
  sw: 'SW UI',
  'sw-header': '헤더',
  'sw-header--overview': 'SW 헤더',
  'sw-header--responsive-more': '화면 너비 대응',
  'sw-viewer--responsive': '화면 너비 대응',
  'sw-step-header--responsive': '화면 너비 대응',
  'sw-footer--responsive': '화면 너비 대응',
  'sw-viewer': '뷰어',
  'sw-viewer--viewer-header': '뷰어 헤더',
  'sw-step-header': '단계별',
  'sw-step-header--process-header': '단계별 헤더',
  'sw-popup': '팝업',
}

// A component with one visible Story is shown as that Story (`<component-id>--all`) under the component's name.
// A real Story named "All" under an expanded component keeps its own name.
const koreanLabel = (item) => {
  const hoisted = item.type === 'story' && item.name !== 'All' ? koreanLabels[item.id.replace(/--all$/, '')] : undefined
  return koreanLabels[item.id] ?? hoisted ?? item.name
}

addons.setConfig({
  layout: {
    showPanel: false,
    showToolbar: false,
    // LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again.
    navSize: 246,
    recentVisibleSizes: { navSize: 246 },
  },
  theme: create({
    base: 'light',
    brandTitle: '한맥 디자인 시스템',
    brandUrl: './',
    brandTarget: '_self',
    fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
    colorPrimary: '#123328',
    colorSecondary: '#123328',
    appBg: '#F5F0E5',
    appContentBg: '#FFFFFF',
    appPreviewBg: '#FFFFFF',
    textColor: '#123328',
    textInverseColor: '#FFFFFF',
    barSelectedColor: '#123328',
  }),
  sidebar: {
    renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, koreanLabel(item)),
  },
})

addons.register('hm/manager-navigation-style', decorateHanmacNavigation)