import { useState } from 'react'
import AppInfoTab from './tabs/AppInfoTab'
import ColoursTab from './tabs/ColoursTab'
import OperationTab from './tabs/OperationTab'
import PrintFontsTab from './tabs/PrintFontsTab'
import SecurityTab from './tabs/SecurityTab'
import DevelopmentTab from './tabs/DevelopmentTab'
import Phase2FeaturesTab from './tabs/Phase2FeaturesTab'
import FiscalTab from './tabs/FiscalTab'
import { TabGroup } from '../../ui/Tabs'

const TABS = [
  { id: 'app-info',     label: 'Γενικά' },
  { id: 'security',     label: 'Ασφάλεια' },
  { id: 'operation',    label: 'Λειτουργία' },
  { id: 'colours',      label: 'Εμφάνιση' },
  { id: 'print-fonts',  label: 'Εκτύπωση' },
  { id: 'fiscal',       label: 'Ταμειακή' },
  { id: 'features',     label: 'Λειτουργίες' },
  { id: 'development',  label: 'Developer' },
]

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState('app-info')

  return (
    <div className="flex flex-col h-full min-h-0">
      <TabGroup tabs={TABS} active={activeTab} onChange={setActiveTab} />
      <div className="flex-1 overflow-y-auto p-6">
        {activeTab === 'app-info'    && <AppInfoTab />}
        {activeTab === 'security'    && <SecurityTab />}
        {activeTab === 'operation'   && <OperationTab />}
        {activeTab === 'colours'     && <ColoursTab />}
        {activeTab === 'print-fonts' && <PrintFontsTab />}
        {activeTab === 'fiscal'      && <FiscalTab />}
        {activeTab === 'features'    && <Phase2FeaturesTab />}
        {activeTab === 'development' && <DevelopmentTab />}
      </div>
    </div>
  )
}
