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

export default function Anfragencenter() {
  const location = useLocation()
  const initialTab = (location.state as { tab?: number } | null)?.tab ?? 0
  const [tab, setTab] = useState(initialTab)
  const orgId = useSessionStore(s => s.currentUser?.organizationId)
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <Box sx={{ borderBottom: '1px solid #e8e7e4', px: 3, bgcolor: 'white', flexShrink: 0 }}>
        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a', pt: 2.5, pb: 1, display: 'block' }}>
          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="Gesendet" />
          <Tab label="Latente Anfragen" />
        </Tabs>
      </Box>
      <Box sx={{ flex: 1, overflow: 'hidden' }}>
        {tab === 0 && <ActiveInquiriesTab filters={{ organizationId: orgId, kind: 'INQUIRY' }} />}
        {tab === 1 && (
          <ActiveInquiriesTab
            filters={{ organizationId: orgId, kind: 'OFFER' }}
            emptyTitle="Keine gesendeten Angebote"
            emptyDescription="Angebote aus den latenten Anfragen erscheinen hier, sobald Sie sie versenden."
          />
        )}
        {tab === 2 && <LatentInquiriesTab />}
      </Box>
      <OfferWizard />
    </Box>
  )
}