'use client';

import { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  CircularProgress,
  Alert,
  Paper,
  Divider,
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Avatar,
  Chip,
  ToggleButtonGroup,
  ToggleButton,
  Button,
} from '@mui/material';
import {
  Restaurant,
  Hotel,
  BabyChangingStation,
  TrendingUp,
  Timeline,
  Assessment,
  ChildCare,
  Add,
} from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { trackingApi, Activity, ActivityType } from '@/lib/api/tracking';
import { childrenApi, Child } from '@/lib/api/children';
import { subDays, startOfDay, endOfDay, parseISO, differenceInMinutes } from 'date-fns';
import { useLocalizedDate } from '@/hooks/useLocalizedDate';
import { useTranslation } from '@/hooks/useTranslation';
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

type DateRange = '7days' | '30days' | '3months';

interface DayData {
  date: string;
  feedings: number;
  sleepHours: number;
  diapers: number;
  activities: number;
}

interface DiaperTypeData {
  name: string;
  value: number;
  color: string;
  [key: string]: string | number;
}

interface ActivityTypeData {
  name: string;
  count: number;
  color: string;
}

const COLORS = {
  feeding: '#FFB6C1',
  sleep: '#B6D7FF',
  diaper: '#FFE4B5',
  medication: '#D4B5FF',
  milestone: '#B5FFD4',
  note: '#FFD3B6',
  wet: '#87CEEB',
  dirty: '#D2691E',
  both: '#FF8C00',
  dry: '#90EE90',
};

const getActivityIcon = (type: ActivityType) => {
  switch (type) {
    case 'feeding':
      return <Restaurant />;
    case 'sleep':
      return <Hotel />;
    case 'diaper':
      return <BabyChangingStation />;
    default:
      return <Timeline />;
  }
};

const getActivityColor = (type: ActivityType) => {
  return COLORS[type as keyof typeof COLORS] || '#CCCCCC';
};

