maternal-app/maternal-web/components/onboarding/FamilySetupStep.tsx

'use client';

import { useState } from 'react';
import {
  Box,
  Card,
  CardActionArea,
  CardContent,
  Typography,
  TextField,
  Button,
  Alert,
  MenuItem,
} from '@mui/material';
import { FamilyRestroom, PersonAdd } from '@mui/icons-material';

export interface ChildData {
  name: string;
  birthDate: string;
  gender: 'male' | 'female' | 'other';
}

interface FamilySetupStepProps {
  onCreateFamily: (childData: ChildData) => Promise<void>;
  onJoinFamily: (shareCode: string) => Promise<void>;
  loading: boolean;
  error: string;
  t: (key: string) => string;
}

export function FamilySetupStep({
  onCreateFamily,
  onJoinFamily,
  loading,
  error,
  t,
}: FamilySetupStepProps) {
  const [choice, setChoice] = useState<'create' | 'join' | null>(null);
  const [shareCode, setShareCode] = useState('');
  const [childName, setChildName] = useState('');
  const [childBirthDate, setChildBirthDate] = useState('');
  const [childGender, setChildGender] = useState<'male' | 'female' | 'other'>('other');

  if (choice === 'create') {
    return (
      <Box sx={{ py: 4 }}>
        <Typography variant="h5" gutterBottom fontWeight="600">
          {t('child.title')}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          {t('child.subtitle')}
        </Typography>

        {error && (
          <Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
            {error}
          </Alert>
        )}

        <TextField
          fullWidth
          label={t('child.name')}
          value={childName}
          onChange={(e) => setChildName(e.target.value)}
          margin="normal"
          required
          disabled={loading}
          InputProps={{
            sx: { borderRadius: 3 },
          }}
        />

        <TextField
          fullWidth
          label={t('child.dateOfBirth')}
          type="date"
          value={childBirthDate}
          onChange={(e) => setChildBirthDate(e.target.value)}
          margin="normal"
          required
          disabled={loading}
          InputLabelProps={{
            shrink: true,
          }}
          InputProps={{
            sx: { borderRadius: 3 },
          }}
        />

        <TextField
          fullWidth
          select
          label={t('child.gender')}
          value={childGender}
          onChange={(e) => setChildGender(e.target.value as 'male' | 'female' | 'other')}
          margin="normal"
          disabled={loading}
          InputProps={{
            sx: { borderRadius: 3 },
          }}
        >
          <MenuItem value="male">{t('child.genders.male')}</MenuItem>
          <MenuItem value="female">{t('child.genders.female')}</MenuItem>
          <MenuItem value="other">{t('child.genders.preferNotToSay')}</MenuItem>
        </TextField>

        <Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
          <Button onClick={() => setChoice(null)} disabled={loading}>
            {t('navigation.back')}
          </Button>
          <Button
            variant="contained"
            onClick={() => {
              if (!childName.trim() || !childBirthDate) {
                return;
              }
              onCreateFamily({ name: childName, birthDate: childBirthDate, gender: childGender });
            }}
            disabled={loading || !childName.trim() || !childBirthDate}
            fullWidth
          >
            Create Family
          </Button>
        </Box>
      </Box>
    );
  }

  if (choice === 'join') {
    return (
      <Box sx={{ py: 4 }}>
        <Typography variant="h5" gutterBottom fontWeight="600">
          Join Existing Family
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          Enter the family code to join an existing family
        </Typography>

        {error && (
          <Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
            {error}
          </Alert>
        )}

        <TextField
          fullWidth
          label="Family Code"
          value={shareCode}
          onChange={(e) => setShareCode(e.target.value.toUpperCase())}
          margin="normal"
          placeholder="ABC123DEF"
          helperText="Ask your family admin for the code"
          required
          disabled={loading}
          InputProps={{
            sx: { borderRadius: 3 },
          }}
        />

        <Alert severity="info" sx={{ mt: 2, borderRadius: 2 }}>
          You'll be added as a viewer by default. The admin can change your role later.
        </Alert>

        <Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
          <Button onClick={() => setChoice(null)} disabled={loading}>
            {t('navigation.back')}
          </Button>
          <Button
            variant="contained"
            onClick={() => onJoinFamily(shareCode)}
            disabled={loading || !shareCode}
            fullWidth
          >
            Join Family
          </Button>
        </Box>
      </Box>
    );
  }

  return (
    <Box sx={{ py: 4 }}>
      <Typography variant="h5" gutterBottom align="center" fontWeight="600">
        Choose Your Setup
      </Typography>
      <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 4 }}>
        Start tracking or join an existing family
      </Typography>

      {error && (
        <Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
          {error}
        </Alert>
      )}

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Card
          sx={{
            transition: 'all 0.2s',
            '&:hover': {
              transform: 'translateY(-4px)',
              boxShadow: 4,
            },
          }}
        >
          <CardActionArea onClick={() => setChoice('create')} sx={{ p: 2 }}>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <FamilyRestroom fontSize="large" color="primary" />
                <Box>
                  <Typography variant="h6" fontWeight="600">
                    Create New Family
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    Start tracking for your child. Invite family members later.
                  </Typography>
                </Box>
              </Box>
            </CardContent>
          </CardActionArea>
        </Card>

        <Card
          sx={{
            transition: 'all 0.2s',
            '&:hover': {
              transform: 'translateY(-4px)',
              boxShadow: 4,
            },
          }}
        >
          <CardActionArea onClick={() => setChoice('join')} sx={{ p: 2 }}>
            <CardContent>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <PersonAdd fontSize="large" color="primary" />
                <Box>
                  <Typography variant="h6" fontWeight="600">
                    Join Existing Family
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    Enter family code to join. Access shared tracking.
                  </Typography>
                </Box>
              </Box>
            </CardContent>
          </CardActionArea>
        </Card>
      </Box>
    </Box>
  );
}