import { Box, Card, FormControlLabel, MenuItem, Switch, TextField, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'
import { FIT_OUT_OPTIONS } from '../../pages/supply/newListingConstants'

// Stufen, die noch Mieterausbau benötigen — nur dann ist die Träger-Frage relevant
const NEEDS_FIT_OUT = new Set(['SHELL', 'BASIC'])

interface Props {
  floor: string
  onFloorChange: (v: string) => void
  fitOut: string
  onFitOutChange: (v: string) => void
  fitOutByLandlord: boolean | undefined
  onFitOutByLandlordChange: (v: boolean) => void
  parking: string
  onParkingChange: (v: string) => void
  ceilingHeight: string
  onCeilingHeightChange: (v: string) => void
  mieterausbaubeitrag: string
  onMieterausbaubeitragChange: (v: string) => void
  isFlexible: boolean
  onIsFlexibleChange: (v: boolean) => void
  minLettableSqm: string
  onMinLettableSqmChange: (v: string) => void
}

export function TechnicalDetailsSection({
  floor, onFloorChange,
  fitOut, onFitOutChange,
  fitOutByLandlord, onFitOutByLandlordChange,
  parking, onParkingChange,
  ceilingHeight, onCeilingHeightChange,
  mieterausbaubeitrag, onMieterausbaubeitragChange,
  isFlexible, onIsFlexibleChange,
  minLettableSqm, onMinLettableSqmChange,
}: Props) {
  const showFitOutResponsibility = NEEDS_FIT_OUT.has(fitOut)
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Technische Details (optional)</Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 2 }}>
        <TextField
          label="Stockwerk" value={floor}
          onChange={e => onFloorChange(e.target.value)}
          size="small" type="number" fullWidth placeholder="0 = EG"
        />
        <TextField
          select label="Ausbaustandard" value={fitOut}
          onChange={e => onFitOutChange(e.target.value)} size="small" fullWidth
        >
          {FIT_OUT_OPTIONS.map(o => (
            <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
          ))}
        </TextField>
        <TextField
          label="Parkplätze" value={parking}
          onChange={e => onParkingChange(e.target.value)}
          size="small" type="number" slotProps={{ htmlInput: { min: 0 } }} fullWidth
        />
        <TextField
          label="Deckenhöhe (m)" value={ceilingHeight}
          onChange={e => onCeilingHeightChange(e.target.value)}
          size="small" type="number" slotProps={{ htmlInput: { step: 0.1, min: 2 } }} fullWidth
        />
      </Box>

      {/* Ausbau-Träger — nur relevant, wenn die Fläche noch Ausbau benötigt (Rohbau/Edelrohbau) */}
      {showFitOutResponsibility && (
        <Box sx={{ mt: 2.5, pt: 2, borderTop: '1px solid #f1f5f9' }}>
          <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
            Wer baut aus? <Box component="span" sx={{ color: '#dc2626' }}>*</Box>
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, flexWrap: 'wrap' }}>
            <ToggleButtonGroup
              exclusive
              size="small"
              value={fitOutByLandlord === undefined ? null : fitOutByLandlord ? 'landlord' : 'tenant'}
              onChange={(_, v) => { if (v) onFitOutByLandlordChange(v === 'landlord') }}
            >
              <ToggleButton value="landlord" sx={{ textTransform: 'none' }}>Vermieter übernimmt</ToggleButton>
              <ToggleButton value="tenant" sx={{ textTransform: 'none' }}>Mieter baut aus</ToggleButton>
            </ToggleButtonGroup>

            {fitOutByLandlord === undefined ? (
              <Typography variant="caption" sx={{ flex: 1, minWidth: 220, mt: 0.5, color: '#b45309' }}>
                Pflichtangabe bei Rohbau/Edelrohbau — bitte wählen, wer den Ausbau trägt.
              </Typography>
            ) : fitOutByLandlord ? (
              <Typography variant="caption" color="text.secondary" sx={{ flex: 1, minWidth: 220, mt: 0.5 }}>
                Ausbau im Mietzins enthalten — bitte die <strong>bezugsfertige</strong> Miete eintragen.
                Es wird kein Aufschlag berechnet.
              </Typography>
            ) : (
              <TextField
                label="Mieterausbaubeitrag (CHF/m²)"
                value={mieterausbaubeitrag}
                onChange={e => onMieterausbaubeitragChange(e.target.value)}
                size="small" type="number" sx={{ width: 240 }}
                slotProps={{ htmlInput: { min: 0, max: 1000, step: 25 } }}
                helperText="Beitrag des Vermieters — optional, leer = kein Beitrag"
              />
            )}
          </Box>
        </Box>
      )}

      {/* Divisibility */}
      <Box sx={{ mt: 2.5, pt: 2, borderTop: '1px solid #f1f5f9', display: 'flex', alignItems: 'center', gap: 2 }}>
        <FormControlLabel
          control={
            <Switch
              checked={isFlexible}
              onChange={e => onIsFlexibleChange(e.target.checked)}
              size="small"
            />
          }
          label={
            <Box>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>Fläche ist teilbar</Typography>
              <Typography variant="caption" color="text.secondary">
                Mieter können auch nur einen Teil der Fläche mieten
              </Typography>
            </Box>
          }
          sx={{ m: 0, flex: 1 }}
        />
        {isFlexible && (
          <TextField
            label="Mindesteinheit (m²)"
            value={minLettableSqm}
            onChange={e => onMinLettableSqmChange(e.target.value)}
            size="small"
            type="number"
            sx={{ width: 180 }}
            slotProps={{ htmlInput: { min: 10, step: 10 } }}
            helperText="Kleinste vermietbare Einheit"
          />
        )}
      </Box>
    </Card>
  )
}
