'use client';

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

interface DailySignupsChartProps {
  data: DailySignupData[];
  summary: DailySignupsSummary;
  loading?: boolean;
}

export function DailySignupsChart({ data, summary, loading }: DailySignupsChartProps) {
  const theme = useTheme();

  // Ensure data is always an array with safe defaults
  const safeData = Array.isArray(data) ? data : [];
  const safeSummary = {
    totalSignups: summary?.totalSignups || 0,
    averagePerDay: summary?.averagePerDay || 0,
    period: summary?.period || 'last 30 days',
  };

  // Only render if we have valid data
  if (!safeData.length) {
    return (
      <Card
        sx={{
          borderRadius: 3,
          boxShadow: theme.shadows[2],
        }}
      >
        <CardContent>
          <Box sx={{ mb: 2 }}>
            <Typography variant="h6" fontWeight={600} gutterBottom>
              Daily Signups
            </Typography>
            <Typography variant="body2" color="text.secondary">
              No data available
            </Typography>
          </Box>
        </CardContent>
      </Card>
    );
  }

  const chartOptions = {
    chart: {
      type: 'area' as const,
      height: 300,
      background: 'transparent',
      toolbar: {
        show: false,
      },
    },
    colors: [theme.palette.primary.main],
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.3,
        stops: [0, 100],
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth' as const,
      width: 2,
    },
    xaxis: {
      categories: safeData.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',
    },
  };

  const chartSeries = [
    {
      name: 'Daily Signups',
      data: safeData.map((item) => {
        const parsed = Number(item?.count ?? 0);
        return Number.isFinite(parsed) ? parsed : 0;
      }),
    },
  ];

  return (
    <Card
      sx={{
        borderRadius: 3,
        boxShadow: theme.shadows[2],
      }}
    >
      <CardContent>
        <Box sx={{ mb: 2 }}>
          <Typography variant="h6" fontWeight={600} gutterBottom>
            Signups
          </Typography>
          <Typography variant="body2" color="text.secondary">
            User registration trends over the last {safeSummary.period}
          </Typography>
        </Box>
        
        <Box sx={{ display: 'flex', gap: 3, mb: 2 }}>
          <Box>
            <Typography variant="h4" fontWeight={700} color="primary.main">
              {safeSummary.totalSignups.toLocaleString()}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              Total Signups
            </Typography>
          </Box>
         
        </Box>

        <Chart
          options={chartOptions}
          series={chartSeries}
          type="area"
          height={300}
        />
      </CardContent>
    </Card>
  );
}