import { useState } from 'react'
import { Box } from '@mui/material'
import { PageHeader } from '../../components/layout'
import { SignalInbox, SignalPipelineView, MarketSignalEmptyState } from '../../components/ops'
import { useMarketSignals } from '../../hooks/useMarketSignals'
import type { MarketSignalFilters } from '../../domain/marketSignal'

export default function SignalPipeline() {
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [filters, setFilters] = useState<MarketSignalFilters>({})
  const { data: signals = [], isLoading } = useMarketSignals(filters)
  const selectedSignal = signals.find((s) => s.id === selectedId) ?? null

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <PageHeader
        title="Signal Pipeline"
        subtitle="Von der Markt-Evidenz zum strategischen Entscheidungs-Input"
      />
      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        <Box
          sx={{
            width: 360,
            flexShrink: 0,
            borderRight: '1px solid #e2e8f0',
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <SignalInbox
            signals={signals}
            isLoading={isLoading}
            selectedId={selectedId}
            onSelect={setSelectedId}
            filters={filters}
            onFiltersChange={setFilters}
          />
        </Box>
        <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          {selectedSignal
            ? <SignalPipelineView signal={selectedSignal} />
            : <MarketSignalEmptyState variant="no-selection" />
          }
        </Box>
      </Box>
    </Box>
  )
}
