import { Box, CircularProgress, Typography } from '@mui/material'
import { Sparkles } from 'lucide-react'
import { usePublicNeeds } from '../../hooks/useLatentNeeds'
import { PublicNeedCard } from './PublicNeedCard'
import { EmptyState } from '../ui'

interface PublicNeedListProps {
  selectedNeedId: string | null
  onSelect: (id: string) => void
  fullWidth?: boolean
}

export function PublicNeedList({ selectedNeedId, onSelect, fullWidth }: PublicNeedListProps) {
  const { data: needs = [], isLoading, error } = usePublicNeeds()

  return (
    <Box
      sx={{
        width: fullWidth ? '100%' : 260,
        minWidth: fullWidth ? 'unset' : 260,
        flexShrink: 0,
        borderRight: fullWidth ? 'none' : '1px solid #e2e8f0',
        bgcolor: 'white',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <Box
        sx={{
          px: 2,
          py: 1.25,
          borderBottom: '1px solid #e2e8f0',
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          flexShrink: 0,
        }}
      >
        <Sparkles size={14} color="#7c3aed" />
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
          Latente Bedarfe
        </Typography>
        <Box
          sx={{
            ml: 'auto',
            px: 1,
            py: 0.125,
            borderRadius: 1,
            bgcolor: '#152642',
            color: 'white',
            fontWeight: 600,
            fontSize: '0.7rem',
          }}
        >
          {needs.length}
        </Box>
      </Box>

      <Box sx={{ flex: 1, overflowY: 'auto', p: 1.25, display: 'flex', flexDirection: 'column', gap: 1 }}>
        {isLoading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
            <CircularProgress size={20} />
          </Box>
        )}
        {error && (
          <Typography variant="body2" color="error">
            Fehler beim Laden
          </Typography>
        )}
        {!isLoading && needs.length === 0 && (
          <EmptyState
            title="Keine Bedarfe"
            description="Aktuell sind keine öffentlichen Bedarfe verfügbar."
          />
        )}
        {needs.map(n => (
          <PublicNeedCard
            key={n.id}
            need={n}
            selected={n.id === selectedNeedId}
            onClick={() => onSelect(n.id)}
          />
        ))}
      </Box>
    </Box>
  )
}