import { memo } from 'react'
import { Box, Button, Skeleton, Typography } from '@mui/material'
import { Inbox } from 'lucide-react'
import type { UnifiedLead } from '../../domain/unifiedLead'
import { LeadChannelBadge } from './LeadChannelBadge'
import { DS_SLATE, DS_TEXT } from '../../lib/ds'

/** Spaltenraster im Stil der übrigen Agentenlisten (Livia, Bruno). */
const COLS = '120px 1.5fr 1.4fr 150px'

const COLUMN_LABELS = ['Kanal', 'Interessent', 'Anliegen', 'Eingang']

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

const LeadRow = memo(function LeadRow({
  lead, selected, onSelect,
}: {
  lead: UnifiedLead
  selected: boolean
  onSelect: (lead: UnifiedLead) => void
}) {
  return (
    <Box
      onClick={() => onSelect(lead)}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(lead) } }}
      sx={{
        display: 'grid',
        gridTemplateColumns: COLS,
        alignItems: 'center',
        gap: 1,
        px: 2, py: 1.5,
        borderBottom: '1px solid #f1f5f9',
        bgcolor: selected ? DS_SLATE[50] : 'white',
        cursor: 'pointer',
        '&:hover': { bgcolor: DS_SLATE[50] },
        '&:focus-visible': { outline: '2px solid', outlineColor: DS_SLATE[400], outlineOffset: -2 },
        transition: 'background-color 0.1s',
      }}
    >
      <Box>
        <LeadChannelBadge channel={lead.channel} />
      </Box>

      <Box sx={{ minWidth: 0 }}>
        <Typography variant="body2" sx={{ fontWeight: 600, color: DS_SLATE[900], lineHeight: 1.3 }}>
          {lead.title}
        </Typography>
        <Typography variant="caption" sx={{ color: DS_TEXT.muted, display: 'block', lineHeight: 1.3 }}>
          {lead.meta}
        </Typography>
      </Box>

      <Typography variant="body2" sx={{ color: DS_TEXT.secondary }}>
        {lead.subtitle}
      </Typography>

      <Typography variant="caption" sx={{ color: DS_TEXT.secondary }}>
        {formatDate(lead.receivedAt)}
      </Typography>
    </Box>
  )
})

export interface UnifiedLeadListProps {
  leads: UnifiedLead[]
  isLoading: boolean
  selectedId: string | null
  onSelect: (lead: UnifiedLead) => void
  /** Nur gesetzt, wenn ein Filter aktiv ist — dann bietet der Leerzustand die Rücksetzung an. */
  onResetFilter?: () => void
}

/**
 * Gemeinsame Leadliste aller drei Kanäle (Runde 5, §12).
 *
 * Ersetzt die beiden getrennten Reiterlisten. Jede Zeile trägt ihr
 * Kanalkennzeichen ganz links — die Herkunft ist die erste Information, die
 * beim Überfliegen zählt, weil sie bestimmt, wie belastbar der Lead ist.
 */
export function UnifiedLeadList({ leads, isLoading, selectedId, onSelect, onResetFilter }: UnifiedLeadListProps) {
  return (
    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden', bgcolor: 'white' }}>
      {/* Kopfzeile */}
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: COLS,
          gap: 1,
          px: 2, py: 1,
          bgcolor: DS_SLATE[50],
          borderBottom: '1px solid #e2e8f0',
        }}
      >
        {COLUMN_LABELS.map(label => (
          <Typography
            key={label}
            variant="caption"
            sx={{ fontWeight: 700, color: DS_TEXT.muted, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}
          >
            {label}
          </Typography>
        ))}
      </Box>

      {isLoading
        ? [1, 2, 3, 4].map(i => (
            <Box key={i} sx={{ px: 2, py: 1.75, borderBottom: '1px solid #f1f5f9' }}>
              <Skeleton variant="text" width="45%" />
              <Skeleton variant="text" width="70%" height={14} />
            </Box>
          ))
        : leads.length === 0
          ? (
            <Box sx={{ px: 3, py: 6, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>
              <Inbox size={28} color={DS_SLATE[400]} />
              <Typography variant="body2" sx={{ color: DS_TEXT.secondary, textAlign: 'center' }}>
                Für diesen Kanaltyp liegen derzeit keine Leads vor.
              </Typography>
              {onResetFilter && (
                <Button size="small" variant="outlined" onClick={onResetFilter} sx={{ textTransform: 'none' }}>
                  Alle Kanäle anzeigen
                </Button>
              )}
            </Box>
          )
          : leads.map(lead => (
            <LeadRow
              key={`${lead.channel}-${lead.id}`}
              lead={lead}
              selected={lead.id === selectedId}
              onSelect={onSelect}
            />
          ))}
    </Box>
  )
}