import { useState } from 'react'
import { Users, Utensils, Printer } from 'lucide-react'
import { TabGroup, TabBar } from '../../ui/Tabs'

// Staff Analytics
import ShiftsOverview from './staff/ShiftsOverview'
import Payments from './staff/Payments'
import Activity from './staff/Activity'
import StaffLeaderboard from './staff/StaffLeaderboard'

// Restaurant Performance
import Today from './restaurant/Today'
import WorkDaySummary from './restaurant/WorkDaySummary'
import OrderHistory from './restaurant/OrderHistory'
import ProductPerformance from './restaurant/ProductPerformance'
import CategoryPerformance from './restaurant/CategoryPerformance'
import TrafficAnalytics from './restaurant/TrafficAnalytics'
import RevenueTrends from './restaurant/RevenueTrends'
import TableAnalytics from './restaurant/TableAnalytics'

// Operations
import PrinterHistory from './operations/PrinterHistory'
import PrinterHealthLog from './operations/PrinterHealthLog'
import CancellationsLog from './operations/CancellationsLog'
import DiscountsLog from './operations/DiscountsLog'

const PARENT_TABS = [
  {
    id: 'staff',
    label: 'Ανάλυση Προσωπικού',
    icon: Users,
    subTabs: [
      { id: 'shifts',      label: 'Βάρδιες',               Component: ShiftsOverview },
      { id: 'payments',    label: 'Πληρωμές',               Component: Payments },
      { id: 'activity',    label: 'Δραστηριότητα',          Component: Activity },
      { id: 'leaderboard', label: 'Κατάταξη',               Component: StaffLeaderboard },
    ],
  },
  {
    id: 'restaurant',
    label: 'Απόδοση Καταστήματος',
    icon: Utensils,
    subTabs: [
      { id: 'today',      label: 'Σήμερα',                  Component: Today },
      { id: 'workday',    label: 'Ημέρες Λειτουργίας',      Component: WorkDaySummary },
      { id: 'orders',     label: 'Ιστορικό Παραγγελιών',    Component: OrderHistory },
      { id: 'products',   label: 'Απόδοση Προϊόντων',       Component: ProductPerformance },
      { id: 'categories', label: 'Κατηγορίες',              Component: CategoryPerformance },
      { id: 'traffic',    label: 'Κίνηση',                  Component: TrafficAnalytics },
      { id: 'trends',     label: 'Τάσεις Εσόδων',           Component: RevenueTrends },
      { id: 'tables',     label: 'Τραπέζια',                Component: TableAnalytics },
    ],
  },
  {
    id: 'ops',
    label: 'Λειτουργίες',
    icon: Printer,
    subTabs: [
      { id: 'printer-history', label: 'Ιστορικό Εκτυπωτή',  Component: PrinterHistory },
      { id: 'printer-health',  label: 'Υγεία Εκτυπωτή',     Component: PrinterHealthLog },
      { id: 'cancellations',   label: 'Ακυρώσεις',           Component: CancellationsLog },
      { id: 'discounts',       label: 'Εκπτώσεις',           Component: DiscountsLog },
    ],
  },
]

export default function ReportsPage() {
  const [activeParent, setActiveParent] = useState('staff')
  const [activeSubByParent, setActiveSubByParent] = useState({
    staff: 'shifts',
    restaurant: 'today',
    ops: 'printer-history',
  })
  const [subProps, setSubProps] = useState({})

  const parent = PARENT_TABS.find(t => t.id === activeParent)
  const activeSubId = activeSubByParent[activeParent]
  const sub = parent.subTabs.find(s => s.id === activeSubId) || parent.subTabs[0]
  const { Component: SubComponent } = sub

  function setActiveSub(id) {
    setSubProps({})
    setActiveSubByParent(prev => ({ ...prev, [activeParent]: id }))
  }

  function navigateTo({ parent: parentId, sub: subId, ...props }) {
    setSubProps(props)
    setActiveSubByParent(prev => ({ ...prev, [parentId]: subId }))
    setActiveParent(parentId)
  }

  return (
    <div className="flex flex-col h-full min-h-0">
      <TabGroup tabs={PARENT_TABS} active={activeParent} onChange={setActiveParent} />
      <TabBar   tabs={parent.subTabs} active={activeSubId}  onChange={setActiveSub} />
      <div className="flex-1 min-h-0 flex flex-col">
        <SubComponent
          key={`${activeParent}-${activeSubId}-${JSON.stringify(subProps)}`}
          onNavigate={navigateTo}
          {...subProps}
        />
      </div>
    </div>
  )
}
