'use client';

import React from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  useTheme,
  Grid,
} from '@mui/material';
import { Chart } from '@/components/core/chart';
import { DailyLogin, FrequencyBreakdown, LoginFrequencySummary } from '@/services/analytics.service';

interface LoginFrequencyChartProps {
  dailyLogins: DailyLogin[];
  frequencyBreakdown: FrequencyBreakdown[];
  summary: LoginFrequencySummary;
  loading?: boolean;
}

export function LoginFrequencyChart({
  dailyLogins,
  frequencyBreakdown,
  summary,
  loading,
}: LoginFrequencyChartProps) {
  const theme = useTheme();

  // Ensure data is always an array with safe defaults
  const safeDailyLogins = Array.isArray(dailyLogins) ? dailyLogins : [];
  const safeSummary = {
    totalLogins: summary?.totalLogins || 0,
    totalActiveUsers: summary?.totalActiveUsers || 0,
    averageLoginsPerDay: summary?.averageLoginsPerDay || 0,
    period: summary?.period || 'last 30 days',
  };
  const lineChartOptions = React.useMemo(
    () => ({
      chart: {
        type: 'line' as const,
        height: 300,
        background: 'transparent',
        toolbar: {
          show: false,
        },
      },
      colors: [theme.palette.primary.main],
      stroke: {
        curve: 'smooth' as const,
        width: 3,
      },
      xaxis: {
        categories: safeDailyLogins.map((item) => item?.formattedDate || ''),
        labels: {
          style: {
            colors: theme.palette.text.secondary,
          },
        },
      },
      yaxis: {
        labels: {
          style: {
            colors: theme.palette.text.secondary,
          },
        },
      },
      grid: {
        borderColor: theme.palette.divider,
        strokeDashArray: 3,
      },
      tooltip: {
        theme: (theme.palette.mode === 'dark' ? 'dark' : 'light') as 'dark' | 'light',
      },
    }),
    [safeDailyLogins, theme]
  );

  const lineSeries = React.useMemo(
    () => [
      {
        name: 'Daily Logins',
        data: safeDailyLogins.map((item) => {
          const parsed = Number(item?.logins ?? 0);
          return Number.isFinite(parsed) ? parsed : 0;
        }),
      },
    ],
    [safeDailyLogins]
  );

  if (!safeDailyLogins.length) {
    return (
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Card
            sx={{
              borderRadius: 3,
              boxShadow: theme.shadows[2],
            }}
          >
            <CardContent>
              <Typography variant="h6" fontWeight={600} gutterBottom>
                Login Frequency Analysis
              </Typography>
              <Typography variant="body2" color="text.secondary">
                No data available
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    );
  }

  return (
    <Grid container spacing={3}>
      {/* Daily Logins Chart */}
      <Grid item xs={12}>
        <Card
          sx={{
            borderRadius: 3,
            boxShadow: theme.shadows[2],
          }}
        >
          <CardContent>
            <Box sx={{ mb: 3 }}>
              <Typography variant="h6"  fontWeight={600} gutterBottom>
                Login Activity
              </Typography>
              <Typography variant="body2" color="text.secondary">
                User login frequency over the last {safeSummary.period}
              </Typography>
            </Box>

            <Box sx={{ display: 'flex', gap: 4, mb: 3 }}>
              <Box>
                <Typography variant="h4" fontWeight={700} color="primary.main">
                  {safeSummary.totalLogins.toLocaleString()}
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  Total Logins
                </Typography>
              </Box>
              <Box>
                <Typography variant="h4" fontWeight={700}>
                  {safeSummary.totalActiveUsers.toLocaleString()}
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  Active Users
                </Typography>
              </Box>
              
            </Box>

            <Chart
              options={lineChartOptions}
              series={lineSeries}
              type="line"
              height={300}
            />
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
}