/* 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 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 { config } from '@/config';
import { CustomersFilters } from '@/components/dashboard/customer/customers-filters';
import { CustomersTable } from '@/components/dashboard/customer/customers-table';
import type { Customer } from '@/components/dashboard/customer/customers-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 CustomersPageClient(): React.JSX.Element {
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(true);
  const page = 0;
  const rowsPerPage = 5;
  const [refreshData, setRefreshData] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [status, setStatus] = useState('');
  const [company, setCompany] = useState('');


  // ✅ useContext must be inside component
  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const router = useRouter();


  const fetchCustomers = async () => {
    if (!loggedInUser) return;

    // console.log(loggedInUser.role, 'loggedInUser.role');

    try {
      let url = '/admin/api/customers?role=user';
      if (loggedInUser.role === 'manager' && loggedInUser.companies.length > 0) {
        const activeCompany = loggedInUser.companies.find(company => company.active);
        if (activeCompany) {
          url += `&companyId=${activeCompany.id}`;
        }
      }

      const res = await fetch(url);
      const data = await res.json();
      // console.log(data,'data')

      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);
      // setShowBanner({ message: 'Failed to fetch customers', severity: 'error' });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCustomers();
    setRefreshData(false);
  }, [loggedInUser, refreshData]); // Depend on loggedInUser and refreshData

  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);


  const handleRowClick = (id: string) => {
    router.push(`/dashboard/customers/${id}`);
  };



  return (
    <Stack spacing={3}>
      <Stack direction="row" spacing={3}>
        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
          <Typography variant="h4">Patients</Typography>
        </Stack>
        <div>
          <Button onClick={()=>router.push(`/dashboard/customers/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 patients...</Typography>
) : customers.length === 0 ? (
  <Typography>No patient found.</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);
}