export const InsightsDashboard: React.FC = () => {
  const router = useRouter();
  const { format, formatDistanceToNow } = useLocalizedDate();
  const { t } = useTranslation('insights');
  const [children, setChildren] = useState<Child[]>([]);
  const [selectedChild, setSelectedChild] = useState<string>('');
  const [dateRange, setDateRange] = useState<DateRange>('7days');
  const [activities, setActivities] = useState<Activity[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Fetch children on mount
  useEffect(() => {
    const fetchChildren = async () => {
      try {
        const childrenData = await childrenApi.getChildren();
        setChildren(childrenData);
        if (childrenData.length > 0) {
          setSelectedChild(childrenData[0].id);
        }
      } catch (err: any) {
        setError(err.response?.data?.message || t('errors.loadChildren'));
      }
    };
    fetchChildren();
  }, []);

  // Fetch activities when child or date range changes
  useEffect(() => {
    if (!selectedChild) return;

    const fetchActivities = async () => {
      setLoading(true);
      setError(null);
      try {
        const days = dateRange === '7days' ? 7 : dateRange === '30days' ? 30 : 90;
        const endDate = endOfDay(new Date());
        const startDate = startOfDay(subDays(new Date(), days - 1));

        const activitiesData = await trackingApi.getActivities(
          selectedChild,
          undefined,
          startDate.toISOString(),
          endDate.toISOString()
        );
        setActivities(activitiesData);
      } catch (err: any) {
        setError(err.response?.data?.message || t('errors.loadActivities'));
      } finally {
        setLoading(false);
      }
    };

    fetchActivities();
  }, [selectedChild, dateRange]);

  // Calculate statistics
  const calculateStats = () => {
    const totalFeedings = activities.filter((a) => a.type === 'feeding').length;
    const totalDiapers = activities.filter((a) => a.type === 'diaper').length;

    const sleepActivities = activities.filter((a) => a.type === 'sleep');
    const totalSleepMinutes = sleepActivities.reduce((acc, activity) => {
      if (activity.data?.endTime && activity.data?.startTime) {
        const start = parseISO(activity.data.startTime);
        const end = parseISO(activity.data.endTime);
        return acc + differenceInMinutes(end, start);
      }
      return acc;
    }, 0);
    const days = dateRange === '7days' ? 7 : dateRange === '30days' ? 30 : 90;
    const avgSleepHours = days > 0 ? (totalSleepMinutes / 60 / days).toFixed(1) : '0.0';

    const typeCounts: Record<string, number> = {};
    activities.forEach((a) => {
      typeCounts[a.type] = (typeCounts[a.type] || 0) + 1;
    });
    const mostCommonType = Object.entries(typeCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'none';

    return {
      totalFeedings,
      avgSleepHours,
      totalDiapers,
      mostCommonType,
    };
  };

  // Prepare chart data
  const prepareDailyData = (): DayData[] => {
    const days = dateRange === '7days' ? 7 : dateRange === '30days' ? 30 : 90;
    const dailyMap = new Map<string, DayData>();

    for (let i = days - 1; i >= 0; i--) {
      const date = format(subDays(new Date(), i), 'yyyy-MM-dd');
      dailyMap.set(date, {
        date: format(subDays(new Date(), i), 'MMM dd'),
        feedings: 0,
        sleepHours: 0,
        diapers: 0,
        activities: 0,
      });
    }

    activities.forEach((activity) => {
      const dateKey = format(parseISO(activity.timestamp), 'yyyy-MM-dd');
      const data = dailyMap.get(dateKey);
      if (data) {
        data.activities += 1;
        if (activity.type === 'feeding') data.feedings += 1;
        if (activity.type === 'diaper') data.diapers += 1;
        if (activity.type === 'sleep' && activity.data?.endTime && activity.data?.startTime) {
          const start = parseISO(activity.data.startTime);
          const end = parseISO(activity.data.endTime);
          const hours = differenceInMinutes(end, start) / 60;
          data.sleepHours += hours;
        }
      }
    });

    return Array.from(dailyMap.values()).map((d) => ({
      ...d,
      sleepHours: Number(d.sleepHours.toFixed(1)),
    }));
  };

  const prepareDiaperData = (): DiaperTypeData[] => {
    const diaperActivities = activities.filter((a) => a.type === 'diaper');
    const typeCount: Record<string, number> = {};

    diaperActivities.forEach((activity) => {
      const type = activity.data?.type || 'unknown';
      typeCount[type] = (typeCount[type] || 0) + 1;
    });

    return Object.entries(typeCount).map(([name, value]) => ({
      name: t(`diaperTypes.${name}`),
      value,
      color: COLORS[name as keyof typeof COLORS] || '#CCCCCC',
    }));
  };

  const prepareActivityTypeData = (): ActivityTypeData[] => {
    const typeCount: Record<string, number> = {};

    activities.forEach((activity) => {
      typeCount[activity.type] = (typeCount[activity.type] || 0) + 1;
    });

    return Object.entries(typeCount).map(([name, count]) => ({
      name: t(`activityTypes.${name}`),
      count,
      color: COLORS[name as keyof typeof COLORS] || '#CCCCCC',
    }));
  };

  const stats = calculateStats();
  const dailyData = prepareDailyData();
  const diaperData = prepareDiaperData();
  const activityTypeData = prepareActivityTypeData();
  const recentActivities = [...activities]
    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
    .slice(0, 20);

  const noChildren = children.length === 0;
  const noActivities = activities.length === 0 && !loading;

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <Box>
        <Typography variant="h4" fontWeight="600" gutterBottom>
          {t('title')}
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
          {t('subtitle')}
        </Typography>

        {/* Filters */}
        <Paper sx={{ p: 3, mb: 3 }}>
          <Grid container spacing={2} alignItems="center">
            {children.length > 1 && (
              <Grid item xs={12} sm={6} md={4}>
                <FormControl fullWidth>
                  <InputLabel>{t('filters.child')}</InputLabel>
                  <Select
                    value={selectedChild}
                    onChange={(e) => setSelectedChild(e.target.value)}
                    label={t('filters.child')}
                  >
                    {children.map((child) => (
                      <MenuItem key={child.id} value={child.id}>
                        {child.name}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
            )}
            <Grid item xs={12} sm={6} md={4}>
              <ToggleButtonGroup
                value={dateRange}
                exclusive
                onChange={(_, newValue) => newValue && setDateRange(newValue)}
                fullWidth
                size="large"
              >
                <ToggleButton value="7days">{t('filters.dateRange.7days')}</ToggleButton>
                <ToggleButton value="30days">{t('filters.dateRange.30days')}</ToggleButton>
                <ToggleButton value="3months">{t('filters.dateRange.3months')}</ToggleButton>
              </ToggleButtonGroup>
            </Grid>
          </Grid>
        </Paper>

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

        {noChildren && !loading && (
          <Card>
            <CardContent sx={{ textAlign: 'center', py: 8 }}>
              <ChildCare sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
              <Typography variant="h6" color="text.secondary" gutterBottom>
                {t('emptyStates.noChildren.title')}
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                {t('emptyStates.noChildren.message')}
              </Typography>
              <Button
                variant="contained"
                startIcon={<Add />}
                onClick={() => router.push('/children')}
              >
                {t('emptyStates.noChildren.action')}
              </Button>
            </CardContent>
          </Card>
        )}

        {loading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 8 }}>
            <CircularProgress />
          </Box>
        )}

        {noActivities && !noChildren && (
          <Alert severity="info" sx={{ mb: 3 }}>
            {t('emptyStates.noActivities')}
          </Alert>
        )}

        {!loading && !noChildren && !noActivities && (
          <>
            {/* Summary Statistics */}
            <Grid container spacing={3} sx={{ mb: 3 }}>
              <Grid item xs={12} sm={6} md={3}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: 0 }}
                >
                  <Card sx={{ bgcolor: COLORS.feeding, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                        <Restaurant sx={{ fontSize: 32, mr: 1 }} />
                        <Typography variant="h6" fontWeight="600">
                          {t('stats.feedings.title')}
                        </Typography>
                      </Box>
                      <Typography variant="h3" fontWeight="700">
                        {stats.totalFeedings}
                      </Typography>
                      <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                        {t('stats.feedings.subtitle')}
                      </Typography>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>

              <Grid item xs={12} sm={6} md={3}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: 0.1 }}
                >
                  <Card sx={{ bgcolor: COLORS.sleep, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                        <Hotel sx={{ fontSize: 32, mr: 1 }} />
                        <Typography variant="h6" fontWeight="600">
                          {t('stats.sleep.title')}
                        </Typography>
                      </Box>
                      <Typography variant="h3" fontWeight="700">
                        {stats.avgSleepHours}h
                      </Typography>
                      <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                        {t('stats.sleep.subtitle')}
                      </Typography>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>

              <Grid item xs={12} sm={6} md={3}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: 0.2 }}
                >
                  <Card sx={{ bgcolor: COLORS.diaper, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                        <BabyChangingStation sx={{ fontSize: 32, mr: 1 }} />
                        <Typography variant="h6" fontWeight="600">
                          {t('stats.diapers.title')}
                        </Typography>
                      </Box>
                      <Typography variant="h3" fontWeight="700">
                        {stats.totalDiapers}
                      </Typography>
                      <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                        {t('stats.diapers.subtitle')}
                      </Typography>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>

              <Grid item xs={12} sm={6} md={3}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3, delay: 0.3 }}
                >
                  <Card sx={{ bgcolor: COLORS.milestone, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                        <TrendingUp sx={{ fontSize: 32, mr: 1 }} />
                        <Typography variant="h6" fontWeight="600">
                          {t('stats.topActivity.title')}
                        </Typography>
                      </Box>
                      <Typography variant="h3" fontWeight="700" sx={{ textTransform: 'capitalize' }}>
                        {t(`activityTypes.${stats.mostCommonType}`)}
                      </Typography>
                      <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                        {t('stats.topActivity.subtitle')}
                      </Typography>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>
            </Grid>

            {/* Charts */}
            <Grid container spacing={3} sx={{ mb: 3 }}>
              <Grid item xs={12} md={6}>
                <Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
                  <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                      <Restaurant sx={{ mr: 1, color: COLORS.feeding }} />
                      <Typography variant="h6" fontWeight="600">
                        {t('charts.feedingFrequency')}
                      </Typography>
                    </Box>
                    <ResponsiveContainer width="100%" height={250}>
                      <BarChart data={dailyData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="date" tick={{ fontSize: 12 }} />
                        <YAxis />
                        <Tooltip />
                        <Bar dataKey="feedings" fill={COLORS.feeding} name={t('charts.chartLabels.feedings')} />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </Grid>

              <Grid item xs={12} md={6}>
                <Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
                  <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                      <Hotel sx={{ mr: 1, color: COLORS.sleep }} />
                      <Typography variant="h6" fontWeight="600">
                        {t('charts.sleepDuration')}
                      </Typography>
                    </Box>
                    <ResponsiveContainer width="100%" height={250}>
                      <LineChart data={dailyData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="date" tick={{ fontSize: 12 }} />
                        <YAxis />
                        <Tooltip />
                        <Line
                          type="monotone"
                          dataKey="sleepHours"
                          stroke={COLORS.sleep}
                          strokeWidth={3}
                          name={t('charts.chartLabels.sleepHours')}
                          dot={{ fill: COLORS.sleep, r: 4 }}
                        />
                      </LineChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </Grid>

              {diaperData.length > 0 && (
                <Grid item xs={12} md={6}>
                  <Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                        <BabyChangingStation sx={{ mr: 1, color: COLORS.diaper }} />
                        <Typography variant="h6" fontWeight="600">
                          {t('charts.diaperChangesByType')}
                        </Typography>
                      </Box>
                      <ResponsiveContainer width="100%" height={250}>
                        <PieChart>
                          <Pie
                            data={diaperData}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            label={({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%`}
                            outerRadius={80}
                            fill="#8884d8"
                            dataKey="value"
                          >
                            {diaperData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={entry.color} />
                            ))}
                          </Pie>
                          <Tooltip />
                        </PieChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>
                </Grid>
              )}

              <Grid item xs={12} md={diaperData.length > 0 ? 6 : 12}>
                <Card sx={{ height: '350px', minHeight: '350px', width: '100%' }}>
                  <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', p: 2, '&:last-child': { pb: 2 } }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                      <Assessment sx={{ mr: 1, color: 'primary.main' }} />
                      <Typography variant="h6" fontWeight="600">
                        {t('charts.activityTimeline')}
                      </Typography>
                    </Box>
                    <ResponsiveContainer width="100%" height={250}>
                      <BarChart data={dailyData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="date" tick={{ fontSize: 12 }} />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="feedings" fill={COLORS.feeding} name={t('charts.chartLabels.feedings')} />
                        <Bar dataKey="diapers" fill={COLORS.diaper} name={t('charts.chartLabels.diapers')} />
                        <Bar dataKey="sleepHours" fill={COLORS.sleep} name={t('charts.chartLabels.sleepHours')} />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </Grid>
            </Grid>

            {activityTypeData.length > 0 && (
              <Card sx={{ mb: 3 }}>
                <CardContent>
                  <Typography variant="h6" fontWeight="600" gutterBottom>
                    {t('charts.activityDistribution')}
                  </Typography>
                  <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mt: 2 }}>
                    {activityTypeData.map((activity) => (
                      <Chip
                        key={activity.name}
                        icon={getActivityIcon(activity.name.toLowerCase() as ActivityType)}
                        label={`${activity.name}: ${activity.count}`}
                        sx={{
                          bgcolor: activity.color,
                          color: 'white',
                          fontSize: '0.9rem',
                          fontWeight: 600,
                          px: 1,
                          py: 2,
                        }}
                      />
                    ))}
                  </Box>
                </CardContent>
              </Card>
            )}

            {/* Recent Activities */}
            <Card>
              <CardContent>
                <Typography variant="h6" fontWeight="600" gutterBottom>
                  {t('recentActivities.title')}
                </Typography>
                <Divider sx={{ my: 2 }} />
                <List sx={{ maxHeight: 400, overflow: 'auto' }}>
                  {recentActivities.map((activity, index) => (
                    <motion.div
                      key={activity.id}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ duration: 0.3, delay: index * 0.02 }}
                    >
                      <ListItem
                        sx={{
                          borderBottom: index < recentActivities.length - 1 ? '1px solid' : 'none',
                          borderColor: 'divider',
                          py: 1.5,
                        }}
                      >
                        <ListItemAvatar>
                          <Avatar sx={{ bgcolor: getActivityColor(activity.type) }}>
                            {getActivityIcon(activity.type)}
                          </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                          primary={
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                              <Typography variant="body1" fontWeight="600" sx={{ textTransform: 'capitalize' }}>
                                {t(`activityTypes.${activity.type}`)}
                              </Typography>
                              <Chip
                                label={formatDistanceToNow(parseISO(activity.timestamp), { addSuffix: true })}
                                size="small"
                                sx={{ height: 20, fontSize: '0.7rem' }}
                              />
                            </Box>
                          }
                          secondary={
                            <Typography variant="body2" color="text.secondary">
                              {activity.notes || format(parseISO(activity.timestamp), 'MMM dd, yyyy HH:mm')}
                            </Typography>
                          }
                        />
                      </ListItem>
                    </motion.div>
                  ))}
                </List>
              </CardContent>
            </Card>
          </>
        )}
      </Box>
    </motion.div>
  );
};