import { useState } from 'react'
import { Alert, Box, Tab, Tabs } from '@mui/material'
import type { ExposeLead } from '../../domain/exposeLead'
import { useProperties } from '../../hooks/useProperties'
import { ExposeWizard } from './ExposeWizard'
import { PanelLoadingState } from '../ui'
import { DS_SLATE } from '../../lib/ds'

interface Props {
  lead: ExposeLead
}

/**
 * Arbeitsbereich zur Exposé-Erstellung, der sich unter dem gewählten Lead öffnet.
 *
 * Ein Lead kann mehrere Objekte empfehlen; jedes bekommt sein eigenes Exposé.
 * Deshalb steht hier eine Objektauswahl darüber und nicht eine gemeinsame
 * Broschüre für alles — ein Exposé beschreibt genau ein Objekt.
 */
export function LeadWorkspace({ lead }: Props) {
  const { data: properties = [], isLoading } = useProperties()
  // Kein Rücksetz-Effekt beim Leadwechsel nötig: die Liste rendert je Lead eine
  // eigene Zeile, ein anderer Lead ist also ein neuer Arbeitsbereich.
  const [propertyId, setPropertyId] = useState<string>(lead.propertyIds[0] ?? '')

  if (isLoading) return <PanelLoadingState />

  // Objektempfehlungen sind auf reale Einträge aus «Meine Objekte» beschränkt.
  const recommended = lead.propertyIds
    .map(id => properties.find(p => p.id === id))
    .filter((p): p is NonNullable<typeof p> => Boolean(p))

  if (recommended.length === 0) {
    return (
      <Box sx={{ p: 3 }}>
        <Alert severity="warning">
          Zu diesem Lead ist kein Objekt aus «Meine Objekte» hinterlegt — ohne Objekt lässt sich kein Exposé erstellen.
        </Alert>
      </Box>
    )
  }

  const active = recommended.find(p => p.id === propertyId) ?? recommended[0]

  return (
    <Box sx={{ px: 3, py: 2.5, bgcolor: DS_SLATE[50], borderTop: '1px solid #e8e7e4', borderBottom: '1px solid #e8e7e4' }}>
      {recommended.length > 1 && (
        <Tabs
          value={active.id}
          onChange={(_, v: string) => setPropertyId(v)}
          variant="scrollable"
          scrollButtons="auto"
          sx={{ mb: 2, '& .MuiTab-root': { textTransform: 'none', fontSize: '0.8125rem' } }}
        >
          {recommended.map(p => (
            <Tab key={p.id} value={p.id} label={p.title} />
          ))}
        </Tabs>
      )}

      <ExposeWizard leadId={lead.id} property={active} />
    </Box>
  )
}