'use client';

import { useState, useEffect } from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  Grid,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Paper,
  Chip,
} from '@mui/material';
import {
  TrendingUp,
  TrendingDown,
  People,
  FamilyRestroom,
  ChildCare,
  DevicesOther,
} from '@mui/icons-material';
import {
  LineChart,
  Line,
  AreaChart,
  Area,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import AdminLayout from '@/components/AdminLayout';
import apiClient from '@/lib/api-client';

interface Stat {
  title: string;
  value: number | string;
  change: number;
  icon: React.ReactNode;
  color: string;
}

export default function AnalyticsPage() {
  const [timeRange, setTimeRange] = useState('7d');
  const [loading, setLoading] = useState(false);

  // Mock data for charts
  const userGrowthData = [
    { date: 'Oct 1', users: 120, families: 45 },
    { date: 'Oct 2', users: 125, families: 47 },
    { date: 'Oct 3', users: 130, families: 48 },
    { date: 'Oct 4', users: 138, families: 52 },
    { date: 'Oct 5', users: 142, families: 54 },
    { date: 'Oct 6', users: 150, families: 58 },
    { date: 'Oct 7', users: 156, families: 60 },
  ];

  const activityData = [
    { day: 'Monday', feeding: 245, sleep: 180, diapers: 120 },
    { day: 'Tuesday', feeding: 280, sleep: 190, diapers: 135 },
    { day: 'Wednesday', feeding: 320, sleep: 175, diapers: 140 },
    { day: 'Thursday', feeding: 290, sleep: 200, diapers: 125 },
    { day: 'Friday', feeding: 310, sleep: 185, diapers: 145 },
    { day: 'Saturday', feeding: 350, sleep: 210, diapers: 160 },
    { day: 'Sunday', feeding: 340, sleep: 205, diapers: 155 },
  ];

  const deviceData = [
    { name: 'iOS', value: 45, color: '#007AFF' },
    { name: 'Android', value: 35, color: '#3DDC84' },
    { name: 'Web', value: 20, color: '#FF8B7D' },
  ];

  const ageDistribution = [
    { age: '0-6 months', count: 25 },
    { age: '6-12 months', count: 30 },
    { age: '1-2 years', count: 45 },
    { age: '2-3 years', count: 38 },
    { age: '3-4 years', count: 32 },
    { age: '4-5 years', count: 28 },
    { age: '5-6 years', count: 22 },
  ];

  const stats: Stat[] = [
    {
      title: 'Total Users',
      value: 156,
      change: 12.5,
      icon: <People />,
      color: 'primary.main',
    },
    {
      title: 'Active Families',
      value: 60,
      change: 8.3,
      icon: <FamilyRestroom />,
      color: 'success.main',
    },
    {
      title: 'Total Children',
      value: 142,
      change: 15.2,
      icon: <ChildCare />,
      color: 'info.main',
    },
    {
      title: 'Connected Devices',
      value: 324,
      change: -2.1,
      icon: <DevicesOther />,
      color: 'warning.main',
    },
  ];

  const engagementData = [
    { hour: '00', sessions: 12 },
    { hour: '03', sessions: 8 },
    { hour: '06', sessions: 45 },
    { hour: '09', sessions: 78 },
    { hour: '12', sessions: 92 },
    { hour: '15', sessions: 85 },
    { hour: '18', sessions: 95 },
    { hour: '21', sessions: 68 },
  ];

  return (
    <AdminLayout>
      <Box sx={{ mb: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Box>
            <Typography variant="h4" gutterBottom sx={{ fontWeight: 600 }}>
              Analytics Dashboard
            </Typography>
            <Typography variant="body1" color="text.secondary">
              Platform usage metrics and insights
            </Typography>
          </Box>
          <FormControl size="small" sx={{ minWidth: 120 }}>
            <InputLabel>Time Range</InputLabel>
            <Select
              value={timeRange}
              label="Time Range"
              onChange={(e) => setTimeRange(e.target.value)}
            >
              <MenuItem value="24h">Last 24 Hours</MenuItem>
              <MenuItem value="7d">Last 7 Days</MenuItem>
              <MenuItem value="30d">Last 30 Days</MenuItem>
              <MenuItem value="90d">Last 90 Days</MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Box>

      {/* Stats Cards */}
      <Grid container spacing={3} sx={{ mb: 4 }}>
        {stats.map((stat) => (
          <Grid item xs={12} sm={6} md={3} key={stat.title}>
            <Card>
              <CardContent>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <Box>
                    <Typography color="text.secondary" gutterBottom variant="body2">
                      {stat.title}
                    </Typography>
                    <Typography variant="h4" sx={{ fontWeight: 600, mb: 1 }}>
                      {stat.value}
                    </Typography>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                      {stat.change > 0 ? (
                        <TrendingUp sx={{ fontSize: 20, color: 'success.main' }} />
                      ) : (
                        <TrendingDown sx={{ fontSize: 20, color: 'error.main' }} />
                      )}
                      <Typography
                        variant="body2"
                        sx={{
                          color: stat.change > 0 ? 'success.main' : 'error.main',
                        }}
                      >
                        {Math.abs(stat.change)}%
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        vs last period
                      </Typography>
                    </Box>
                  </Box>
                  <Box
                    sx={{
                      p: 1,
                      borderRadius: 2,
                      bgcolor: `${stat.color}15`,
                      color: stat.color,
                    }}
                  >
                    {stat.icon}
                  </Box>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>

      {/* Charts Row 1 */}
      <Grid container spacing={3} sx={{ mb: 4 }}>
        <Grid item xs={12} md={8}>
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>
              User & Family Growth
            </Typography>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={userGrowthData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="users"
                  stroke="#FF8B7D"
                  strokeWidth={2}
                  name="Users"
                />
                <Line
                  type="monotone"
                  dataKey="families"
                  stroke="#81C784"
                  strokeWidth={2}
                  name="Families"
                />
              </LineChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>

        <Grid item xs={12} md={4}>
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>
              Device Distribution
            </Typography>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={deviceData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={(entry) => `${entry.name}: ${entry.value}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {deviceData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>
      </Grid>

      {/* Charts Row 2 */}
      <Grid container spacing={3} sx={{ mb: 4 }}>
        <Grid item xs={12} md={7}>
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>
              Activity Types by Day
            </Typography>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={activityData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="day" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="feeding" fill="#FFB5A0" name="Feeding" />
                <Bar dataKey="sleep" fill="#81C784" name="Sleep" />
                <Bar dataKey="diapers" fill="#64B5F6" name="Diapers" />
              </BarChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>

        <Grid item xs={12} md={5}>
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>
              Children Age Distribution
            </Typography>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={ageDistribution} layout="horizontal">
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="age" type="category" />
                <Tooltip />
                <Bar dataKey="count" fill="#FFD4CC" />
              </BarChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>
      </Grid>

      {/* Engagement Chart */}
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>
              Daily Engagement Pattern
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              Average sessions by hour of day
            </Typography>
            <ResponsiveContainer width="100%" height={250}>
              <AreaChart data={engagementData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="hour" />
                <YAxis />
                <Tooltip />
                <Area
                  type="monotone"
                  dataKey="sessions"
                  stroke="#FF8B7D"
                  fill="#FFB5A0"
                  fillOpacity={0.6}
                />
              </AreaChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>
      </Grid>
    </AdminLayout>
  );
}