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

'use client';

import * as React from 'react';
import type { Metadata } from 'next';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { useEffect, useState, useContext } from 'react';

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

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

export function ProviderPageClient(): React.JSX.Element {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [status, setStatus] = useState('');
  const [company, setCompany] = useState('');
  const [refreshData, setRefreshData] = useState(false);

  const page = 0;
  const rowsPerPage = 5;
  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const router = useRouter();



  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/customers?role=doctor';
        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/Portrait_Placeholder.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 handleTagUpdated = () => {
    setRefreshData(true); // Trigger the useEffect to refetch
  };
  const filteredCustomers = customers.filter((customer) => {
    const matchesSearch = searchQuery === '' || customer.name?.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = status === '' || customer.user_status === status;
    // const matchesCompany = company === '' || customer.companyName === company;
  
    return matchesSearch && matchesStatus;
  });
 
  const paginatedCustomers = applyPagination(filteredCustomers, page, rowsPerPage);
 

  
  return (
    <Stack spacing={3}>
      <Stack direction="row" spacing={3}>
        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
          <Typography variant="h4">Providers</Typography>
        </Stack>
        <div>
          <Button onClick={()=>router.push(`/dashboard/providers/add`)} startIcon={<PlusIcon fontSize="var(--icon-fontSize-md)" />} variant="contained">
            Add
          </Button>
        </div>
      </Stack>
      <CustomersFilters
  searchQuery={searchQuery}
  status={status}
  company={company}
  // companies={companyOptions}
  onSearchChange={setSearchQuery}
  onStatusChange={setStatus}
  onCompanyChange={setCompany}
/>
      {loading ? (
        <Typography>Loading providers...</Typography>
      ) : (
        <CustomersTable
        count={filteredCustomers.length}
          page={page}
          rows={paginatedCustomers}
          rowsPerPage={rowsPerPage}
          // onRowClick={handleRowClick}
          onTagUpdated={handleTagUpdated} // Pass the refetch trigger
        />
      )}
    </Stack>
  );
}

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