import { useState } from 'react'
import { Box, Button, MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'
import type { Property, PropertyUnit } from '../../domain/property'
import { useUpdateUnit } from '../../hooks/useProperties'
import { FIT_OUT_LABELS } from '../../lib/constants'
import { DS_BORDER, DS_TEXT } from '../../lib/ds'

const NEEDS_BUILD = new Set(['SHELL', 'BASIC'])

interface UnitDraft {
  rentPricePerSqm?: number
  availableFrom?: string
  fitOut?: string
  fitOutByLandlord?: boolean
  mieterausbaubeitragPerSqm?: number
  parkingSpots?: number
}

interface Props {
  property: Property
  unit: PropertyUnit
  onClose: () => void
}

/** Shared per-unit editor: conditions (price, availability), fit-out group, parking allocation. */
export function UnitFieldsEditor({ property, unit, onClose }: Props) {
  const updateUnit = useUpdateUnit(property.id)
  const [d, setD] = useState<UnitDraft>(() => ({
    rentPricePerSqm: unit.rentPricePerSqm ?? property.rentPricePerSqm,
    availableFrom: unit.availableFrom,
    fitOut: unit.fitOut ?? '',
    fitOutByLandlord: unit.fitOutByLandlord,
    mieterausbaubeitragPerSqm: unit.mieterausbaubeitragPerSqm,
    parkingSpots: unit.parkingSpots,
  }))

  const effFit = d.fitOut || property.hardFacts?.fitOut
  const needsBuild = NEEDS_BUILD.has(effFit ?? '')

  function save() {
    const fit = (d.fitOut || undefined) as 'SHELL' | 'BASIC' | 'FULL' | 'PREMIUM' | undefined
    const nb = fit === 'SHELL' || fit === 'BASIC'
    updateUnit.mutate({
      unitId: unit.id,
      data: {
        rentPricePerSqm: d.rentPricePerSqm,
        availableFrom: d.availableFrom || undefined,
        fitOut: fit,
        fitOutByLandlord: nb ? d.fitOutByLandlord : undefined,
        mieterausbaubeitragPerSqm: nb && d.fitOutByLandlord === false ? d.mieterausbaubeitragPerSqm : undefined,
        parkingSpots: d.parkingSpots,
      },
    })
    onClose()
  }

  return (
    <Box sx={{ px: 2, py: 1.5, bgcolor: '#f8fafc', borderTop: `1px solid ${DS_BORDER.default}` }}>
      {/* Konditionen */}
      <Box sx={{ display: 'grid', gridTemplateColumns: unit.available ? '1fr 1fr 1fr' : '1fr 1fr', gap: 1.25 }}>
        <TextField
          label="Preis (CHF/m²/Jahr)" type="number" size="small"
          value={d.rentPricePerSqm ?? ''}
          onChange={e => setD(p => ({ ...p, rentPricePerSqm: parseInt(e.target.value) || undefined }))}
          slotProps={{ htmlInput: { min: 0, step: 10 } }}
          helperText="Leer = Objekt-Preis"
        />
        {unit.available && (
          <TextField
            label="Verfügbar ab" type="date" size="small"
            slotProps={{ inputLabel: { shrink: true } }}
            value={d.availableFrom ?? ''}
            onChange={e => setD(p => ({ ...p, availableFrom: e.target.value }))}
            helperText="Leer = sofort"
          />
        )}
        <TextField
          label="Parkplätze (Zuteilung)" type="number" size="small"
          value={d.parkingSpots ?? ''}
          onChange={e => setD(p => ({ ...p, parkingSpots: parseInt(e.target.value) || undefined }))}
          slotProps={{ htmlInput: { min: 0 } }}
          helperText={property.hardFacts?.parking != null ? `Objekt-Pool: ${property.hardFacts.parking}` : 'Leer = Objekt-Wert'}
        />
      </Box>

      {/* Ausbau — Standard + Träger + MAB als Gruppe */}
      <Box sx={{ mt: 1.5, p: 1.5, border: `1px solid ${DS_BORDER.default}`, borderRadius: 1, bgcolor: 'white' }}>
        <Typography variant="caption" sx={{ fontWeight: 700, color: DS_TEXT.secondary, textTransform: 'uppercase', letterSpacing: 0.4, display: 'block', mb: 1 }}>
          Ausbau
        </Typography>
        <TextField
          select size="small" label="Ausbaustandard" fullWidth
          value={d.fitOut ?? ''}
          onChange={e => setD(p => ({ ...p, fitOut: e.target.value }))}
        >
          <MenuItem value="">Wie Objekt{property.hardFacts?.fitOut ? ` (${FIT_OUT_LABELS[property.hardFacts.fitOut] ?? property.hardFacts.fitOut})` : ''}</MenuItem>
          <MenuItem value="SHELL">{FIT_OUT_LABELS.SHELL}</MenuItem>
          <MenuItem value="BASIC">{FIT_OUT_LABELS.BASIC}</MenuItem>
          <MenuItem value="FULL">{FIT_OUT_LABELS.FULL}</MenuItem>
          <MenuItem value="PREMIUM">{FIT_OUT_LABELS.PREMIUM}</MenuItem>
        </TextField>

        {needsBuild && (
          <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center', flexWrap: 'wrap', mt: 1.25 }}>
            <Typography variant="caption" color="text.secondary">Wer baut aus?</Typography>
            <ToggleButtonGroup
              exclusive size="small"
              value={d.fitOutByLandlord === undefined ? null : d.fitOutByLandlord ? 'landlord' : 'tenant'}
              onChange={(_, v) => { if (v) setD(p => ({ ...p, fitOutByLandlord: v === 'landlord', ...(v === 'landlord' ? { mieterausbaubeitragPerSqm: undefined } : {}) })) }}
            >
              <ToggleButton value="landlord" sx={{ textTransform: 'none' }}>Vermieter</ToggleButton>
              <ToggleButton value="tenant" sx={{ textTransform: 'none' }}>Mieter</ToggleButton>
            </ToggleButtonGroup>
            {d.fitOutByLandlord === false && (
              <TextField
                label="MAB (CHF/m²)" type="number" size="small" sx={{ width: 150 }}
                value={d.mieterausbaubeitragPerSqm ?? ''}
                onChange={e => setD(p => ({ ...p, mieterausbaubeitragPerSqm: parseInt(e.target.value) || undefined }))}
                slotProps={{ htmlInput: { min: 0, max: 1000, step: 25 } }}
              />
            )}
            <Typography variant="caption" sx={{ color: DS_TEXT.disabled }}>leer = wie Objekt</Typography>
          </Box>
        )}
      </Box>

      <Box sx={{ display: 'flex', gap: 1, mt: 1.5, justifyContent: 'flex-end' }}>
        <Button size="small" onClick={onClose} sx={{ textTransform: 'none', color: DS_TEXT.muted }}>Abbrechen</Button>
        <Button size="small" variant="contained" onClick={save} sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}>Speichern</Button>
      </Box>
    </Box>
  )
}
