import { useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import { PageHeader, Tabs } from '../components/ui'
import PultList from '../components/workers/PultList'
import WorkersBoard from '../components/workers/WorkersBoard'
import { useAuth } from '../context/AuthContext'
import { workersApi } from '../lib/workersClient'
import { pickTab } from '../lib/workersView'
import '../styles/workers.css'

// Reiter der Seite. Später kommt botleads (P6) dazu; die Reiterleiste erscheint erst ab zwei Reitern.
const WORKERS_TABS = [
  { id: 'hochhaus', label: 'Hochhaus' },
  { id: 'freigabe', label: 'Freigabe' },
]

const api = workersApi

// Seite „Hustler“ (Dateiname bleibt WorkersPage): Titel, Reiterwahl über ?tab= und der Inhalt des gewählten Reiters.
// Auth und Dienst-API kommen von hier; das Board selbst kennt weder Anmeldung noch Appwrite.
export default function WorkersPage() {
  const { isAdmin, user } = useAuth()
  const [params, setParams] = useSearchParams()
  const active = pickTab(WORKERS_TABS, params.get('tab'))

  // Tab-Titel nur solange die Seite offen ist; beim Verlassen kommt der vorige Titel zurück
  useEffect(() => {
    const previous = document.title
    document.title = 'Hustler'
    return () => { document.title = previous }
  }, [])

  return (
    <div className="page wk-page">
      <PageHeader title="Hustler" subtitle="Die Nachtschicht deiner Claude-Armee" />
      {WORKERS_TABS.length > 1 && (
        <Tabs tabs={WORKERS_TABS} active={active.id} onChange={(id) => setParams({ tab: id })} />
      )}
      {active.id === 'hochhaus' && <WorkersBoard api={api} isAdmin={isAdmin} />}
      {active.id === 'freigabe' && <PultList api={api} me={{ id: user?.$id, name: user?.name }} />}
    </div>
  )
}