maternal-app/maternal-web/app/track/medicine/page.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Button,
  Paper,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  IconButton,
  Alert,
  CircularProgress,
  Card,
  CardContent,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Chip,
  Snackbar,
  Tabs,
  Tab,
} from '@mui/material';
import {
  ArrowBack,
  Save,
  MedicalServices,
  Delete,
  Refresh,
  ChildCare,
  Add,
  Thermostat,
  LocalHospital,
  Medication as MedicationIcon,
} from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
import { withErrorBoundary } from '@/components/common/ErrorFallbacks';
import { useAuth } from '@/lib/auth/AuthContext';
import { trackingApi, Activity } from '@/lib/api/tracking';
import { childrenApi, Child } from '@/lib/api/children';
import { VoiceInputButton } from '@/components/voice/VoiceInputButton';
import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
import { motion } from 'framer-motion';
import { useLocalizedDate } from '@/hooks/useLocalizedDate';
import { useTranslation } from '@/hooks/useTranslation';
import { UnitInput } from '@/components/forms/UnitInput';
import { convertVolume, convertTemperature } from '@/lib/utils/unitConversion';
import { MeasurementSystem } from '@/hooks/useLocale';
import { useDispatch, useSelector } from 'react-redux';
import { fetchChildren, selectChild, selectSelectedChild, childrenSelectors } from '@/store/slices/childrenSlice';
import { AppDispatch, RootState } from '@/store/store';
import ChildSelector from '@/components/common/ChildSelector';

type MedicalActivityType = 'medication' | 'temperature' | 'doctor';

interface MedicationData {
  medicineName: string;
  dosage: string;
  unit?: string;
  route?: 'oral' | 'topical' | 'injection' | 'other';
  reason?: string;
}

interface TemperatureData {
  temperature: number; // stored in Celsius
  location?: 'oral' | 'rectal' | 'armpit' | 'ear' | 'forehead';
  symptoms?: string;
}

interface DoctorVisitData {
  visitType: 'checkup' | 'emergency' | 'followup' | 'vaccination' | 'other';
  diagnosis?: string;
  treatment?: string;
  doctorName?: string;
}

function MedicalTrackPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t } = useTranslation('tracking');
  const { formatDistanceToNow } = useLocalizedDate();
  const dispatch = useDispatch<AppDispatch>();

  // Redux state
  const children = useSelector((state: RootState) => childrenSelectors.selectAll(state));
  const selectedChild = useSelector(selectSelectedChild);
  const familyId = useSelector((state: RootState) => state.auth.user?.familyId);

  // Local state
  const [selectedChildIds, setSelectedChildIds] = useState<string[]>([]);
  const [activityType, setActivityType] = useState<MedicalActivityType>('medication');

  // Medication state
  const [medicineName, setMedicineName] = useState<string>('');
  const [dosage, setDosage] = useState<number>(0);
  const [dosageText, setDosageText] = useState<string>('');
  const [unit, setUnit] = useState<string>('ml');
  const [route, setRoute] = useState<'oral' | 'topical' | 'injection' | 'other'>('oral');
  const [reason, setReason] = useState<string>('');

  // Temperature state
  const [temperature, setTemperature] = useState<number>(0);
  const [tempLocation, setTempLocation] = useState<'oral' | 'rectal' | 'armpit' | 'ear' | 'forehead'>('oral');
  const [symptoms, setSymptoms] = useState<string>('');

  // Doctor visit state
  const [visitType, setVisitType] = useState<'checkup' | 'emergency' | 'followup' | 'vaccination' | 'other'>('checkup');
  const [diagnosis, setDiagnosis] = useState<string>('');
  const [treatment, setTreatment] = useState<string>('');
  const [doctorName, setDoctorName] = useState<string>('');

  // Common state
  const [notes, setNotes] = useState<string>('');
  const [recentActivities, setRecentActivities] = useState<Activity[]>([]);
  const [loading, setLoading] = useState(false);
  const [activitiesLoading, setActivitiesLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  // Delete confirmation dialog
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [activityToDelete, setActivityToDelete] = useState<string | null>(null);

  // Load children from Redux
  useEffect(() => {
    if (familyId && children.length === 0) {
      dispatch(fetchChildren(familyId));
    }
  }, [familyId, dispatch, children.length]);

  // Sync selectedChildIds with Redux selectedChild
  useEffect(() => {
    if (selectedChild?.id) {
      setSelectedChildIds([selectedChild.id]);
    }
  }, [selectedChild]);

  useEffect(() => {
    if (selectedChild?.id) {
      loadRecentActivities();
    }
  }, [selectedChild?.id, activityType]);

  const loadRecentActivities = async () => {
    if (!selectedChild?.id) return;

    try {
      setActivitiesLoading(true);
      // Load all medical-related activities (including legacy 'medicine' type)
      const medicalTypes = ['medication', 'temperature', 'doctor', 'medicine'];
      const allActivities = await Promise.all(
        medicalTypes.map(type =>
          trackingApi.getActivities(selectedChild.id, type as any).catch(() => [])
        )
      );

      // Flatten and filter by current tab (but include legacy 'medicine' in medication tab)
      const flatActivities = allActivities.flat();
      const filtered = flatActivities.filter(activity => {
        if (activityType === 'medication') {
          // Include both 'medication' and legacy 'medicine' types
          return activity.type === 'medication' || activity.type === 'medicine';
        }
        return activity.type === activityType;
      });

      const sorted = filtered.sort((a, b) =>
        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
      ).slice(0, 10);
      setRecentActivities(sorted);
    } catch (err: any) {
      console.error('Failed to load recent activities:', err);
    } finally {
      setActivitiesLoading(false);
    }
  };

  const handleSubmit = async () => {
    if (!selectedChild?.id) {
      setError(t('common.selectChild'));
      return;
    }

    // Validation based on activity type
    if (activityType === 'medication') {
      if (!medicineName) {
        setError(t('health.medicineName.required'));
        return;
      }
      const dosageValue = unit === 'ml' ? dosage : dosageText;
      if (!dosageValue || (unit === 'ml' && dosage === 0) || (unit !== 'ml' && !dosageText)) {
        setError(t('health.dosage.required'));
        return;
      }
    } else if (activityType === 'temperature') {
      if (temperature === 0) {
        setError('Please enter temperature');
        return;
      }
    } else if (activityType === 'doctor') {
      if (!visitType) {
        setError('Please select visit type');
        return;
      }
    }

    try {
      setLoading(true);
      setError(null);

      let data: MedicationData | TemperatureData | DoctorVisitData;

      if (activityType === 'medication') {
        data = {
          medicineName,
          dosage: unit === 'ml' ? dosage.toString() : dosageText,
          unit,
          route,
          reason: reason || undefined,
        };
      } else if (activityType === 'temperature') {
        data = {
          temperature,
          location: tempLocation,
          symptoms: symptoms || undefined,
        };
      } else {
        data = {
          visitType,
          diagnosis: diagnosis || undefined,
          treatment: treatment || undefined,
          doctorName: doctorName || undefined,
        };
      }

      await trackingApi.createActivity(selectedChild.id, {
        type: activityType,
        timestamp: new Date().toISOString(),
        data,
        notes: notes || undefined,
      });

      setSuccessMessage(`${activityType.charAt(0).toUpperCase() + activityType.slice(1)} logged successfully!`);

      resetForm();
      await loadRecentActivities();
    } catch (err: any) {
      console.error('Failed to save activity:', err);
      setError(err.response?.data?.message || 'Failed to save activity');
    } finally {
      setLoading(false);
    }
  };

  const resetForm = () => {
    // Medication
    setMedicineName('');
    setDosage(0);
    setDosageText('');
    setUnit('ml');
    setRoute('oral');
    setReason('');

    // Temperature
    setTemperature(0);
    setTempLocation('oral');
    setSymptoms('');

    // Doctor visit
    setVisitType('checkup');
    setDiagnosis('');
    setTreatment('');
    setDoctorName('');

    setNotes('');
  };

  const handleDeleteClick = (activityId: string) => {
    setActivityToDelete(activityId);
    setDeleteDialogOpen(true);
  };

  const handleDeleteConfirm = async () => {
    if (!activityToDelete) return;

    try {
      setLoading(true);
      await trackingApi.deleteActivity(activityToDelete);
      setSuccessMessage('Activity deleted successfully');
      setDeleteDialogOpen(false);
      setActivityToDelete(null);
      await loadRecentActivities();
    } catch (err: any) {
      console.error('Failed to delete activity:', err);
      setError(err.response?.data?.message || 'Failed to delete activity');
    } finally {
      setLoading(false);
    }
  };

  const getActivityDetails = (activity: Activity) => {
    // Handle both 'medication' and legacy 'medicine' types
    if (activity.type === 'medication' || activity.type === 'medicine') {
      const data = activity.data as MedicationData;
      if (data.unit === 'ml') {
        const measurementSystem: MeasurementSystem = (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
        const converted = convertVolume(parseFloat(data.dosage), measurementSystem);
        const roundedValue = Math.round(converted.value * 10) / 10;
        let details = `${roundedValue} ${converted.unit}`;
        if (data.route) details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
        if (data.reason) details += ` - ${data.reason}`;
        return details;
      }
      let details = `${data.dosage} ${data.unit || ''}`;
      if (data.route) details += ` - ${data.route.charAt(0).toUpperCase() + data.route.slice(1)}`;
      if (data.reason) details += ` - ${data.reason}`;
      return details;
    } else if (activity.type === 'temperature') {
      const data = activity.data as TemperatureData;
      const measurementSystem: MeasurementSystem = (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
      const converted = convertTemperature(data.temperature, measurementSystem);
      const roundedValue = Math.round(converted.value * 10) / 10;
      let details = `${roundedValue}${converted.unit}`;
      if (data.location) details += ` - ${data.location.charAt(0).toUpperCase() + data.location.slice(1)}`;
      if (data.symptoms) details += ` - ${data.symptoms}`;
      return details;
    } else if (activity.type === 'doctor') {
      const data = activity.data as DoctorVisitData;
      let details = data.visitType.charAt(0).toUpperCase() + data.visitType.slice(1);
      if (data.doctorName) details += ` - Dr. ${data.doctorName}`;
      if (data.diagnosis) details += ` - ${data.diagnosis}`;
      return details;
    }
    return '';
  };

  const getActivityIcon = (type: string) => {
    switch (type) {
      case 'medication':
      case 'medicine': // Legacy type
        return <MedicationIcon color="error" />;
      case 'temperature':
        return <Thermostat color="warning" />;
      case 'doctor':
        return <LocalHospital color="primary" />;
      default:
        return <MedicalServices color="error" />;
    }
  };

  const getActivityTitle = (activity: Activity) => {
    if (activity.type === 'medication' || activity.type === 'medicine') {
      const data = activity.data as MedicationData;
      return data.medicineName;
    } else if (activity.type === 'temperature') {
      return 'Temperature Reading';
    } else if (activity.type === 'doctor') {
      return 'Doctor Visit';
    }
    return 'Medical Record';
  };

  const childrenLoading = useSelector((state: RootState) => state.children.loading);

  if (childrenLoading && children.length === 0) {
    return (
      <ProtectedRoute>
        <AppShell>
          <Box>
            <Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
              Medical
            </Typography>
            <Paper sx={{ p: 3, mb: 3 }}>
              <FormSkeleton />
            </Paper>
            <ActivityListSkeleton count={3} />
          </Box>
        </AppShell>
      </ProtectedRoute>
    );
  }

  if (!familyId || children.length === 0) {
    return (
      <ProtectedRoute>
        <AppShell>
          <Card>
            <CardContent sx={{ textAlign: 'center', py: 8 }}>
              <ChildCare sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
              <Typography variant="h6" color="text.secondary" gutterBottom>
                {t('common.noChildrenAdded')}
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                {t('common.noChildrenMessage')}
              </Typography>
              <Button variant="contained" startIcon={<Add />} onClick={() => router.push('/children')}>
                {t('common.addChild')}
              </Button>
            </CardContent>
          </Card>
        </AppShell>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AppShell>
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
            <IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
              <ArrowBack />
            </IconButton>
            <Typography variant="h4" fontWeight="600" sx={{ flex: 1 }}>
              Medical
            </Typography>
            <VoiceInputButton
              onTranscript={(transcript) => {
                console.log('[Medical] Voice transcript:', transcript);
              }}
              onClassifiedIntent={(result) => {
                if (result.intent === 'medicine' && result.structuredData) {
                  const data = result.structuredData;
                  setActivityType('medication');
                  if (data.medicineName) setMedicineName(data.medicineName);
                  if (data.unit) setUnit(data.unit);
                  if (data.dosage) {
                    if (data.unit === 'ml') {
                      setDosage(typeof data.dosage === 'number' ? data.dosage : parseFloat(data.dosage));
                    } else {
                      setDosageText(data.dosage.toString());
                    }
                  }
                  if (data.route) setRoute(data.route);
                  if (data.reason) setReason(data.reason);
                }
              }}
              size="medium"
            />
          </Box>

          {error && (
            <Alert severity="error" sx={{ mb: 3 }} onClose={() => setError(null)}>
              {error}
            </Alert>
          )}

          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
            {/* Child Selector */}
            {children.length > 0 && (
              <Paper sx={{ p: 2, mb: 3 }}>
                <ChildSelector
                  children={children}
                  selectedChildIds={selectedChildIds}
                  onChange={(childIds) => {
                    setSelectedChildIds(childIds);
                    if (childIds.length > 0) {
                      dispatch(selectChild(childIds[0]));
                    }
                  }}
                  mode="single"
                  label={t('common.selectChild')}
                  required
                />
              </Paper>
            )}

            {/* Activity Type Tabs */}
            <Paper sx={{ mb: 3 }}>
              <Tabs value={activityType} onChange={(e, newValue) => setActivityType(newValue)} variant="fullWidth">
                <Tab icon={<MedicationIcon />} iconPosition="start" label="Medication" value="medication" />
                <Tab icon={<Thermostat />} iconPosition="start" label="Temperature" value="temperature" />
                <Tab icon={<LocalHospital />} iconPosition="start" label="Doctor Visit" value="doctor" />
              </Tabs>
            </Paper>

            {/* Main Form */}
            <Paper sx={{ p: 3, mb: 3 }}>
              {activityType === 'medication' && (
                <>
                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
                    <MedicationIcon sx={{ fontSize: 36, color: 'error.main', mr: 2 }} />
                    <Typography variant="h6" fontWeight="600">
                      {t('health.medicineInfo')}
                    </Typography>
                  </Box>

                  <TextField
                    fullWidth
                    label={t('health.medicineName.label')}
                    value={medicineName}
                    onChange={(e) => setMedicineName(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder={t('health.medicineName.placeholder')}
                    required
                  />

                  <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
                    {unit === 'ml' ? (
                      <UnitInput
                        fullWidth
                        label={t('health.dosage.label')}
                        type="volume"
                        value={dosage}
                        onChange={(metricValue) => setDosage(metricValue)}
                        required
                      />
                    ) : (
                      <TextField
                        fullWidth
                        label={t('health.dosage.label')}
                        value={dosageText}
                        onChange={(e) => setDosageText(e.target.value)}
                        placeholder={t('health.dosage.placeholder')}
                        required
                      />
                    )}

                    <FormControl fullWidth>
                      <InputLabel>{t('health.unit')}</InputLabel>
                      <Select
                        value={unit}
                        onChange={(e) => {
                          const newUnit = e.target.value;
                          setUnit(newUnit);
                          if (newUnit === 'ml') {
                            setDosageText('');
                          } else {
                            setDosage(0);
                          }
                        }}
                        label={t('health.unit')}
                      >
                        <MenuItem value="ml">{t('health.units.ml')}</MenuItem>
                        <MenuItem value="mg">{t('health.units.mg')}</MenuItem>
                        <MenuItem value="tsp">{t('health.units.tsp')}</MenuItem>
                        <MenuItem value="tbsp">{t('health.units.tbsp')}</MenuItem>
                        <MenuItem value="drops">{t('health.units.drops')}</MenuItem>
                        <MenuItem value="tablet">{t('health.units.tablet')}</MenuItem>
                      </Select>
                    </FormControl>
                  </Box>

                  <FormControl fullWidth sx={{ mb: 3 }}>
                    <InputLabel>{t('health.route.label')}</InputLabel>
                    <Select
                      value={route}
                      onChange={(e) => setRoute(e.target.value as 'oral' | 'topical' | 'injection' | 'other')}
                      label={t('health.route.label')}
                    >
                      <MenuItem value="oral">{t('health.route.oral')}</MenuItem>
                      <MenuItem value="topical">{t('health.route.topical')}</MenuItem>
                      <MenuItem value="injection">{t('health.route.injection')}</MenuItem>
                      <MenuItem value="other">{t('health.route.other')}</MenuItem>
                    </Select>
                  </FormControl>

                  <TextField
                    fullWidth
                    label={t('health.reason.label')}
                    value={reason}
                    onChange={(e) => setReason(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder={t('health.reason.placeholder')}
                  />
                </>
              )}

              {activityType === 'temperature' && (
                <>
                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
                    <Thermostat sx={{ fontSize: 36, color: 'warning.main', mr: 2 }} />
                    <Typography variant="h6" fontWeight="600">
                      Temperature Reading
                    </Typography>
                  </Box>

                  <UnitInput
                    fullWidth
                    label="Temperature"
                    type="temperature"
                    value={temperature}
                    onChange={(metricValue) => setTemperature(metricValue)}
                    required
                    sx={{ mb: 3 }}
                  />

                  <FormControl fullWidth sx={{ mb: 3 }}>
                    <InputLabel>Measurement Location</InputLabel>
                    <Select
                      value={tempLocation}
                      onChange={(e) => setTempLocation(e.target.value as any)}
                      label="Measurement Location"
                    >
                      <MenuItem value="oral">Oral</MenuItem>
                      <MenuItem value="rectal">Rectal</MenuItem>
                      <MenuItem value="armpit">Armpit</MenuItem>
                      <MenuItem value="ear">Ear</MenuItem>
                      <MenuItem value="forehead">Forehead</MenuItem>
                    </Select>
                  </FormControl>

                  <TextField
                    fullWidth
                    label="Symptoms (optional)"
                    value={symptoms}
                    onChange={(e) => setSymptoms(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder="e.g., Fever, Cough, Runny nose"
                  />
                </>
              )}

              {activityType === 'doctor' && (
                <>
                  <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
                    <LocalHospital sx={{ fontSize: 36, color: 'primary.main', mr: 2 }} />
                    <Typography variant="h6" fontWeight="600">
                      Doctor Visit
                    </Typography>
                  </Box>

                  <FormControl fullWidth sx={{ mb: 3 }}>
                    <InputLabel>Visit Type</InputLabel>
                    <Select
                      value={visitType}
                      onChange={(e) => setVisitType(e.target.value as any)}
                      label="Visit Type"
                    >
                      <MenuItem value="checkup">Regular Checkup</MenuItem>
                      <MenuItem value="emergency">Emergency</MenuItem>
                      <MenuItem value="followup">Follow-up</MenuItem>
                      <MenuItem value="vaccination">Vaccination</MenuItem>
                      <MenuItem value="other">Other</MenuItem>
                    </Select>
                  </FormControl>

                  <TextField
                    fullWidth
                    label="Doctor Name (optional)"
                    value={doctorName}
                    onChange={(e) => setDoctorName(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder="Dr. Smith"
                  />

                  <TextField
                    fullWidth
                    label="Diagnosis (optional)"
                    value={diagnosis}
                    onChange={(e) => setDiagnosis(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder="Enter diagnosis or findings"
                  />

                  <TextField
                    fullWidth
                    label="Treatment (optional)"
                    value={treatment}
                    onChange={(e) => setTreatment(e.target.value)}
                    sx={{ mb: 3 }}
                    placeholder="Enter prescribed treatment"
                  />
                </>
              )}

              <TextField
                fullWidth
                label={t('feeding.notes')}
                multiline
                rows={3}
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                sx={{ mb: 3 }}
                placeholder={t('feeding.placeholders.notes')}
              />

              <Button
                fullWidth
                type="button"
                variant="contained"
                size="large"
                startIcon={<Save />}
                onClick={handleSubmit}
                disabled={loading}
              >
                {loading ? t('common.loading') : `Log ${activityType.charAt(0).toUpperCase() + activityType.slice(1)}`}
              </Button>
            </Paper>

            {/* Recent Activities */}
            <Paper sx={{ p: 3 }}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                <Typography variant="h6" fontWeight="600">
                  Recent {activityType.charAt(0).toUpperCase() + activityType.slice(1)} Records
                </Typography>
                <IconButton onClick={loadRecentActivities} disabled={activitiesLoading}>
                  <Refresh />
                </IconButton>
              </Box>

              {activitiesLoading ? (
                <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
                  <CircularProgress size={30} />
                </Box>
              ) : recentActivities.length === 0 ? (
                <Box sx={{ textAlign: 'center', py: 4 }}>
                  <Typography variant="body2" color="text.secondary">
                    {t('noEntries')}
                  </Typography>
                </Box>
              ) : (
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  {recentActivities.map((activity, index) => (
                    <motion.div
                      key={activity.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.2, delay: index * 0.05 }}
                    >
                      <Card variant="outlined">
                        <CardContent>
                          <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
                            <Box sx={{ mt: 0.5 }}>{getActivityIcon(activity.type)}</Box>
                            <Box sx={{ flex: 1 }}>
                              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
                                <Typography variant="body1" fontWeight="600">
                                  {getActivityTitle(activity)}
                                </Typography>
                                <Chip
                                  label={formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
                                  size="small"
                                  variant="outlined"
                                />
                              </Box>
                              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                                {getActivityDetails(activity)}
                              </Typography>
                              {activity.notes && (
                                <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
                                  {activity.notes}
                                </Typography>
                              )}
                            </Box>
                            <Box sx={{ display: 'flex', gap: 0.5 }}>
                              <IconButton
                                size="small"
                                color="error"
                                onClick={() => handleDeleteClick(activity.id)}
                                disabled={loading}
                              >
                                <Delete />
                              </IconButton>
                            </Box>
                          </Box>
                        </CardContent>
                      </Card>
                    </motion.div>
                  ))}
                </Box>
              )}
            </Paper>
          </motion.div>
        </Box>

        {/* Delete Confirmation Dialog */}
        <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
          <DialogTitle>{t('deleteEntry')}</DialogTitle>
          <DialogContent>
            <DialogContentText>{t('confirmDelete')}</DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setDeleteDialogOpen(false)} disabled={loading}>
              {t('common.cancel')}
            </Button>
            <Button onClick={handleDeleteConfirm} color="error" disabled={loading}>
              {loading ? t('common.loading') : t('common.delete')}
            </Button>
          </DialogActions>
        </Dialog>

        {/* Success Snackbar */}
        <Snackbar
          open={!!successMessage}
          autoHideDuration={3000}
          onClose={() => setSuccessMessage(null)}
          message={successMessage}
        />
      </AppShell>
    </ProtectedRoute>
  );
}

export default withErrorBoundary(MedicalTrackPage, 'form');