import React from 'react'

export interface LayoutShellProps {
  children: React.ReactNode
  sidebar?: {
    logo?: React.ReactNode
    navigation: React.ReactNode
    user?: React.ReactNode
  }
  topbar?: {
    title?: string
    breadcrumb?: React.ReactNode
    search?: boolean
    notifications?: boolean
  }
  content?: {
    header?: React.ReactNode
  }
}

export const LayoutShell: React.FC<LayoutShellProps> = ({
  children,
  sidebar = {
    navigation: null,
    user: null,
  },
  topbar = {
    title: '',
    breadcrumb: null,
    search: true,
    notifications: true,
  },
  content = {
    header: null,
  },
}) => {
  return (
    <div className="flex h-screen bg-slate-50">
      {/* Sidebar */}
      <aside className="w-[220px] bg-slate-50 border-r border-slate-100 flex flex-col py-4 flex-shrink-0">
        {/* Logo */}
        <div className="px-4 mb-5 flex items-center gap-2.5">
          {sidebar.logo || (
            <>
              <div className="w-8 h-8 rounded-[10px] bg-gradient-to-br from-teal-400 to-teal-500 flex items-center justify-center">
                <span className="text-white text-sm font-black">CP</span>
              </div>
              <div>
                <div className="text-[13px] font-extrabold text-slate-900">Console</div>
                <div className="text-[9px] text-slate-400 font-semibold">Admin Panel</div>
              </div>
            </>
          )}
        </div>

        {/* Navigation */}
        <nav className="flex-1 px-2 overflow-y-auto">{sidebar.navigation}</nav>

        {/* User Profile */}
        <div className="px-2 border-t border-slate-100 pt-3">
          {sidebar.user || (
            <div className="flex items-center gap-2.5 px-3 py-2">
              <div className="w-7 h-7 rounded-lg bg-slate-200 flex items-center justify-center text-[11px] font-bold text-slate-500">
                사용자
              </div>
              <div>
                <div className="text-[11px] font-bold text-slate-900">사용자</div>
                <div className="text-[9px] text-slate-400">팀</div>
              </div>
            </div>
          )}
        </div>
      </aside>

      {/* Main Area */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Top Bar */}
        <header className="h-12 border-b border-slate-100 flex items-center justify-between px-6 bg-white flex-shrink-0">
          <div className="flex items-center gap-1.5 text-xs">
            {topbar.breadcrumb || (
              <div className="flex items-center gap-1.5 text-xs">
                <span className="text-slate-400">메인</span>
                <span className="text-slate-300">/</span>
                <span className="font-bold text-slate-900">{topbar.title || '대시보드'}</span>
              </div>
            )}
          </div>

          <div className="flex items-center gap-3">
            {topbar.search && (
              <div className="relative">
                <span className="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]">
                  search
                </span>
                <input
                  className="bg-slate-50 border border-slate-200 rounded-lg pl-8 pr-3 py-1.5 text-[11px] w-48 focus:ring-1 focus:ring-teal-500 outline-none"
                  placeholder="검색..."
                />
              </div>
            )}

            {topbar.notifications && (
              <div className="relative cursor-pointer">
                <span className="material-symbols-outlined text-slate-400 text-[20px] hover:text-slate-600 transition-colors">
                  notifications
                </span>
                <div className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
              </div>
            )}
          </div>
        </header>

        {/* Content Area */}
        <main className="flex-1 overflow-y-auto p-6 bg-slate-50">
          {content.header}
          {children}
        </main>
      </div>
    </div>
  )
}