/* eslint-disable -- temporary disable for development/testing purposes */

'use client';  // ← Add this line at the top

import React, { useEffect, useState,useContext } from 'react';
import Grid from '@mui/material/Unstable_Grid2';
 
import { DashboardData } from '@/types/dashboard';
import { Provider } from '@/types/provider';
import { Zipcode } from '@/types/zipcodes';
import { UserContext } from '@/contexts/user-context';



import { config } from '@/config';
import { Budget } from '@/components/dashboard/overview/budget';
import { TotalCustomers } from '@/components/dashboard/overview/total-customers';
import { TasksProgress } from '@/components/dashboard/overview/tasks-progress';
import { TotalProfit } from '@/components/dashboard/overview/total-profit';
import { Sales } from '@/components/dashboard/overview/sales';
import { Traffic } from '@/components/dashboard/overview/traffic';
import { LatestProducts } from '@/components/dashboard/overview/latest-products';
import { LatestOrders } from '@/components/dashboard/overview/latest-orders';

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

export function CustomersPageClient(): React.JSX.Element {

  const [stats, setStats] = useState<DashboardData | null>(null);
  const [providers, setProviders] = useState<Provider[]>([]);
  const [zipcode, setZipcode] = useState<Zipcode[]>([]);

  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const companyId =
  loggedInUser?.role === 'manager'
    ? loggedInUser.companies.find((c) => c.active)?.id
    : null;

  const [chartSeries, setChartSeries] = useState([
    { name: 'This year', data: [] },
    { name: 'Last year', data: [] },
  ]);
  const [loadingChart, setLoadingChart] = useState(true);
  useEffect(() => {
    if (!companyId) return;
  
    const fetchStats = async () => {
      let url = '/admin/api/dashboard/overview-stats';
  
      // Append the companyId to the URL
      if (companyId) {
        url += `?companyId=${companyId}`;
      }
  
      try {
        const res = await fetch(url);
        const data: DashboardData = await res.json();
        setStats(data);
      } catch (err) {
        // console.error('Failed to load dashboard data:', err);
        setStats(null);
      }
    };
  
    fetchStats();
  }, [companyId]);


 

  useEffect(() => {
    // Only add companyId param if it exists
    const url = companyId
      ? `/admin/api/dashboard/appointments-per-month?companyId=${companyId}`
      : '/admin/api/dashboard/appointments-per-month';
  
    setLoadingChart(true);
  
    fetch(url)
      .then((res) => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then((data) => {
        setChartSeries([
          { name: 'This year', data: data.thisYear },
          { name: 'Last year', data: data.lastYear },
        ]);
      })
      .catch((err) => {
        // console.error('Failed to load appointments chart:', err);
      })
      .finally(() => setLoadingChart(false));
  }, [companyId]);  // <-- re-run when companyId changes
  
  
  useEffect(() => {
    async function fetchProviders() {
      const url = companyId
        ? `/admin/api/dashboard/top-providers?companyId=${companyId}`
        : '/admin/api/dashboard/top-providers';
  
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('Network response was not ok');
        const data = await res.json();
        setProviders(data);
      } catch (error) {
        // console.error('Failed to fetch providers', error);
      }
    }
  
    fetchProviders();
  }, [companyId]);  // <-- re-run when companyId changes


  useEffect(() => {
    async function fetchZipcodes() {
      const url = companyId
        ? `/admin/api/dashboard/top-zipcodes?companyId=${companyId}`
        : '/admin/api/dashboard/top-zipcodes';
  
      // console.log('Fetching zipcodes data from:', url);
  
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error('Network response was not ok');
        const data = await res.json();
        console.log('Zipcodes data:', data);
        setZipcode(data);
      } catch (error) {
        // console.error('Failed to fetch zipcodes', error);
      }
    }
  
    fetchZipcodes();
  }, [companyId]); // re-run when companyId changes
  

  function calculateDiff(current: number, previous: number): number | null {
    if (previous === 0) return null; // avoid divide by zero
    return Math.round(((current - previous) / previous) * 100);
  }
  
  // Only calculate diff if stats is available
  const diff = stats ? calculateDiff(stats.totalVisits, stats.lastMonthVisits) : null;
  const trend = diff !== null && diff > 0 ? 'up' : 'down';
  
  // Provide fallback for displayValue when stats is null
  const displayValue = stats ? stats.totalVisits.toLocaleString() : '...';

  const taskProgress = stats
  ? Math.round((stats.activeRequests / (stats.pendingAssignments + stats.activeRequests)) * 100)
  : 0;

  const mappedProducts = providers.map(provider => ({
    id: provider.id,
    name: provider.name,
    image: provider.image ?`https://helloprovider.co/app/images/${provider.image}`
    : '/admin/assets/Portrait_Placeholder.png', // fallback image path? '/assets/default-doctor.png', // fallback if null
    updatedAt: new Date(), // or whatever date you want to show
    address:provider.address,
    zip_code:provider.zip_code,
    visit_count:provider.visit_count,
    degree:provider.degree,
  }));

  const mappedZipcodes = zipcode.map(z => ({
  
    z_code:z.z_code,
    total_appointments:z.total_appointments,
     
  }));
  return (
    <Grid container spacing={3}>
      <Grid lg={3} sm={6} xs={12}>
        <Budget    diff={diff !== null ? diff : undefined} trend={trend} sx={{ height: '100%' }} value={stats ? `${stats.totalVisits}` : '...'} />
      </Grid>
      <Grid lg={3} sm={6} xs={12}>
        <TotalCustomers
          diff={16}
          trend="down"
          sx={{ height: '100%' }}
          value={stats ? stats.totalPatients.toLocaleString() : '...'}
        />
      </Grid>
      <Grid lg={3} sm={6} xs={12}>
        <TasksProgress sx={{ height: '100%' }} value={taskProgress?taskProgress : 0} />
      </Grid>
      <Grid lg={3} sm={6} xs={12}>
        <TotalProfit sx={{ height: '100%' }} value={stats ? `${stats.totalProviders}` : '...'} />
      </Grid>

      {/* Keeping the rest static for now, or update based on your real data */}
      <Grid lg={8} xs={12}>
      {!loadingChart && (
          <Sales
            chartSeries={chartSeries}
            sx={{ height: '100%' }}
          />
        )}
      </Grid>
    
    <Grid lg={4} md={6} xs={12}>
     
      <Traffic
chartSeries={[
    stats?.completedAppointments ?? 0,
    stats?.scheduledAppointments ?? 0,
    stats?.cancelledAppointments ?? 0
  ]}
  labels={['Completed', 'Scheduled', 'Cancelled']}
  sx={{ height: '100%' }}
/>
</Grid>
      <Grid lg={4} md={6} xs={12}>
        <LatestProducts
          products={mappedProducts}
          sx={{ height: '100%' }}
        />
      </Grid>
      <Grid lg={8} md={12} xs={12}>
        <LatestOrders
          orders={mappedZipcodes}
          sx={{ height: '100%' }}
        />
      </Grid>
    </Grid>
  );
}