import { useState } from 'react'
import { useLocation } from 'react-router'
import { Box, Tab, Tabs, Typography } from '@mui/material'
import { ActiveInquiriesTab, LatentInquiriesTab, OfferWizard } from '../../components/anfragencenter'

export default function Anfragencenter() {
  const location = useLocation()
  const initialTab = (location.state as { tab?: number } | null)?.tab ?? 0
  const [tab, setTab] = useState(initialTab)
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <Box sx={{ borderBottom: '1px solid #e2e8f0', px: 3, bgcolor: 'white', flexShrink: 0 }}>
        <Typography variant="h5" sx={{ fontWeight: 700, pt: 2.5, pb: 1 }}>
          Anfragencenter
        </Typography>
        <Tabs
          value={tab}
          onChange={(_, v) => setTab(v)}
          sx={{
            '& .MuiTab-root': { textTransform: 'none', fontWeight: 600, fontSize: '0.95rem' },
          }}
        >
          <Tab label="Aktive Anfragen" />
          <Tab label="Latente Anfragen" />
        </Tabs>
      </Box>
      <Box sx={{ flex: 1, overflow: 'hidden' }}>
        {tab === 0 && <ActiveInquiriesTab />}
        {tab === 1 && <LatentInquiriesTab />}
      </Box>
      <OfferWizard />
    </Box>
  )
}
