maternal-app/maternal-web/components/features/analytics/PredictionsCard.tsx

'use client';

import { Card, CardContent, Typography, Box, Chip, LinearProgress, Stack, Alert } from '@mui/material';
import { TrendingUp, Hotel, Restaurant, AccessTime, WbSunny } from '@mui/icons-material';
import { formatDistanceToNow, format } from 'date-fns';
import { PredictionInsights } from '@/lib/api/analytics';
import { useLocalizedDate } from '@/hooks/useLocalizedDate';

interface PredictionsCardProps {
  predictions: PredictionInsights | null;
  loading: boolean;
}

export default function PredictionsCard({ predictions, loading }: PredictionsCardProps) {
  const { formatDistance } = useLocalizedDate();

  if (loading) {
    return (
      <Card>
        <CardContent>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
            <TrendingUp sx={{ mr: 1, color: 'primary.main' }} />
            <Typography variant="h6">Predictions</Typography>
          </Box>
          <LinearProgress />
        </CardContent>
      </Card>
    );
  }

  if (!predictions) {
    return (
      <Card>
        <CardContent>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
            <TrendingUp sx={{ mr: 1, color: 'primary.main' }} />
            <Typography variant="h6">Predictions</Typography>
          </Box>
          <Alert severity="info">Not enough data for predictions yet. Track more activities to see predictions!</Alert>
        </CardContent>
      </Card>
    );
  }

  const { sleep, feeding } = predictions;

  // Calculate confidence color
  const getConfidenceColor = (confidence: number): string => {
    if (confidence >= 0.85) return 'success';
    if (confidence >= 0.6) return 'warning';
    return 'error';
  };

  // Format confidence percentage
  const formatConfidence = (confidence: number): string => {
    return `${Math.round(confidence * 100)}%`;
  };

  return (
    <Card>
      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <TrendingUp sx={{ mr: 1, color: 'primary.main' }} />
            <Typography variant="h6">Predictions</Typography>
          </Box>
          <Typography variant="caption" color="text.secondary">
            Updated {formatDistanceToNow(predictions.generatedAt, { addSuffix: true })}
          </Typography>
        </Box>

        <Stack spacing={3}>
          {/* Sleep Predictions */}
          <Box>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
              <Hotel sx={{ mr: 1, color: '#1976D2' }} />
              <Typography variant="subtitle1" fontWeight={600}>
                Sleep
              </Typography>
            </Box>

            {sleep.nextNapTime ? (
              <Box sx={{ pl: 4 }}>
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2" color="text.secondary">
                    Next Nap
                  </Typography>
                  <Chip
                    size="small"
                    label={formatConfidence(sleep.nextNapConfidence)}
                    color={getConfidenceColor(sleep.nextNapConfidence) as any}
                  />
                </Box>
                <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                  <AccessTime sx={{ fontSize: 18, mr: 0.5, color: 'text.secondary' }} />
                  <Typography variant="body1" fontWeight={500}>
                    {formatDistanceToNow(sleep.nextNapTime, { addSuffix: true })}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" sx={{ ml: 1 }}>
                    ({format(sleep.nextNapTime, 'h:mm a')})
                  </Typography>
                </Box>
                <LinearProgress
                  variant="determinate"
                  value={sleep.nextNapConfidence * 100}
                  sx={{ mb: 1, height: 6, borderRadius: 3 }}
                />
              </Box>
            ) : (
              <Typography variant="body2" color="text.secondary" sx={{ pl: 4 }}>
                No nap prediction available
              </Typography>
            )}

            {sleep.nextBedtime && (
              <Box sx={{ pl: 4, mt: 2 }}>
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2" color="text.secondary">
                    Next Bedtime
                  </Typography>
                  <Chip
                    size="small"
                    label={formatConfidence(sleep.bedtimeConfidence)}
                    color={getConfidenceColor(sleep.bedtimeConfidence) as any}
                  />
                </Box>
                <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                  <WbSunny sx={{ fontSize: 18, mr: 0.5, color: 'text.secondary' }} />
                  <Typography variant="body1" fontWeight={500}>
                    {formatDistanceToNow(sleep.nextBedtime, { addSuffix: true })}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" sx={{ ml: 1 }}>
                    ({format(sleep.nextBedtime, 'h:mm a')})
                  </Typography>
                </Box>
                <LinearProgress
                  variant="determinate"
                  value={sleep.bedtimeConfidence * 100}
                  sx={{ mb: 1, height: 6, borderRadius: 3 }}
                />
              </Box>
            )}

            {sleep.optimalWakeWindows.length > 0 && (
              <Box sx={{ pl: 4, mt: 1.5 }}>
                <Typography variant="caption" color="text.secondary">
                  Optimal wake windows: {sleep.optimalWakeWindows.map((w) => `${w} min`).join(', ')}
                </Typography>
              </Box>
            )}

            {sleep.reasoning && (
              <Typography variant="caption" color="text.secondary" sx={{ pl: 4, mt: 1, display: 'block' }}>
                {sleep.reasoning}
              </Typography>
            )}
          </Box>

          {/* Feeding Predictions */}
          <Box>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
              <Restaurant sx={{ mr: 1, color: '#E91E63' }} />
              <Typography variant="subtitle1" fontWeight={600}>
                Feeding
              </Typography>
            </Box>

            {feeding.nextFeedingTime ? (
              <Box sx={{ pl: 4 }}>
                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2" color="text.secondary">
                    Next Feeding
                  </Typography>
                  <Chip
                    size="small"
                    label={formatConfidence(feeding.confidence)}
                    color={getConfidenceColor(feeding.confidence) as any}
                  />
                </Box>
                <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                  <AccessTime sx={{ fontSize: 18, mr: 0.5, color: 'text.secondary' }} />
                  <Typography variant="body1" fontWeight={500}>
                    {formatDistanceToNow(feeding.nextFeedingTime, { addSuffix: true })}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" sx={{ ml: 1 }}>
                    ({format(feeding.nextFeedingTime, 'h:mm a')})
                  </Typography>
                </Box>
                <LinearProgress
                  variant="determinate"
                  value={feeding.confidence * 100}
                  sx={{ mb: 1, height: 6, borderRadius: 3 }}
                />
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
                  Expected interval: {feeding.expectedInterval.toFixed(1)} hours
                </Typography>
              </Box>
            ) : (
              <Typography variant="body2" color="text.secondary" sx={{ pl: 4 }}>
                No feeding prediction available
              </Typography>
            )}

            {feeding.reasoning && (
              <Typography variant="caption" color="text.secondary" sx={{ pl: 4, mt: 1, display: 'block' }}>
                {feeding.reasoning}
              </Typography>
            )}
          </Box>
        </Stack>
      </CardContent>
    </Card>
  );
}