import { useState } from 'react'
import ProductsTab from './ProductsTab'
import TablesConfigTab from './TablesConfigTab'
import StaffTab from './StaffTab'

const TABS = [
  { key: 'products', label: 'Προϊόντα' },
  { key: 'tables',   label: 'Τραπέζια' },
  { key: 'staff',    label: 'Προσωπικό' },
]

export default function ManagementPage() {
  const [activeTab, setActiveTab] = useState('products')

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 0 }}>
      {/* Tab bar */}
      <div style={{
        display: 'flex', gap: 4,
        borderBottom: '1px solid #e5e7eb',
        paddingBottom: 0,
        marginBottom: 24,
        flexShrink: 0,
      }}>
        {TABS.map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              height: 40,
              padding: '0 20px',
              borderRadius: '8px 8px 0 0',
              border: 'none',
              borderBottom: activeTab === tab.key ? '2px solid #3758c9' : '2px solid transparent',
              background: 'transparent',
              color: activeTab === tab.key ? '#3758c9' : '#6b7280',
              fontSize: 14,
              fontWeight: activeTab === tab.key ? 700 : 500,
              cursor: 'pointer',
              transition: 'color 120ms ease, border-color 120ms ease',
              fontFamily: 'inherit',
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div style={{ flex: 1, minHeight: 0 }}>
        {activeTab === 'products' && <ProductsTab />}
        {activeTab === 'tables'   && <TablesConfigTab />}
        {activeTab === 'staff'    && <StaffTab />}
      </div>
    </div>
  )
}
