maternal-app/maternal-web/components/children/ChildDialog.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  MenuItem,
  Box,
  Alert,
} from '@mui/material';
import { Child, CreateChildData } from '@/lib/api/children';

interface ChildDialogProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateChildData) => Promise<void>;
  child?: Child | null;
  isLoading?: boolean;
}

export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false }: ChildDialogProps) {
  const [formData, setFormData] = useState<CreateChildData>({
    name: '',
    birthDate: '',
    gender: 'male',
    photoUrl: '',
  });
  const [error, setError] = useState<string>('');

  useEffect(() => {
    if (child) {
      setFormData({
        name: child.name,
        birthDate: child.birthDate.split('T')[0], // Convert to YYYY-MM-DD format
        gender: child.gender,
        photoUrl: child.photoUrl || '',
      });
    } else {
      setFormData({
        name: '',
        birthDate: '',
        gender: 'male',
        photoUrl: '',
      });
    }
    setError('');
  }, [child, open]);

  const handleChange = (field: keyof CreateChildData) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setFormData({ ...formData, [field]: e.target.value });
  };

  const handleSubmit = async () => {
    setError('');

    // Validation
    if (!formData.name.trim()) {
      setError('Please enter a name');
      return;
    }
    if (!formData.birthDate) {
      setError('Please select a birth date');
      return;
    }

    // Check if birth date is in the future
    const selectedDate = new Date(formData.birthDate);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (selectedDate > today) {
      setError('Birth date cannot be in the future');
      return;
    }

    try {
      await onSubmit(formData);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Failed to save child');
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>{child ? 'Edit Child' : 'Add Child'}</DialogTitle>
      <DialogContent>
        <Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          {error && (
            <Alert severity="error" onClose={() => setError('')}>
              {error}
            </Alert>
          )}

          <TextField
            label="Name"
            value={formData.name}
            onChange={handleChange('name')}
            fullWidth
            required
            autoFocus
            disabled={isLoading}
          />

          <TextField
            label="Birth Date"
            type="date"
            value={formData.birthDate}
            onChange={handleChange('birthDate')}
            fullWidth
            required
            InputLabelProps={{
              shrink: true,
            }}
            disabled={isLoading}
          />

          <TextField
            label="Gender"
            value={formData.gender}
            onChange={handleChange('gender')}
            fullWidth
            required
            select
            disabled={isLoading}
          >
            <MenuItem value="male">Male</MenuItem>
            <MenuItem value="female">Female</MenuItem>
            <MenuItem value="other">Other</MenuItem>
          </TextField>

          <TextField
            label="Photo URL (Optional)"
            value={formData.photoUrl}
            onChange={handleChange('photoUrl')}
            fullWidth
            placeholder="https://example.com/photo.jpg"
            disabled={isLoading}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={isLoading}>
          Cancel
        </Button>
        <Button onClick={handleSubmit} variant="contained" disabled={isLoading}>
          {isLoading ? 'Saving...' : child ? 'Update' : 'Add'}
        </Button>
      </DialogActions>
    </Dialog>
  );
}