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


'use client';

import * as React from 'react';
import { useEffect, useState, useContext } from 'react';
import type { Metadata } from 'next';
 
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
 

import { config } from '@/config';
import { CustomersFilters } from '@/components/dashboard/appointments/appointments-filters';
import { CustomersTable } from '@/components/dashboard/appointments/appointments-table';
import type { Appointment } from '@/components/dashboard/appointments/appointments-table';
import { useRouter } from 'next/navigation';
import { UserContext } from '@/contexts/user-context';

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

export function ProviderPageClient(): React.JSX.Element {
  const [customers, setCustomers] = useState<Appointment[]>([]);
  const [loading, setLoading] = useState(true);
  const page = 0;
  const rowsPerPage = 5;
  const { user: loggedInUser } = useContext(UserContext) ?? {};
 




  useEffect(() => {
    if (!loggedInUser) return;

    const fetchCustomers = async () => {
      // console.log(loggedInUser.role,'loggedInUser.role')
      // console.log(loggedInUser.companies[0].id,'loggedInUser.role')

      try {
        let url = '/admin/api/appointments';
        if (loggedInUser.role === 'manager' && loggedInUser.companies.length > 0) {
          // Find the company with active: true
          const activeCompany = loggedInUser.companies.find(company => company.active);

          if (activeCompany) {
            // Append the companyId of the active company to the URL
            url += `?companyId=${activeCompany.id}`;
          }
        }

        // if (loggedInUser.role === 'manager' && loggedInUser.companies[0].id) {
        //   url += `&companyId=${loggedInUser.activeCompanyId}`;
        // }

        const res = await fetch(url);
        const data = await res.json();

        const formatted = data.map((item: any, index: number) => ({
          ...item,
          id: item.id || `DB-USER-${index + 1}`,
          avatar: item.profile
          ? `https://helloprovider.co/app/images/${item.profile}`
          : '/assets/avatar-1.png', // fallback avatar
          createdAt: new Date(item.createdAt || Date.now()),
        }));

        setCustomers(formatted);
      } catch (err) {
        // console.error('Failed to fetch customers', err);
      } finally {
        setLoading(false);
      }
    };

    fetchCustomers();
  }, [loggedInUser]); // depend on user

  const paginatedCustomers = applyPagination(customers, page, rowsPerPage);
  const router = useRouter();
  const handleRowClick = (id: string) => {
    router.push(`/dashboard/companies/${id}`);
  };
  return (
    <Stack spacing={3}>
      <Stack direction="row" spacing={3}>
        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
          <Typography variant="h4">Appointments</Typography>
        </Stack>
        <div>
          {/* <Button startIcon={<PlusIcon fontSize="var(--icon-fontSize-md)" />} variant="contained">
            Add
          </Button> */}
        </div>
      </Stack>
      <CustomersFilters />
      {loading ? (
        <Typography>Loading Appointments...</Typography>
      ) : (
        <CustomersTable
          count={customers.length}
          page={page}
          rows={paginatedCustomers}
          rowsPerPage={rowsPerPage}
          onRowClick={handleRowClick} 
        />
      )}
    </Stack>
  );
}

function applyPagination(rows: Appointment[], page: number, rowsPerPage: number): Appointment[] {
  return rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
}