'use client';

import * as React from 'react';
import Grid from '@mui/material/Unstable_Grid2';
import dayjs, { Dayjs } from 'dayjs';
import { Box, Typography, Paper, useTheme, Accordion, AccordionSummary, AccordionDetails, Stack } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import { fetchKpis, fetchUserAnalytics } from '@/services/kpis.service';
import {List as CompletedOrderIcon} from '@phosphor-icons/react/dist/ssr/List'
import {Note as PendingOrderIcon} from '@phosphor-icons/react/dist/ssr/Note'
import {Users as UsersIcon} from '@phosphor-icons/react/dist/ssr/Users'
import {CalendarCheck as EventIcon} from '@phosphor-icons/react/dist/ssr/CalendarCheck'
import {TrendUp as TrendUpIcon} from '@phosphor-icons/react/dist/ssr/TrendUp'
import {ShoppingCart as OrdersIcon} from '@phosphor-icons/react/dist/ssr/ShoppingCart'
import {CurrencyDollar as RevenueIcon} from '@phosphor-icons/react/dist/ssr/CurrencyDollar'
import {Receipt as TransactionIcon} from '@phosphor-icons/react/dist/ssr/Receipt'
import {CheckCircle as CompletedIcon} from '@phosphor-icons/react/dist/ssr/CheckCircle'
import {XCircle as FailedIcon} from '@phosphor-icons/react/dist/ssr/XCircle'
import {Clock as PendingIcon} from '@phosphor-icons/react/dist/ssr/Clock'
import { AreaChart } from '@/components/dashboard/overview/area-chart';
import { ModernKpiCard } from '@/components/dashboard/overview/modern-kpi-card';
import { DailySignupsChart } from '@/components/dashboard/analytics/daily-signups-chart';
import { FormCompletionStats } from '@/components/dashboard/analytics/form-completion-stats';
import { LoginFrequencyChart } from '@/components/dashboard/analytics/login-frequency-chart';
import { 
  fetchDailySignups, 
  fetchFormCompletionStats, 
  fetchLoginFrequency,
  type DailySignupsResponse,
  type FormCompletionStatsResponse,
  type LoginFrequencyResponse
} from '@/services/analytics.service';

// export const metadata = { title: `Overview | Dashboard | ${config.site.name}` } satisfies Metadata;

