import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { TabBar } from '../../ui/Tabs'
import ShiftsOverview from './staff/ShiftsOverview'
import Payments from './staff/Payments'
import Activity from './staff/Activity'
import StaffLeaderboard from './staff/StaffLeaderboard'

const TABS = [
  { id: 'shifts',      label: 'Βάρδιες',       Component: ShiftsOverview },
  { id: 'payments',    label: 'Πληρωμές',       Component: Payments },
  { id: 'activity',    label: 'Δραστηριότητα',  Component: Activity },
  { id: 'leaderboard', label: 'Κατάταξη',       Component: StaffLeaderboard },
]

export default function StaffReportPage() {
  const [active, setActive] = useState('shifts')
  const navigate = useNavigate()
  const tab = TABS.find(t => t.id === active) || TABS[0]
  const { Component } = tab

  // ShiftsOverview uses onNavigate to drill into order history — redirect to Store page
  function handleNavigate({ parent, sub, ...rest }) {
    if (parent === 'restaurant' && sub === 'orders') {
      navigate('/reports/store')
    }
  }

  return (
    <div className="flex flex-col h-full min-h-0">
      <TabBar tabs={TABS} active={active} onChange={setActive} />
      <div className="flex-1 min-h-0 flex flex-col">
        <Component key={active} onNavigate={handleNavigate} />
      </div>
    </div>
  )
}
