'use client';

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Checkbox from '@mui/material/Checkbox';
import Divider from '@mui/material/Divider';
// import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Link from 'next/link';

import dayjs from 'dayjs';

import { useSelection } from '@/hooks/use-selection';
// import { useRouter } from 'next/navigation';


function noop(): void {
  // do nothing
}

export interface Appointment {
  id: string;
  user_name: string;
  doctor_name: string;
  category: string;
  visit_type: string;
  company_name: string;
  date: string;
  time: string;
  status: string;
  createdAt: Date;
  company_id: string;
  doctor_id: string;
  user_id:string
  doctor_degree:string


}

interface CustomersTableProps {
  count?: number;
  page?: number;
  rows?: Appointment[];
  rowsPerPage?: number;
  onRowClick?: (id: string) => void;
}

const statusColors: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
  pending: 'warning',
  complete: 'success',
  cancel: 'error',
  active:'info'
};

export function CustomersTable({
  count = 0,
  rows = [],
  page = 0,
  rowsPerPage = 0,
  // onRowClick
}: CustomersTableProps): React.JSX.Element {
  const rowIds = React.useMemo(() => {
    return rows.map((customer) => customer.id);
  }, [rows]);

  const { selectAll, deselectAll, selectOne, deselectOne, selected } = useSelection(rowIds);

  const selectedSome = (selected?.size ?? 0) > 0 && (selected?.size ?? 0) < rows.length;
  const selectedAll = rows.length > 0 && selected?.size === rows.length;
  // const router = useRouter();

  return (
    <Card>
      <Box sx={{ overflowX: 'auto' }}>
        <Table sx={{ minWidth: '800px' }}>
          <TableHead>
            <TableRow>
              <TableCell padding="checkbox">
                <Checkbox
                  checked={selectedAll}
                  indeterminate={selectedSome}
                  onChange={(event) => {
                    if (event.target.checked) {
                      selectAll();
                    } else {
                      deselectAll();
                    }
                  }}
                />
              </TableCell>
              <TableCell>Provider</TableCell>
              <TableCell>Patient</TableCell>
              <TableCell>Status</TableCell>
              <TableCell>Department</TableCell>
              <TableCell>Discipline</TableCell>
              <TableCell>Date / Time / Day</TableCell>

              <TableCell>Company</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => {
              const isSelected = selected.has(row.id);
              // console.log(row)
              

              return (
                <TableRow
                  hover
                  key={row.id}
                  selected={isSelected}
                  sx={{ cursor: 'pointer' }}
                  onClick={(event) => {
                    // Prevent row click from overriding the link behavior
                    event.stopPropagation();
                  }}
                >
                  <TableCell padding="checkbox">
                    <Checkbox
                      checked={isSelected}
                      onChange={(event) => {
                        event.stopPropagation();
                        if (event.target.checked) {
                          selectOne(row.id);
                        } else {
                          deselectOne(row.id);
                        }
                      }}
                    />
                  </TableCell>
                  <TableCell>
                  {row.doctor_id ? (
            <Link href={`/dashboard/providers/${row.doctor_id}`}  style={{ textDecoration: 'none' }} passHref>
            <Typography
              variant="subtitle2"
              component="a"
              sx={{ color: 'black',  textDecoration: 'none' }}
            >
              {row.doctor_name}
            </Typography>
          </Link>
          ) : (
            <Typography variant="body2" color="text.secondary">N/A</Typography>
          )}
                  
                  </TableCell>
                  <TableCell>
                  {row.user_id ? (
            <Link href={`/dashboard/customers/${row.user_id}`}  style={{ textDecoration: 'none' }} passHref>
            <Typography
              variant="subtitle2"
              component="a"
              sx={{ color: 'black',  textDecoration: 'none' }}
            >
              {row.user_name}
            </Typography>
          </Link>
          ) : (
            <Typography variant="body2" color="text.secondary">N/A</Typography>
          )}
                  </TableCell>
                  <TableCell>
                    <Chip
                      label={row.status}
                      color={statusColors[row.status?.toLowerCase()] || 'default'}
                      size="small"
                    />
                  </TableCell>
                  <TableCell>{row.category}</TableCell>
                  <TableCell>{row.doctor_degree}</TableCell>

                  <TableCell>
                    {dayjs(row.date).format('MMM D, YYYY')}<br />
                    {dayjs(row.date).format('dddd')}, {row.time}
                  </TableCell>
                  <TableCell>
          {row.company_id ? (
            <Link href={`/dashboard/companies/${row.company_id}`}  style={{ textDecoration: 'none' }} passHref>
            <Typography
              variant="subtitle2"
              component="a"
              sx={{ color: 'black',  textDecoration: 'none' }}
            >
              {row.company_name}
            </Typography>
          </Link>
          ) : (
            <Typography variant="body2" color="text.secondary">N/A</Typography>
          )}
        </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Box>
      <Divider />
      <TablePagination
        component="div"
        count={count}
        onPageChange={noop}
        onRowsPerPageChange={noop}
        page={page}
        rowsPerPage={rowsPerPage}
        rowsPerPageOptions={[5, 10, 25]}
      />
    </Card>
  );
}