import { useCallback, useMemo, useState } from 'react'
import { Alert, Box, Tab, Tabs } from '@mui/material'
import { LeadTable } from './LeadTable'
import { PanelLoadingState, ErrorState } from '../ui'
import { useExposeLeads } from '../../hooks/useExposeLeads'
import { useProperties } from '../../hooks/useProperties'
import { ExposeLeadStatus } from '../../domain/exposeLead'
import { EXPOSE_LEAD_TABS, EXPOSE_LEAD_TAB_LABELS } from '../../lib/constants'
import type { ExposeLeadTab } from '../../lib/constants'

interface Props {
  /** Scrollcontainer der Seite — die geöffnete Zeile gleitet darin nach oben. */
  scrollRef: React.RefObject<HTMLDivElement | null>
}

/**
 * Der Exposé-Bereich auf Livias Arbeitsplatz (Runde 4, §8; Runde 8, §1).
 *
 * Aus `MyListings.tsx` herausgelöst, als die Recherche mit Runde 8 zur
 * Hauptaufgabe wurde. Die Exposé-Funktion ist damit nachgeordnet, aber
 * unverändert vollständig — Leadliste, dreistufiger Assistent, Pflichtfelder
 * und Export arbeiten weiter wie zuvor.
 */
export function ExposeLeadSection({ scrollRef }: Props) {
  const [tab, setTab] = useState<ExposeLeadTab>(EXPOSE_LEAD_TABS.ACTIVE)
  const [selectedId, setSelectedId] = useState<string | null>(null)

  const { data: leads = [], isLoading, isError, refetch } = useExposeLeads()
  const { data: properties = [] } = useProperties()

  const visible = useMemo(() => {
    const wanted = tab === EXPOSE_LEAD_TABS.ARCHIVED ? ExposeLeadStatus.ARCHIVED : ExposeLeadStatus.ACTIVE
    return leads
      .filter(l => l.status === wanted)
      .sort((a, b) => b.receivedAt.localeCompare(a.receivedAt))
  }, [leads, tab])

  /**
   * Beim Öffnen gleitet die gewählte Zeile an den oberen Rand des sichtbaren
   * Inhaltsbereichs; die nachfolgenden Leads rücken nach unten und dürfen aus
   * dem Blickfeld verschwinden (Runde 4, §8.4). Umgesetzt mit `scrollTo` auf dem
   * bestehenden Scrollcontainer — dafür braucht es keine Animationsbibliothek.
   *
   * Bei `prefers-reduced-motion` wird ohne Bewegung direkt gesprungen.
   */
  const handleSelect = useCallback((id: string, row: HTMLElement | null) => {
    const next = id === selectedId ? null : id
    setSelectedId(next)
    if (!next || !row || !scrollRef.current) return

    const container = scrollRef.current
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
    const top = container.scrollTop + row.getBoundingClientRect().top - container.getBoundingClientRect().top

    // Nach dem Zustandswechsel scrollen, sonst misst der Browser die alte Höhe.
    requestAnimationFrame(() => {
      container.scrollTo({ top, behavior: reduced ? 'auto' : 'smooth' })
    })
  }, [selectedId, scrollRef])

  const handleTabChange = useCallback((next: ExposeLeadTab) => {
    setSelectedId(null)
    setTab(next)
  }, [])

  if (isLoading) return <PanelLoadingState />
  if (isError) return <ErrorState message="Die Leads konnten nicht geladen werden." onRetry={() => refetch()} />

  return (
    <Box>
      <Alert severity="info" sx={{ mb: 2, fontSize: '0.8rem', py: 0.5 }}>
        Nachgeordnete Aufgabe. Livias Schwerpunkt liegt seit Runde 8 auf der Marktrecherche —
        Exposés entstehen weiterhin hier, wenn ein Objekt vermarktet werden soll.
      </Alert>

      <Tabs
        value={tab}
        onChange={(_, v: ExposeLeadTab) => handleTabChange(v)}
        sx={{ mb: 2, '& .MuiTab-root': { textTransform: 'none', fontWeight: 600, fontSize: '0.9rem' } }}
      >
        {Object.values(EXPOSE_LEAD_TABS).map(value => (
          <Tab key={value} value={value} label={EXPOSE_LEAD_TAB_LABELS[value]} />
        ))}
      </Tabs>

      <LeadTable
        leads={visible}
        properties={properties}
        selectedId={selectedId}
        onSelect={handleSelect}
        withWorkspace={tab === EXPOSE_LEAD_TABS.ACTIVE}
        emptyText={
          tab === EXPOSE_LEAD_TABS.ACTIVE
            ? 'Keine aktiven Exposé-Aufträge. Über die Detailansicht eines Leads bei Nora lassen sich Objekte hierher vormerken.'
            : 'Noch keine archivierten Leads.'
        }
      />
    </Box>
  )
}