import { useState } from 'react'
import { Box } from '@mui/material'
import { PageHeader } from '../../components/layout'
import { SourceList, SourceDetailPanel } from '../../components/ops'
import { useDataSources, useDataSource } from '../../hooks/useDataSources'
import type { SourceFilters } from '../../domain/dataSource'

export default function SourceMonitoring() {
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [filters, setFilters] = useState<SourceFilters>({})

  const { data: sources = [], isLoading } = useDataSources(filters)
  const { data: selectedSource = null } = useDataSource(selectedId)

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <PageHeader
        title="Source Monitoring"
        subtitle="Datenquellen, Connectoren und Import-Runs verwalten"
      />
      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        {/* Left: Source list — fixed 400px */}
        <Box
          sx={{
            width: 400,
            flexShrink: 0,
            borderRight: '1px solid #e2e8f0',
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <SourceList
            sources={sources}
            isLoading={isLoading}
            selectedId={selectedId}
            onSelect={setSelectedId}
            filters={filters}
            onFiltersChange={setFilters}
          />
        </Box>
        {/* Right: Detail panel */}
        <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <SourceDetailPanel source={selectedSource} />
        </Box>
      </Box>
    </Box>
  )
}
