property-match/src/components/demand/NeedExtendedRequirements.tsx

import { Accordion, AccordionDetails, AccordionSummary, Box, Checkbox, FormControlLabel, MenuItem, Switch, TextField, Typography } from '@mui/material'
import { ChevronDown } from 'lucide-react'
import type { ParsedNeedCriteria } from '../../domain/needBuilder'

interface Props {
  criteria: ParsedNeedCriteria
  onChange: (c: ParsedNeedCriteria) => void
}

export function NeedExtendedRequirements({ criteria: c, onChange: set }: Props) {
  return (
    <Accordion disableGutters elevation={0} sx={{ border: '1px solid #e2e8f0', borderRadius: 1, mt: 1, '&:before': { display: 'none' } }}>
      <AccordionSummary expandIcon={<ChevronDown size={16} />} sx={{ minHeight: 36, px: 1.5, '& .MuiAccordionSummary-content': { my: 0.5 } }}>
        <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b' }}>Erweiterte Anforderungen</Typography>
      </AccordionSummary>
      <AccordionDetails sx={{ px: 1.5, pt: 0, pb: 1.5 }}>
        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0.5, mb: 1.5 }}>
          <FormControlLabel
            control={<Checkbox size="small" checked={c.requireGroundFloor ?? false} onChange={e => set({ ...c, requireGroundFloor: e.target.checked || undefined })} />}
            label={<Typography variant="caption">Erdgeschoss erforderlich</Typography>}
          />
          <FormControlLabel
            control={<Checkbox size="small" checked={c.requireAirConditioning ?? false} onChange={e => set({ ...c, requireAirConditioning: e.target.checked || undefined })} />}
            label={<Typography variant="caption">Klimaanlage erforderlich</Typography>}
          />
          <FormControlLabel
            control={<Checkbox size="small" checked={c.requireLoadingDock ?? false} onChange={e => set({ ...c, requireLoadingDock: e.target.checked || undefined })} />}
            label={<Typography variant="caption">Laderampe erforderlich</Typography>}
          />
          <FormControlLabel
            control={<Checkbox size="small" checked={c.requireBarrierFree ?? false} onChange={e => set({ ...c, requireBarrierFree: e.target.checked || undefined })} />}
            label={<Typography variant="caption">Barrierefrei erforderlich</Typography>}
          />
        </Box>
        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1.5 }}>
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Mindest-Parkplätze</Typography>
            <TextField
              size="small" type="number" fullWidth placeholder="0"
              value={c.requiredParkingMin ?? ''}
              onChange={e => set({ ...c, requiredParkingMin: parseInt(e.target.value) || undefined })}
              slotProps={{ htmlInput: { min: 0, max: 100 } }}
            />
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Mindest-Ausbaustandard</Typography>
            <TextField
              select size="small" fullWidth
              value={c.requiredFitOut ?? ''}
              onChange={e => set({ ...c, requiredFitOut: (e.target.value as 'BASIC' | 'FULL' | 'PREMIUM') || undefined })}
            >
              <MenuItem value="">Kein Mindeststandard</MenuItem>
              <MenuItem value="BASIC">Basisausbau</MenuItem>
              <MenuItem value="FULL">Vollausbau</MenuItem>
              <MenuItem value="PREMIUM">Premiumausbau</MenuItem>
            </TextField>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Mindest-Deckenhöhe (m)</Typography>
            <TextField
              size="small" type="number" fullWidth placeholder="z.B. 6"
              value={c.minCeilingHeightM ?? ''}
              onChange={e => set({ ...c, minCeilingHeightM: parseFloat(e.target.value) || undefined })}
              slotProps={{ htmlInput: { min: 2, max: 20, step: 0.5 } }}
            />
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Mindest-Vertragslaufzeit (Monate)</Typography>
            <TextField
              size="small" type="number" fullWidth placeholder="z.B. 36"
              value={c.minContractDurationMonths ?? ''}
              onChange={e => set({ ...c, minContractDurationMonths: parseInt(e.target.value) || undefined })}
              slotProps={{ htmlInput: { min: 0, max: 360, step: 12 } }}
            />
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Eigenes Ausbaubudget (max. CHF/m²)</Typography>
            <TextField
              size="small" type="number" fullWidth placeholder="z.B. 200"
              value={c.fitOutBudgetMaxPerSqm ?? ''}
              onChange={e => set({ ...c, fitOutBudgetMaxPerSqm: parseInt(e.target.value) || undefined })}
              slotProps={{ htmlInput: { min: 0, max: 5000, step: 50 } }}
              helperText="Ihr Beitrag — exkl. MAB des Vermieters"
            />
          </Box>
        </Box>

        {/* Divisibility */}
        <Box sx={{ mt: 1.5, pt: 1.5, borderTop: '1px solid #f1f5f9' }}>
          <FormControlLabel
            control={
              <Switch
                size="small"
                checked={c.requiresDivisibility ?? false}
                onChange={e => set({ ...c, requiresDivisibility: e.target.checked || undefined })}
              />
            }
            label={<Typography variant="caption" sx={{ fontWeight: 600 }}>Fläche muss teilbar sein</Typography>}
            sx={{ mb: c.requiresDivisibility ? 1 : 0 }}
          />
          {c.requiresDivisibility && (
            <Box>
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>Mindesteinheit (m²)</Typography>
              <TextField
                size="small" type="number"
                placeholder="z.B. 150"
                value={c.minDivisibleUnit ?? ''}
                onChange={e => set({ ...c, minDivisibleUnit: parseInt(e.target.value) || undefined })}
                sx={{ width: 160 }}
                slotProps={{ htmlInput: { min: 10, max: 5000, step: 10 } }}
              />
            </Box>
          )}
        </Box>

      </AccordionDetails>
    </Accordion>
  )
}