'use client';

import type { IAuditFilters } from 'src/contexts/types/audit';
import type { UseSetStateReturn } from 'src/hooks/use-set-state';

import React from 'react';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import TableSortLabel from '@mui/material/TableSortLabel';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import {
  Box,
  Button,
  TableRow,
  Checkbox,
  TableHead,
  TableCell,
  TextField,
  IconButton,
  Typography,
  InputAdornment,
} from '@mui/material';

import { usePopover, CustomPopover } from 'src/shared/components/custom-popover';
import ConditionalComponent from 'src/shared/components/ConditionalComponent/ConditionalComponent';

type Column = {
  id: string;
  label: string;
  width?: number;
  sx?: any;
  isFilterable?: boolean;
};

type Props = {
  columns: Column[];
  filters: UseSetStateReturn<IAuditFilters>;
  dateError: boolean;
  order: 'asc' | 'desc';
  orderBy: string;
  onSort: (columnId: string) => void;
  totalResults: number;
  onColumnFilter?: (id: string, value: string) => void;
  columnFilters?: Record<string, string>;
  numSelected?: number;
  onSelectAllRows?: (checked: boolean) => void;
};

export function TableHeadWithFilters({
  columns,
  filters,
  dateError,
  order,
  orderBy,
  onSort,
  totalResults,
  onColumnFilter,
  columnFilters = {},
  numSelected,
  onSelectAllRows,
}: Props) {
  const datePopover = usePopover();

  // Fonction helper pour le rendu du filtre par colonne
  const renderColumnFilter = (column: Column) => {
    if (!column.isFilterable || !onColumnFilter) return null;

    return (
      <TextField
        size="small"
        value={columnFilters[column.id] || ''}
        onChange={(e) => onColumnFilter(column.id, e.target.value)}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <Box
                component={FontAwesomeIcon}
                icon={faSearch}
                sx={{
                  cursor: 'text',
                  '&:hover': { color: 'primary.main' },
                }}
                onClick={(e) => {
                  const inputElement = e.currentTarget
                    .closest('.MuiInputBase-root')
                    ?.querySelector('input');
                  if (inputElement) {
                    inputElement.focus();
                  }
                }}
              />
            </InputAdornment>
          ),
          sx: {
            '& fieldset': { border: 'none' },
            backgroundColor: 'background.neutral',
            borderRadius: 1,
            height: '32px',
            width: '120px',
          },
        }}
      />
    );
  };

  const renderHeaderCell = (col: Column) => {
    if (col.id === '') {
      return (
        <TableCell key={`header-${col.id}`} padding="checkbox" rowSpan={2}>
          <Checkbox
            indeterminate={!!numSelected && numSelected < totalResults}
            checked={!!totalResults && numSelected === totalResults}
            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
              onSelectAllRows && onSelectAllRows(event.target.checked)
            }
            inputProps={{
              name: 'select-all-rows',
              'aria-label': 'select all rows',
            }}
          />
        </TableCell>
      );
    }
    if (col.id === 'actions') {
      return (
        <TableCell
          key={`header-${col.id}`}
          width={col.width ?? 'auto'}
          sx={{ ...(col.sx ?? {}) }}
          rowSpan={2}
        >
          {col.label}
        </TableCell>
      );
    }

    return (
      <TableCell
        key={`header-${col.id}`}
        width={col.width ?? 'auto'}
        sx={{ ...(col.sx ?? {}), padding: '8px 16px', borderBottom: 'none', pb: 0 }}
      >
        <TableSortLabel
          active={orderBy === col.id}
          direction={orderBy === col.id ? order : 'asc'}
          onClick={() => onSort(col.id)}
        >
          {col.label}
        </TableSortLabel>

        <ConditionalComponent
          isValid={
            col.id === 'paymentDate' && (!!filters.state.startDate || !!filters.state.endDate)
          }
        >
          <Box
            sx={{
              width: 8,
              height: 8,
              borderRadius: '50%',
              bgcolor: 'primary.main',
              display: 'inline-block',
              ml: 1,
            }}
          />
        </ConditionalComponent>
      </TableCell>
    );
  };

  const renderSearchCell = (col: Column) => {
    if (col.id === '' || col.id === 'actions') {
      return null;
    }

    switch (col.id) {
      case 'userName':
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <TextField
              size="small"
              value={filters.state.userName}
              onChange={(e) => filters.setState({ userName: e.target.value })}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Box
                      component={FontAwesomeIcon}
                      icon={faSearch}
                      sx={{
                        cursor: 'text',
                        '&:hover': { color: 'primary.main' },
                      }}
                    />
                  </InputAdornment>
                ),
                sx: {
                  '& fieldset': { border: 'none' },
                  backgroundColor: 'background.neutral',
                  borderRadius: 1,
                  height: '32px',
                  width: '120px',
                },
              }}
            />
          </TableCell>
        );
      case 'actionType':
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <TextField
              size="small"
              value={filters.state.actionType}
              onChange={(e) => filters.setState({ actionType: e.target.value })}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Box
                      component={FontAwesomeIcon}
                      icon={faSearch}
                      sx={{
                        cursor: 'text',
                        '&:hover': { color: 'primary.main' },
                      }}
                    />
                  </InputAdornment>
                ),
                sx: {
                  '& fieldset': { border: 'none' },
                  backgroundColor: 'background.neutral',
                  borderRadius: 1,
                  height: '32px',
                  width: '120px',
                },
              }}
            />
          </TableCell>
        );
      case 'entityType':
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <TextField
              size="small"
              value={filters.state.entityType}
              onChange={(e) => filters.setState({ entityType: e.target.value })}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Box
                      component={FontAwesomeIcon}
                      icon={faSearch}
                      sx={{
                        cursor: 'text',
                        '&:hover': { color: 'primary.main' },
                      }}
                    />
                  </InputAdornment>
                ),
                sx: {
                  '& fieldset': { border: 'none' },
                  backgroundColor: 'background.neutral',
                  borderRadius: 1,
                  height: '32px',
                  width: '120px',
                },
              }}
            />
          </TableCell>
        );
      case 'entityId':
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <TextField
              size="small"
              value={filters.state.entityId}
              onChange={(e) => filters.setState({ entityId: e.target.value })}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Box
                      component={FontAwesomeIcon}
                      icon={faSearch}
                      sx={{
                        cursor: 'text',
                        '&:hover': { color: 'primary.main' },
                      }}
                    />
                  </InputAdornment>
                ),
                sx: {
                  '& fieldset': { border: 'none' },
                  backgroundColor: 'background.neutral',
                  borderRadius: 1,
                  height: '32px',
                  width: '120px',
                },
              }}
            />
          </TableCell>
        );
      case 'timestamp':
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <IconButton
              size="small"
              onClick={datePopover.onOpen}
              sx={{
                width: '20px',
                height: '20px',
                '& svg': {
                  fontSize: '1.03rem',
                },
              }}
            >
              <FontAwesomeIcon icon={faSearch} />
            </IconButton>

            <CustomPopover
              open={datePopover.open}
              anchorEl={datePopover.anchorEl}
              onClose={datePopover.onClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'right',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
            >
              <Box sx={{ p: 2, minWidth: 300 }}>
                <Typography variant="subtitle2">Date de début</Typography>

                <ConditionalComponent isValid={dateError}>
                  <Typography color="error" variant="body2" sx={{ mt: 2 }}>
                    Date invalide
                  </Typography>
                </ConditionalComponent>

                <DatePicker
                  value={filters.state.startDate}
                  onChange={(newValue) => filters.setState({ startDate: newValue })}
                  format="DD/MM/YYYY"
                  slotProps={{
                    textField: {
                      fullWidth: true,
                      size: 'small',
                      error: dateError,
                      placeholder: 'Date de début',
                      sx: { mt: 1, mb: 2 },
                    },
                  }}
                />

                <Typography variant="subtitle2">Date de fin</Typography>
                <DatePicker
                  value={filters.state.endDate}
                  onChange={(newValue) => filters.setState({ endDate: newValue })}
                  format="DD/MM/YYYY"
                  slotProps={{
                    textField: {
                      fullWidth: true,
                      size: 'small',
                      error: dateError,
                      placeholder: 'Date de fin',
                      sx: { mt: 1, mb: 2 },
                    },
                  }}
                />

                <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
                  <Button
                    variant="outlined"
                    size="small"
                    onClick={() => {
                      filters.setState({
                        startDate: null,
                        endDate: null,
                      });
                      datePopover.onClose();
                    }}
                  >
                    Réinitialiser
                  </Button>
                </Box>
              </Box>
            </CustomPopover>
          </TableCell>
        );

      default:
        return (
          <TableCell key={`search-${col.id}`} sx={{ padding: '0 16px 8px', borderTop: 'none' }}>
            <ConditionalComponent isValid={!!col.isFilterable}>
              {renderColumnFilter(col)}
            </ConditionalComponent>
          </TableCell>
        );
    }
  };

  return (
    <TableHead>
      <TableRow>{columns.map((col) => renderHeaderCell(col))}</TableRow>
      <TableRow>{columns.map((col) => renderSearchCell(col))}</TableRow>
    </TableHead>
  );
}
