import { Box, Typography } from '@mui/material'
import { useReminders } from '../../hooks/useReminders'
import { useReminderStore } from '../../stores/reminderStore'
import { ReminderListRow } from './ReminderListRow'
import { ReminderCard } from './ReminderCard'
import { ReminderSkeleton } from './ReminderSkeleton'
import { ReminderEmptyState } from './ReminderEmptyState'
import type { Reminder } from '../../domain/reminder'

const LIST_HEADER_COLS = '100px 130px 1fr 140px 90px 100px 90px'

function applyFilters(
  reminders: Reminder[],
  filterType: string,
  filterStatus: string,
  filterPriority: string,
  searchQuery: string,
): Reminder[] {
  return reminders.filter(r => {
    if (filterType !== 'ALL' && r.type !== filterType) return false
    if (filterStatus !== 'ALL' && r.status !== filterStatus) return false
    if (filterPriority !== 'ALL' && r.priority !== filterPriority) return false
    if (searchQuery) {
      const q = searchQuery.toLowerCase()
      const haystack = `${r.propertyTitle} ${r.propertyCity} ${r.tenantName}`.toLowerCase()
      if (!haystack.includes(q)) return false
    }
    return true
  })
}

export function ReminderFeed() {
  const { data, isLoading } = useReminders()
  const {
    filterType, filterStatus, filterPriority, searchQuery, viewMode,
    setFilterType, setFilterStatus, setFilterPriority, setSearchQuery,
  } = useReminderStore()

  if (isLoading) return <ReminderSkeleton />

  const reminders = data ?? []
  const filtered = applyFilters(reminders, filterType, filterStatus, filterPriority, searchQuery)

  function resetFilters() {
    setFilterType('ALL')
    setFilterStatus('ALL')
    setFilterPriority('ALL')
    setSearchQuery('')
  }

  if (filtered.length === 0) {
    return <ReminderEmptyState onReset={resetFilters} />
  }

  if (viewMode === 'card') {
    return (
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
          gap: 2,
        }}
      >
        {filtered.map(r => (
          <ReminderCard key={r.id} reminder={r} />
        ))}
      </Box>
    )
  }

  return (
    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
      {/* Table header */}
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: LIST_HEADER_COLS,
          gap: 1,
          px: 2,
          py: 1,
          bgcolor: '#f8fafc',
          borderBottom: '1px solid #e2e8f0',
        }}
      >
        {['Priorität', 'Typ', 'Objekt / Mieter', 'Fälligkeit', 'Fläche', 'Status', 'Aktionen'].map(h => (
          <Typography key={h} variant="caption" sx={{ fontWeight: 600, color: '#64748b', fontSize: '0.7rem' }}>
            {h}
          </Typography>
        ))}
      </Box>

      {filtered.map(r => (
        <ReminderListRow key={r.id} reminder={r} />
      ))}
    </Box>
  )
}
