import { type ReactNode } from 'react'
import { Logo } from '@/components'
import { useMeQuery } from '@/apis'
import { cn } from '@/lib'

// 좌측 폭: list=반응형 비율 / chat=고정폭 단계 축소
const SIDEBAR_WIDTH = {
  list:
    'w-[20%] max-w-[320px] ' +
    'max-[1520px]:w-[23%] max-[1410px]:w-[25%] ' +
    'max-[1180px]:w-[27%] max-[1024px]:w-[29%] max-[960px]:w-[33%]',
  chat: 'w-[300px] max-[1350px]:w-[284px] max-[1180px]:w-[260px]',
} as const

const styles = {
  root: 'flex w-full min-h-[100dvh] max-h-[100dvh] bg-background safe-x',
  scrollX: 'flex w-full min-h-[100dvh] max-h-[100dvh] overflow-x-auto overflow-y-hidden safe-x',
  scrollXInner: 'flex w-full min-h-[100dvh] max-h-[100dvh] min-w-[1024px] bg-background',
  // 좌측 레일은 lg 미만에서 숨기고(드로어로 대체), main 이 전체 폭을 차지한다. 보고서식 풀블리드 + 경계선.
  sidebar: 'hidden lg:flex flex-col h-[100dvh] bg-white border-r border-border',
  logoHeader:
    'flex w-full h-[56px] pl-[24px] pr-[16px] items-center justify-between shrink-0 border-b border-border',
  main: 'flex flex-1 flex-col h-[100dvh] overflow-hidden',
  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden bg-surface',
} as const

export type SidebarWidth = keyof typeof SIDEBAR_WIDTH

export interface MainLayoutProps {
  sidebarWidth?: SidebarWidth
  /** 루트 가로 스크롤 + 최소폭 (chat 전용) */
  scrollX?: boolean
  logoAction?: ReactNode
  sidebar: ReactNode
  header: ReactNode
  children?: ReactNode
}

export function MainLayout({
  sidebarWidth = 'list',
  scrollX = false,
  logoAction,
  sidebar,
  header,
  children,
}: MainLayoutProps) {
  const { data: user } = useMeQuery() // 회사 브랜딩(서비스명/로고) 주입
  const panes = (
    <>
      <aside className={cn(styles.sidebar, SIDEBAR_WIDTH[sidebarWidth])}>
        <div className={styles.logoHeader}>
          <Logo size="sm" serviceName={user?.branding?.service_name} logoUrl={user?.branding?.logo_url} />
          {logoAction}
        </div>
        {sidebar}
        <p className="mt-auto px-4 py-3 text-[10px] font-medium text-neutral-50">
          © {new Date().getFullYear()} negotium · Made by AI O2O
        </p>
      </aside>

      <main className={styles.main}>
        {header}
        <div className={styles.content}>{children}</div>
      </main>
    </>
  )

  if (!scrollX) {
    return <div className={styles.root}>{panes}</div>
  }

  return (
    <div className={styles.scrollX}>
      <div className={styles.scrollXInner}>{panes}</div>
    </div>
  )
}

export default MainLayout