import { useState } from 'react'
import AppInfoTab from './tabs/AppInfoTab'
import ColoursTab from './tabs/ColoursTab'
import DevelopmentTab from './tabs/DevelopmentTab'
import PrintFontsTab from './tabs/PrintFontsTab'

const TABS = [
  { key: 'app-info',     label: 'App Info' },
  { key: 'colours',      label: 'UI Personalization' },
  { key: 'print-fonts',  label: 'Εκτύπωση' },
  { key: 'development',  label: 'Development' },
]

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

  return (
    <div style={{ width: '100%' }}>
      <h1 className="text-xl font-bold text-gray-800" style={{ marginBottom: 20 }}>Ρυθμίσεις</h1>

      {/* Tab bar */}
      <div style={{
        display: 'flex', gap: 4,
        borderBottom: '2px solid #e5e7eb',
        marginBottom: 28,
      }}>
        {TABS.map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              padding: '10px 20px',
              fontSize: 14,
              fontWeight: 600,
              border: 'none',
              background: 'none',
              cursor: 'pointer',
              color: activeTab === tab.key ? '#3758c9' : '#6b7280',
              borderBottom: `2px solid ${activeTab === tab.key ? '#3758c9' : 'transparent'}`,
              marginBottom: -2,
              borderRadius: '6px 6px 0 0',
              transition: 'color 0.12s',
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      {activeTab === 'app-info'    && <AppInfoTab />}
      {activeTab === 'colours'     && <ColoursTab />}
      {activeTab === 'print-fonts' && <PrintFontsTab />}
      {activeTab === 'development' && <DevelopmentTab />}
    </div>
  )
}
