'use client';

import { useEffect, useCallback } from 'react'
import GeneralLook from '@/components/dashboard/home/generalLook'
import MembersOverviewChart from '@/components/dashboard/home/membersOverviewChart'
import ServicesSubscriptions from '@/components/dashboard/home/servicesSubscriptions'
import WorkersJobTypes from '@/components/dashboard/home/workersJobTypes'
import IncomeOutcome from '@/components/dashboard/home/incomeOutcome'
import { useDispatch } from 'react-redux';
import { useAppSelector } from '@/redux/store';
import { AppDispatch } from '@/redux/store';
import { load } from '@/redux/features/statistics-slice'
import CircularProgress from '@mui/material/CircularProgress';
import { useTranslations } from 'next-intl';
import Button from '@mui/material/Button';
import { RefreshCw } from 'lucide-react';

export default function Page() {
  const dispatch = useDispatch<AppDispatch>()
  const t = useTranslations('statistics');

  const report = useAppSelector((state) => state.statisticsReducer.value.report)
  const isLoading = useAppSelector((state) => state.statisticsReducer.value.isLoading)   

  const fetchData = useCallback(async () => {
    try {
      await dispatch(load({ forceRefresh: true }));
    } catch (error) {
      console.error('Failed to fetch dashboard data:', error);
    }
  }, [dispatch]);

  useEffect(() => {
    // Always fetch fresh data when the component mounts
    fetchData();
    
    // Set up interval to refresh data every 5 minutes
    const intervalId = setInterval(fetchData, 5 * 60 * 1000);
    
    // Clean up interval on component unmount
    return () => clearInterval(intervalId);
  }, [fetchData]);

  if (isLoading && !report) {
    return (
      <div className="w-full h-[100vh] flex items-center justify-center gap-5">
        <CircularProgress color="secondary" size={22} />                
        <h1 className="dark:text-text-light text-text">{t('loading')}...</h1>
      </div>
    )
  }

  return (
    <>
      <main className="min-h-[250px] max-h-[750px]">
        <div className="w-full flex justify-end mb-4">
          <Button 
            variant="outlined"
            size="small"
            onClick={fetchData}
            disabled={isLoading}
            startIcon={<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />}
            className="flex items-center gap-2"
          >
            {t('refresh') || 'Refresh'}
          </Button>
        </div>
        
        <main className="w-full min-w-screen min-h-screen h-auto flex flex-col lg:gap-7 gap-3 pb-[50px]">
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[500px] items-stretch">
            <GeneralLook/>
            <MembersOverviewChart />
          </section>
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[350px] items-stretch">
            <ServicesSubscriptions />
            <WorkersJobTypes />
          </section>
          <section className="w-full flex lg:flex-row flex-col-reverse lg:gap-7 gap-3 lg:h-auto lg:min-h-[350px] items-stretch">
            <IncomeOutcome />
          </section>
        </main>
      </main>
    </>
  );
}