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

'use client';

import {
  Card,
  CardContent,
  Typography,
  Box,
  Grid,
  LinearProgress,
  Divider,
  List,
  ListItem,
  ListItemText,
  IconButton,
  Button,
  Chip,
} from '@mui/material';
import {
  Restaurant,
  Hotel,
  BabyChangingStation,
  NavigateBefore,
  NavigateNext,
  Download,
  EmojiEvents,
  Timeline,
} from '@mui/icons-material';
import { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { MonthlyReport, analyticsApi } from '@/lib/api/analytics';
import { useLocalizedDate } from '@/hooks/useLocalizedDate';
import { format, startOfMonth, addMonths, subMonths } from 'date-fns';

interface MonthlyReportCardProps {
  childId: string;
}

export default function MonthlyReportCard({ childId }: MonthlyReportCardProps) {
  const [report, setReport] = useState<MonthlyReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [currentMonth, setCurrentMonth] = useState<Date>(startOfMonth(new Date()));
  const { format: formatDate } = useLocalizedDate();

  useEffect(() => {
    loadReport();
  }, [childId, currentMonth]);

  const loadReport = async () => {
    setLoading(true);
    try {
      const data = await analyticsApi.getMonthlyReport(childId, currentMonth);
      setReport(data);
    } catch (error) {
      console.error('Failed to load monthly report:', error);
    } finally {
      setLoading(false);
    }
  };

  const handlePreviousMonth = () => {
    setCurrentMonth(subMonths(currentMonth, 1));
  };

  const handleNextMonth = () => {
    setCurrentMonth(addMonths(currentMonth, 1));
  };

  const handleExport = async (format: 'json' | 'csv' | 'pdf') => {
    try {
      const blob = await analyticsApi.exportData(
        childId,
        format,
        report?.month,
        addMonths(report!.month, 1),
      );

      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `monthly-report-${formatDate(currentMonth, 'yyyy-MM')}.${format}`;
      link.click();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Failed to export report:', error);
    }
  };

  if (loading) {
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Monthly Report
          </Typography>
          <LinearProgress />
        </CardContent>
      </Card>
    );
  }

  if (!report) {
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Monthly Report
          </Typography>
          <Typography color="text.secondary">
            No data available for this month
          </Typography>
        </CardContent>
      </Card>
    );
  }

  // Prepare chart data
  const chartData = report.weeklyData.map((week, index) => ({
    week: `Week ${index + 1}`,
    Feedings: week.feedings,
    'Sleep (hrs)': week.sleepHours,
    Diapers: week.diapers,
  }));

  return (
    <Card>
      <CardContent>
        {/* Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
          <Typography variant="h6">Monthly Report</Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <IconButton size="medium" onClick={handlePreviousMonth} sx={{ minWidth: 48, minHeight: 48 }}>
              <NavigateBefore />
            </IconButton>
            <Typography variant="body2">
              {formatDate(report.month, 'MMMM yyyy')}
            </Typography>
            <IconButton size="medium" onClick={handleNextMonth} disabled={currentMonth >= startOfMonth(new Date())} sx={{ minWidth: 48, minHeight: 48 }}>
              <NavigateNext />
            </IconButton>
          </Box>
        </Box>

        {/* Summary Cards */}
        <Grid container spacing={2} sx={{ mb: 3 }}>
          <Grid item xs={12} md={4}>
            <Box sx={{ p: 2, bgcolor: 'rgba(233, 30, 99, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#E91E63' }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                <Restaurant sx={{ color: '#E91E63' }} />
                <Typography variant="subtitle2">Feedings</Typography>
              </Box>
              <Typography variant="h4" fontWeight={600}>
                {report.summary.totalFeedings}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageFeedingsPerDay.toFixed(1)} per day average
              </Typography>
            </Box>
          </Grid>

          <Grid item xs={12} md={4}>
            <Box sx={{ p: 2, bgcolor: 'rgba(25, 118, 210, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#1976D2' }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                <Hotel sx={{ color: '#1976D2' }} />
                <Typography variant="subtitle2">Sleep</Typography>
              </Box>
              <Typography variant="h4" fontWeight={600}>
                {Math.round(report.summary.totalSleepHours)}h
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageSleepHoursPerDay.toFixed(1)} hours per day
              </Typography>
            </Box>
          </Grid>

          <Grid item xs={12} md={4}>
            <Box sx={{ p: 2, bgcolor: 'rgba(245, 124, 0, 0.1)', borderRadius: 1, borderLeft: '4px solid', borderColor: '#F57C00' }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
                <BabyChangingStation sx={{ color: '#F57C00' }} />
                <Typography variant="subtitle2">Diapers</Typography>
              </Box>
              <Typography variant="h4" fontWeight={600}>
                {report.summary.totalDiapers}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageDiapersPerDay.toFixed(1)} per day average
              </Typography>
            </Box>
          </Grid>
        </Grid>

        <Divider sx={{ my: 2 }} />

        {/* Trends Chart */}
        <Box sx={{ mt: 3 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
            <Timeline />
            <Typography variant="subtitle2">
              Weekly Trends
            </Typography>
          </Box>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="week" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="Feedings" stroke="#E91E63" strokeWidth={2} />
              <Line type="monotone" dataKey="Sleep (hrs)" stroke="#1976D2" strokeWidth={2} />
              <Line type="monotone" dataKey="Diapers" stroke="#F57C00" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </Box>

        {/* Trends Summary */}
        {report.trends && report.trends.length > 0 && (
          <Box sx={{ mt: 3 }}>
            <Typography variant="subtitle2" gutterBottom>
              Trends Observed
            </Typography>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
              {report.trends.map((trend, index) => (
                <Chip key={index} label={trend} size="medium" color="primary" variant="outlined" />
              ))}
            </Box>
          </Box>
        )}

        {/* Milestones */}
        {report.milestones && report.milestones.length > 0 && (
          <Box sx={{ mt: 3 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
              <EmojiEvents color="success" />
              <Typography variant="subtitle2">
                Milestones This Month
              </Typography>
            </Box>
            <List dense>
              {report.milestones.map((milestone, index) => (
                <ListItem key={index}>
                  <ListItemText
                    primary={milestone}
                    primaryTypographyProps={{ variant: 'body2' }}
                  />
                </ListItem>
              ))}
            </List>
          </Box>
        )}

        {/* Export Options */}
        <Box sx={{ mt: 3, display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
          <Button
            size="medium"
            startIcon={<Download />}
            onClick={() => handleExport('pdf')}
            sx={{ minHeight: 48 }}
          >
            PDF
          </Button>
          <Button
            size="medium"
            startIcon={<Download />}
            onClick={() => handleExport('csv')}
            sx={{ minHeight: 48 }}
          >
            CSV
          </Button>
        </Box>
      </CardContent>
    </Card>
  );
}