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

'use client';

import * as React from 'react';
import { useEffect, useState } 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 type { Customer } from '@/components/dashboard/customer/customers-table';

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;

  useEffect(() => {
    const fetchCustomers = async () => {
      try {
        const res = await fetch('/api/customers');
        const data = await res.json();
        // Add IDs if missing (important for rendering keys)
        const formatted = data.map((item: any, index: number) => ({
          ...item,
          id: item.id || `DB-USER-${index + 1}`,
          avatar: '/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();
  }, []);

  const paginatedCustomers = applyPagination(customers, page, rowsPerPage);

  return (
    <Stack spacing={3}>
      <Stack direction="row" spacing={3}>
        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
          <Typography variant="h4">Patients</Typography>
          {/* <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
            <Button color="inherit" startIcon={<UploadIcon fontSize="var(--icon-fontSize-md)" />}>
              Import
            </Button>
            <Button color="inherit" startIcon={<DownloadIcon fontSize="var(--icon-fontSize-md)" />}>
              Export
            </Button>
          </Stack> */}
        </Stack>
        <div>
          <Button startIcon={<PlusIcon fontSize="var(--icon-fontSize-md)" />} variant="contained">
            Add
          </Button>
        </div>
      </Stack>
      {/* <CustomersFilters /> */}
      {loading ? (
        <Typography>Loading patients...</Typography>
      ) : (
        <Typography>Loading patients...</Typography>

        // <CustomersTable
        //   count={customers.length}
        //   page={page}
        //   rows={paginatedCustomers}
        //   rowsPerPage={rowsPerPage}
        // />
      )}
    </Stack>
  );
}

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