import { useState } from 'react'
import { Percent, Tag, Gift, Users } from 'lucide-react'
import { TabGroup, TabCard } from '../../ui/Tabs'
import PriceGroupsTab from './pricing/PriceGroupsTab'
import ModifiersTab from './pricing/ModifiersTab'
import DealsTab from './pricing/DealsTab'
import DiscountSettingsTab from './pricing/DiscountSettingsTab'

const TABS = [
  { id: 'groups',    label: 'Ομάδες Τιμών',       icon: Tag },
  { id: 'modifiers', label: 'Τροποποιητές Τιμής',  icon: Percent },
  { id: 'deals',     label: 'Προσφορές',            icon: Gift },
  { id: 'discounts', label: 'Ρυθμίσεις Εκπτώσεων', icon: Users },
]

export default function PricingPage() {
  const [tab, setTab] = useState('groups')

  return (
    <div className="flex flex-col h-full min-h-0 p-6 gap-4">
      {/* Page header */}
      <div className="flex items-center gap-3 shrink-0">
        <div className="w-9 h-9 rounded-xl bg-sky-100 flex items-center justify-center shrink-0">
          <Percent className="w-5 h-5 text-sky-600" />
        </div>
        <div>
          <h1 className="text-[15px] font-semibold text-slate-900">Προσφορές &amp; Τιμές</h1>
          <p className="text-[12px] text-slate-500">Δυναμικές τιμές, τροποποιητές, προσφορές και εκπτώσεις</p>
        </div>
      </div>

      <TabCard className="flex-1">
        <TabGroup tabs={TABS} active={tab} onChange={setTab} />
        <div className="flex-1 overflow-y-auto">
          {tab === 'groups'    && <PriceGroupsTab />}
          {tab === 'modifiers' && <ModifiersTab />}
          {tab === 'deals'     && <DealsTab />}
          {tab === 'discounts' && <DiscountSettingsTab />}
        </div>
      </TabCard>
    </div>
  )
}