export default function Page(): React.JSX.Element {
  const theme = useTheme();
  const [kpis, setKpis] = React.useState({
    users: 0,
    events: 0,
    orders: {
      pending: 0,
      completed: 0,
    },
    totalRevenue: 0,
    orderConversion: 0,
    activeUsers: 0,
    monthlyGrowth: 0,
    trends: {
      usersGrowth: 0,
      revenueGrowth: 0,
      eventsGrowth: 0,
      completedOrdersGrowth: 0,
      monthlyGrowthTrend: 0
    },
    activeUsersProgress: 0,
    transactionStats: {
      totalTransactions: 0,
      completedTransactions: 0,
      failedTransactions: 0,
      pendingTransactions: 0
    }
  });
  const [parentChartData, setParentChartData] = React.useState<number[]>(Array.from({ length: 12 }, () => 0))
  const [parentYear, setParentYear] = React.useState<Dayjs>(dayjs(new Date()))
  const [parentanalyticsLoading, setParentAnalyticsLoading] = React.useState<boolean>(false)
  
  // Analytics state
  const [dailySignupsData, setDailySignupsData] = React.useState<DailySignupsResponse | null>(null);
  const [formCompletionData, setFormCompletionData] = React.useState<FormCompletionStatsResponse | null>(null);
  const [loginFrequencyData, setLoginFrequencyData] = React.useState<LoginFrequencyResponse | null>(null);
  const [analyticsLoading, setAnalyticsLoading] = React.useState<boolean>(false);

  const handleParentYearChange = (newDate: Dayjs | null) => {
    console.log(newDate, "New Date")
    if (newDate) {
      console.log(newDate.get('year'))
      setParentYear(dayjs(newDate))
    }
  }

   const fetchUsers = async () => {
      try {
        console.log('🔄 Starting fetchKpis API call...');
        
        const response = await fetchKpis();
        console.log('✅ Raw API Response:', response);
        
        // Access the data properly from the API response structure
        const apiData = response?.data?.data || response?.data;
        console.log('📊 Extracted Data:', apiData);
        
        if (apiData) {
          // Use API data if available
          const newKpis = {
            users: apiData.users || 0,
            events: apiData.events || 0,
            orders: {
              pending: apiData.orders?.pending || 0,
              completed: apiData.orders?.completed || 0,
            },
            totalRevenue: apiData.totalRevenue || 0,
            orderConversion: apiData.orderConversion || 0,
            activeUsers: apiData.activeUsers || 0,
            monthlyGrowth: apiData.monthlyGrowth || 0,
            trends: {
              usersGrowth: apiData.trends?.usersGrowth || 0,
              revenueGrowth: apiData.trends?.revenueGrowth || 0,
              eventsGrowth: apiData.trends?.eventsGrowth || 0,
              completedOrdersGrowth: apiData.trends?.completedOrdersGrowth || 0,
              monthlyGrowthTrend: apiData.trends?.monthlyGrowthTrend || 0
            },
            activeUsersProgress: apiData.activeUsersProgress || 0,
            transactionStats: {
              totalTransactions: apiData.transactionStats?.totalTransactions || 0,
              completedTransactions: apiData.transactionStats?.completedTransactions || 0,
              failedTransactions: apiData.transactionStats?.failedTransactions || 0,
              pendingTransactions: apiData.transactionStats?.pendingTransactions || 0
            }
          };
          
          console.log('🚀 Setting API KPIs state to:', newKpis);
          setKpis(newKpis);
        }
        
      } catch (error) {
        console.error('❌ Error fetching KPIs:', error);
      }
    };
  const fetchAnalytics = async () => {
    try {
      setParentAnalyticsLoading(true);

      const [
        dailySignupsResult,
        formCompletionResult,
        loginFrequencyResult,
        userAnalyticsResult,
      ] = await Promise.allSettled([
        fetchDailySignups(),
        fetchFormCompletionStats(),
        fetchLoginFrequency(),
        fetchUserAnalytics({ year: parentYear.get('year') }),
      ]);

      if (dailySignupsResult.status === 'fulfilled') {
        setDailySignupsData(dailySignupsResult.value);
      }

      if (formCompletionResult.status === 'fulfilled') {
        setFormCompletionData(formCompletionResult.value);
      }

      if (loginFrequencyResult.status === 'fulfilled') {
        setLoginFrequencyData(loginFrequencyResult.value);
      }

      if (userAnalyticsResult.status === 'fulfilled') {
        const analyticsData = userAnalyticsResult.value?.data?.data;
        const monthlyCounts = analyticsData?.users?.monthlyCounts ?? [];
        const dat = Array.from({ length: 12 }, (_, index) => {
          const month = index + 1;
          const entry = monthlyCounts.find((el: { month: number; count: number }) => el.month === month);
          return Number(entry?.count ?? 0);
        });
        setParentChartData(dat);
      }
    } catch (error) {
      console.error('Error fetching analytics:', error);
    } finally {
      setParentAnalyticsLoading(false);
    }
  };

    React.useEffect(() => {
      fetchUsers();
    }, []);
    
    React.useEffect(() => {
      fetchAnalytics();
    }, [parentYear]);

  // redirect('/dashboard/orders');
  return (
    <Box sx={{ bgcolor: 'background.default', minHeight: '100vh', py: 2 }}>
      {/* Header Section */}
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        sx={{
          mb: 4,
          p: 3,
          borderRadius: 4,
          background: '#FFDD31',
          color: '#0B0504',
        }}
      >
        <Box>
          <Typography variant="h4" fontWeight={700} gutterBottom>
            Dashboard Overview
          </Typography>
          <Typography variant="body1" sx={{ opacity: 0.9 }}>
            Monitor your organization&apos;s key metrics and performance indicators
          </Typography>
        </Box>
      </Stack>

      <Grid container spacing={3}>
        {/* Primary/Core KPIs Row - High Priority */}
        <Grid lg={3} sm={6} xs={12}>
          <ModernKpiCard
            title="Total Users"
            value={kpis.users.toLocaleString()}
            icon={<UsersIcon />}
            gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
            trend={{
              value: kpis.trends.usersGrowth,
              isPositive: true,
              label: 'vs last month'
            }}
            subtitle="Registered members"
          />
        </Grid>

        <Grid lg={3} sm={6} xs={12}>
          <ModernKpiCard
            title="Active Users"
            value={kpis.activeUsers.toString()}
            icon={<UsersIcon />}
            gradient="linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)"
            showProgress={true}
            progress={kpis.activeUsersProgress}
            subtitle="Last 30 days"
          />
        </Grid>

        <Grid lg={3} sm={6} xs={12}>
          <ModernKpiCard
            title="Active Events"
            value={kpis.events.toString()}
            icon={<EventIcon />}
            gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
            trend={{
              value: kpis.trends.eventsGrowth,
              isPositive: true,
              label: 'vs last month'
            }}
            subtitle="Scheduled events"
          />
        </Grid>

        <Grid lg={3} sm={6} xs={12}>
          <ModernKpiCard
            title="Growth Rate"
            value={`+${kpis.monthlyGrowth}%`}
            icon={<TrendUpIcon />}
            gradient="linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)"
            trend={{
              value: kpis.trends.monthlyGrowthTrend,
              isPositive: true,
              label: 'monthly growth'
            }}
            subtitle="User acquisition"
          />
        </Grid>

        {/* Order Details - Low Priority Section */}
        <Grid xs={12} sx={{ mt: 3 }}>
          <Accordion 
            elevation={2} 
            defaultExpanded={false}
            sx={{
              borderRadius: 2,
              '&:before': {
                display: 'none',
              },
            }}
          >
            <AccordionSummary 
              expandIcon={<ExpandMoreIcon />} 
              aria-controls="order-details-content" 
              id="order-details-header"
              sx={{
                backgroundColor: theme.palette.grey[50],
                borderRadius: '8px 8px 0 0',
              }}
            >
              <Typography variant="h6" fontWeight={600}>
                Order Details, Revenue & Transaction Metrics
              </Typography>
            </AccordionSummary>
            <AccordionDetails sx={{ p: 3 }}>
              <Grid container spacing={3}>
                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Total Revenue"
                    value={`$${kpis.totalRevenue.toLocaleString()}`}
                    icon={<RevenueIcon />}
                    gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
                    trend={{
                      value: kpis.trends.revenueGrowth,
                      isPositive: true,
                      label: 'vs last month'
                    }}
                    subtitle="From completed orders"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Order Conversion"
                    value={`${kpis.orderConversion}%`}
                    icon={<OrdersIcon />}
                    gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
                    showProgress={true}
                    progress={kpis.orderConversion}
                    subtitle="Completion rate"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Pending Orders"
                    value={kpis.orders.pending.toString()}
                    icon={<PendingOrderIcon />}
                    gradient="linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
                    subtitle="Awaiting processing"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Completed Orders"
                    value={kpis.orders.completed.toString()}
                    icon={<CompletedOrderIcon />}
                    gradient="linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
                    trend={{
                      value: kpis.trends.completedOrdersGrowth,
                      isPositive: true,
                      label: 'vs last month'
                    }}
                    subtitle="Successfully fulfilled"
                  />
                </Grid>

                {/* Transaction Stats Section */}
                <Grid xs={12} sx={{ mt: 3, mb: 2 }}>
                  <Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
                    Transaction Statistics
                  </Typography>
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Total Transactions"
                    value={kpis.transactionStats.totalTransactions.toString()}
                    icon={<TransactionIcon />}
                    gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
                    subtitle="All transactions"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Completed"
                    value={kpis.transactionStats.completedTransactions.toString()}
                    icon={<CompletedIcon />}
                    gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
                    subtitle="Successful transactions"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Failed"
                    value={kpis.transactionStats.failedTransactions.toString()}
                    icon={<FailedIcon />}
                    gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
                    subtitle="Failed transactions"
                  />
                </Grid>

                <Grid lg={3} sm={6} xs={12}>
                  <ModernKpiCard
                    title="Pending"
                    value={kpis.transactionStats.pendingTransactions.toString()}
                    icon={<PendingIcon />}
                    gradient="linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
                    subtitle="Awaiting completion"
                  />
                </Grid>
              </Grid>
            </AccordionDetails>
          </Accordion>
        </Grid>

        {/* Form Completion Stats */}
        {formCompletionData && formCompletionData.data && (
          <Grid lg={12} xs={12} sx={{ mt: 3 }}>
            <FormCompletionStats
              overview={formCompletionData.data.overview || {}}
              volunteerFormStatus={formCompletionData.data.volunteerFormStatus || {}}
              loading={parentanalyticsLoading}
            />
          </Grid>
        )}

        {/* Analytics Chart Section */}
        <Grid lg={12} xs={12} sx={{ mt: 2 }}>
          <Paper
            elevation={0}
            sx={{
              p: 3,
              borderRadius: 4,
              background: theme.palette.mode === 'dark' 
                ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
                : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
              border: theme.palette.mode === 'dark'
                ? '1px solid rgba(255, 255, 255, 0.1)'
                : '1px solid rgba(255, 255, 255, 0.2)',
              boxShadow: theme.palette.mode === 'dark'
                ? '0 8px 32px rgba(0, 0, 0, 0.3)'
                : '0 8px 32px rgba(0, 0, 0, 0.08)',
            }}
          >
            <Box sx={{ mb: 2 }}>
              <Typography variant="h6" fontWeight={600} gutterBottom>
                User Registration Analytics
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Track user growth and registration trends over time
              </Typography>
            </Box>
            <AreaChart
              chartSeries={[
                { name: 'New Users', data: parentChartData },
              ]}
              sx={{ height: 400 }}
              selectedDate={parentYear}
              onYearChange={handleParentYearChange}
              loading={parentanalyticsLoading}
              title='Monthly Registrations'
            />
          </Paper>
        </Grid>




        {/* New Analytics Section */}
        {dailySignupsData && dailySignupsData.data && (
          <Grid lg={12} xs={12} sx={{ mt: 3 }}>
            <DailySignupsChart
              data={dailySignupsData.data.dailyData || []}
              summary={dailySignupsData.data.summary || {}}
              loading={parentanalyticsLoading}
            />
          </Grid>
        )}

       

        {/* Login Frequency Chart */}
        {loginFrequencyData && loginFrequencyData.data && (
          <Grid lg={12} xs={12} sx={{ mt: 3 }}>
            <LoginFrequencyChart
              dailyLogins={loginFrequencyData.data.dailyLogins || []}
              frequencyBreakdown={loginFrequencyData.data.frequencyBreakdown || []}
              summary={loginFrequencyData.data.summary || {}}
              loading={parentanalyticsLoading}
            />
          </Grid>
        )}
      </Grid>
    </Box>
  );
}