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

'use client';

import {
  Card,
  CardContent,
  Typography,
  Box,
  Grid,
  LinearProgress,
  Chip,
  Divider,
  List,
  ListItem,
  ListItemText,
  IconButton,
  Button,
} from '@mui/material';
import {
  Restaurant,
  Hotel,
  BabyChangingStation,
  TrendingUp,
  TrendingDown,
  TrendingFlat,
  NavigateBefore,
  NavigateNext,
  Download,
} from '@mui/icons-material';
import { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line } from 'recharts';
import { WeeklyReport, analyticsApi } from '@/lib/api/analytics';
import { useLocalizedDate } from '@/hooks/useLocalizedDate';
import { format, startOfWeek, addWeeks, subWeeks } from 'date-fns';

interface WeeklyReportCardProps {
  childId: string;
}

export default function WeeklyReportCard({ childId }: WeeklyReportCardProps) {
  const [report, setReport] = useState<WeeklyReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(startOfWeek(new Date()));
  const { format: formatDate } = useLocalizedDate();

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

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

  const handlePreviousWeek = () => {
    setCurrentWeekStart(subWeeks(currentWeekStart, 1));
  };

  const handleNextWeek = () => {
    setCurrentWeekStart(addWeeks(currentWeekStart, 1));
  };

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

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

  const getTrendIcon = (trend: 'increasing' | 'stable' | 'decreasing' | 'improving' | 'declining') => {
    if (trend === 'increasing' || trend === 'improving') {
      return <TrendingUp color="success" fontSize="small" />;
    } else if (trend === 'decreasing' || trend === 'declining') {
      return <TrendingDown color="error" fontSize="small" />;
    }
    return <TrendingFlat color="disabled" fontSize="small" />;
  };

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

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

  // Prepare chart data
  const chartData = report.dailyData.map((day) => ({
    date: format(day.date, 'EEE'),
    Feedings: day.feedings,
    'Sleep (hrs)': day.sleepHours,
    Diapers: day.diapers,
  }));

  return (
    <Card>
      <CardContent>
        {/* Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
          <Typography variant="h6">Weekly Report</Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <IconButton size="small" onClick={handlePreviousWeek}>
              <NavigateBefore />
            </IconButton>
            <Typography variant="body2">
              {formatDate(report.weekStart, 'MMM d')} - {formatDate(report.weekEnd, 'MMM d')}
            </Typography>
            <IconButton size="small" onClick={handleNextWeek} disabled={currentWeekStart >= startOfWeek(new Date())}>
              <NavigateNext />
            </IconButton>
          </Box>
        </Box>

        {/* Summary Cards */}
        <Grid container spacing={2} sx={{ mb: 3 }}>
          <Grid item xs={4}>
            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
                <Restaurant fontSize="small" color="primary" />
                {getTrendIcon(report.trends.feedingTrend)}
              </Box>
              <Typography variant="h5" fontWeight={600}>
                {report.summary.totalFeedings}
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Feedings
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageFeedingsPerDay.toFixed(1)}/day
              </Typography>
            </Box>
          </Grid>

          <Grid item xs={4}>
            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
                <Hotel fontSize="small" sx={{ color: '#1976D2' }} />
                {getTrendIcon(report.trends.sleepTrend)}
              </Box>
              <Typography variant="h5" fontWeight={600}>
                {Math.round(report.summary.totalSleepHours)}h
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Sleep
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageSleepHoursPerDay.toFixed(1)}h/day
              </Typography>
            </Box>
          </Grid>

          <Grid item xs={4}>
            <Box sx={{ textAlign: 'center', p: 2, bgcolor: 'background.default', borderRadius: 1 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0.5, mb: 0.5 }}>
                <BabyChangingStation fontSize="small" sx={{ color: '#F57C00' }} />
              </Box>
              <Typography variant="h5" fontWeight={600}>
                {report.summary.totalDiapers}
              </Typography>
              <Typography variant="caption" color="text.secondary">
                Diapers
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {report.summary.averageDiapersPerDay.toFixed(1)}/day
              </Typography>
            </Box>
          </Grid>
        </Grid>

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

        {/* Chart */}
        <Box sx={{ mt: 3 }}>
          <Typography variant="subtitle2" gutterBottom>
            Daily Breakdown
          </Typography>
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="Feedings" fill="#E91E63" />
              <Bar dataKey="Sleep (hrs)" fill="#1976D2" />
              <Bar dataKey="Diapers" fill="#F57C00" />
            </BarChart>
          </ResponsiveContainer>
        </Box>

        {/* Highlights */}
        {report.highlights && report.highlights.length > 0 && (
          <Box sx={{ mt: 3 }}>
            <Typography variant="subtitle2" gutterBottom>
              Highlights
            </Typography>
            <List dense>
              {report.highlights.map((highlight, index) => (
                <ListItem key={index}>
                  <ListItemText primary={highlight} />
                </ListItem>
              ))}
            </List>
          </Box>
        )}

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