khata-ui/react-openapi/components/EnhancedTable.tsx

import * as React from 'react';
import { alpha } from '@mui/material/styles';
import {
  Box,
  Typography,
  Button,
  IconButton,
  Tooltip,
  Card,
  CardContent,
  CardActions,
  Grid,
  Menu,
  MenuItem,
  useMediaQuery,
  useTheme,
  Divider,
  Chip,
  Stack,
} from '@mui/material';
import {
  DataGrid,
  GridColDef,
  GridActionsCellItem,
  GridRenderCellParams,
  GridPaginationModel,
} from '@mui/x-data-grid';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import VisibilityIcon from '@mui/icons-material/Visibility';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { useNavigate } from 'react-router-dom';
import { ResourceConfig } from '../types/config';
import { EnhancedTableComponents } from '../types/overrides';
import { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options';

interface EnhancedTableProps {
  config: ResourceConfig;
  data: any[];
  total?: number;
  paginationModel?: GridPaginationModel;
  onPaginationModelChange?: (model: GridPaginationModel) => void;
  loading?: boolean;
  onEdit: (item: any) => void;
  onDelete: (id: string) => void;
  onCreate: () => void;
  onNavigateToResource?: (resourceName: string, id: string) => void;
  components?: EnhancedTableComponents;
}

export default function EnhancedTable({
  config,
  data,
  total,
  paginationModel: externalPaginationModel,
  onPaginationModelChange: externalOnPaginationModelChange,
  loading = false,
  onEdit,
  onDelete,
  onCreate,
  onNavigateToResource,
  components: tableComponents,
}: EnhancedTableProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const navigate = useNavigate();

  const isServer = config.filterOptions?.mode !== "client";
  const [internalPaginationModel, setInternalPaginationModel] = React.useState<GridPaginationModel>({
    page: 0,
    pageSize: 10,
  });
  const paginationModel = isServer ? externalPaginationModel : internalPaginationModel;
  const onPaginationModelChange = isServer ? externalOnPaginationModelChange : setInternalPaginationModel;
  
  const columns: GridColDef[] = React.useMemo(() => {
    const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
      let muiType: 'string' | 'number' | 'boolean' | 'date' | 'dateTime' | 'singleSelect' = 'string';
      if (field.type === 'number') muiType = 'number';
      if (field.type === 'boolean') muiType = 'boolean';
      if (field.type === 'date') muiType = 'date';
      if (field.type === 'datetime') muiType = 'dateTime';
      if (field.type === 'enum') muiType = 'singleSelect';

      const col: GridColDef = {
        field: key,
        headerName: field.label,
        type: muiType,
        flex: 1,
        minWidth: 150,
        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} components={tableComponents} />
      };

      if (muiType === 'date' || muiType === 'dateTime') {
        col.valueGetter = (value: any) => {
          if (!value) return null;
          const date = new Date(value);
          return isNaN(date.getTime()) ? null : date;
        };
      }

      if (muiType === 'singleSelect') {
        (col as GridColDef & { valueOptions: any[] }).valueOptions = toGridValueOptions(getFieldOptions(field));
      }

      return col;
    });

    cols.push({
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 120,
      getActions: (params) => [
        <GridActionsCellItem
          icon={<VisibilityIcon />}
          label="View"
          onClick={() => navigate(`/admin/${config.name}/${params.id}`)}
        />,
        <GridActionsCellItem
          icon={<EditIcon />}
          label="Edit"
          onClick={() => navigate(`/admin/${config.name}/edit/${params.id}`)}
        />,
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={() => onDelete(params.id as string)}
        />,
      ],
    });

    return cols;
  }, [config, onDelete, navigate, onNavigateToResource]);

  const mobilePageSize = 10;
  const [mobilePage, setMobilePage] = React.useState(0);
  const mobileTotalPages = Math.ceil(data.length / mobilePageSize) || 1;
  const mobileData = data.slice(mobilePage * mobilePageSize, (mobilePage + 1) * mobilePageSize);

  React.useEffect(() => {
    if (mobilePage >= mobileTotalPages) setMobilePage(0);
  }, [data.length, mobilePage, mobileTotalPages]);

  if (isMobile) {
    return (
      <Box>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2, alignItems: 'center' }}>
          <Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
          <Button variant="contained" color="primary" onClick={onCreate} size="small">
            Add
          </Button>
        </Box>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {mobileData.map((row) => (
            <Box key={row[config.primaryKey] || Math.random()}>
              <MobileCardRow 
                row={row} 
                config={config} 
                onEdit={onEdit} 
                onDelete={onDelete} 
                onNavigate={onNavigateToResource}
                navigate={navigate}
                components={tableComponents}
              />
            </Box>
          ))}
        </Box>
        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 2, flexWrap: 'wrap' }}>
          <Button size="small" disabled={mobilePage === 0} onClick={() => setMobilePage(mobilePage - 1)}>
            Previous
          </Button>
          <Typography variant="body2" sx={{ alignSelf: 'center', px: 1 }}>
            Page {mobilePage + 1} of {mobileTotalPages}
          </Typography>
          <Button size="small" disabled={mobilePage >= mobileTotalPages - 1} onClick={() => setMobilePage(mobilePage + 1)}>
            Next
          </Button>
        </Box>
      </Box>
    );
  }

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3, alignItems: 'center' }}>
        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>{config.pluralLabel}</Typography>
        <Button variant="contained" color="primary" onClick={onCreate}>
          Add {config.label}
        </Button>
      </Box>
      <DataGrid
        rows={data || []}
        columns={columns}
        autoHeight
        paginationMode={isServer ? 'server' : 'client'}
        {...(isServer ? {
          rowCount: (() => {
            if (total !== undefined) return total;
            const page = paginationModel?.page || 0;
            const pageSize = paginationModel?.pageSize || 10;
            if (data.length < pageSize) {
              return page * pageSize + data.length;
            }
            return (page + 2) * pageSize;
          })(),
        } : {})}
        loading={loading}
        paginationModel={paginationModel || { page: 0, pageSize: 10 }}
        onPaginationModelChange={onPaginationModelChange}
        getRowId={(row) => {
            const pk = config.primaryKey;
            if (row[pk] !== undefined && row[pk] !== null) return row[pk];
            const fallbackKeys = ['id', '_id', 'uuid', 'pk'];
            for (const key of fallbackKeys) {
                if (row[key] !== undefined && row[key] !== null) return row[key];
            }
            return `temp-id-${data.indexOf(row)}`;
        }}
        disableRowSelectionOnClick
        pageSizeOptions={[10, 25, 50]}
        sx={{
            border: 'none',
            '& .MuiDataGrid-cell:focus': { outline: 'none' },
            '& .MuiDataGrid-columnHeader:focus': { outline: 'none' },
        }}
      />
    </Box>
  );
}

function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components }: any) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const id = row[config.primaryKey];

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
      setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
      setAnchorEl(null);
    };

    return (
        <Card variant="outlined" sx={{ borderRadius: 2 }}>
            <CardContent sx={{ pb: 1 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                    <Typography variant="subtitle1" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
                        #{id}
                    </Typography>
                    <IconButton size="small" onClick={handleClick}>
                        <MoreVertIcon fontSize="small" />
                    </IconButton>
                    <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/${id}`); }}>View</MenuItem>
                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/edit/${id}`); }}>Edit</MenuItem>
                        <MenuItem onClick={() => { handleClose(); onDelete(id); }} sx={{ color: 'error.main' }}>Delete</MenuItem>
                    </Menu>
                </Box>
                <Divider sx={{ mb: 2 }} />
                <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
                    {Object.entries(config.fields).slice(0, 5).map(([key, field]: [string, any]) => (
                        <Box key={key}>
                            <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                                {field.label}
                            </Typography>
                            <Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile components={components} />
                            </Typography>
                        </Box>
                    ))}
                </Box>
            </CardContent>
            <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
                 <Button size="small" onClick={() => navigate(`/admin/${config.name}/${id}`)}>View Details</Button>
            </CardActions>
        </Card>
    );
}

function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: string) {
    if (!item) return "";
    if (enumValue) return resolveTemplate(enumValue, item);
    if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item);

    if (Array.isArray(displayField)) {
        return displayField
            .map(key => item[key])
            .filter(val => val !== undefined && val !== null)
            .join(' ');
    }

    return item[displayField] || item.id || JSON.stringify(item);
}

function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
    const value = params.value;
    const isPk = fieldKey === config.primaryKey;

    if (field.formatter) return field.formatter(value);

    const customRenderer = components?.cellRenderers?.[field.type as string];
    if (customRenderer) {
      return React.createElement(customRenderer, { value, row: params.row, field, fieldKey, config, onNavigate, isMobile });
    }

    // 1. Single Relation
    if (field.relation && value && !Array.isArray(value)) {
        const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value;
        const displayValue = getFormattedDisplayValue(value, field.displayField, field.enumOption?.value);
        
        return (
            <Chip 
                label={displayValue} 
                size="small" 
                variant="outlined"
                color="primary"
                onClick={(e) => { 
                    e.stopPropagation(); 
                    if (relationId) onNavigate?.(field.relation!, String(relationId)); 
                }}
                sx={{ cursor: 'pointer' }}
            />
        );
    }

    // 2. Multi-Select (Array of relations or simple strings)
    if (field.type === 'array' && Array.isArray(value)) {
        const enumValue = field.enumOption?.value;
        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField, enumValue)).join(', ');

        return (
            <Tooltip title={tooltipTitle} arrow placement="top">
                <Stack direction="row" spacing={0.5} sx={{ overflow: 'hidden', flexWrap: 'nowrap' }}>
                    {value.map((item, idx) => (
                        <Chip
                            key={idx}
                            label={getFormattedDisplayValue(item, field.displayField, enumValue)}
                            size="small"
                            variant="filled"
                            sx={{ maxWidth: 120 }}
                            onClick={(e) => {
                                e.stopPropagation();
                                if (field.relation) {
                                    const id = typeof item === 'object' ? (item.id || item._id) : item;
                                    if (id) onNavigate?.(field.relation!, String(id));
                                }
                            }}
                        />
                    ))}
                </Stack>
            </Tooltip>
        );
    }

    // 3. Simple Objects
    if (field.type === 'object' && value) {
        return getFormattedDisplayValue(value, field.displayField, field.enumOption?.value) || (isMobile ? 'Object' : JSON.stringify(value));
    }

    if (field.type === 'number' && typeof value === 'number') {
        const isNegative = value < 0;
        const color = isNegative ? 'error' : 'success';
        
        return (
            <Chip 
                label={value.toLocaleString()} 
                size="small" 
                color={color}
                variant="filled"
                sx={{ 
                    fontWeight: 'bold',
                    minWidth: 60,
                    // Soft background with bold text for a premium feel
                    bgcolor: (theme) => alpha(theme.palette[color].main, 0.15),
                    color: (theme) => theme.palette[color].dark,
                    '& .MuiChip-label': { px: 1.5 }
                }}
            />
        );
    }

    if (field.type === 'boolean') {
        return value ? (
            <Chip label="Yes" size="small" color="success" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
        ) : (
            <Chip label="No" size="small" color="default" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
        );
    }
    
    if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';

    if (field.type === 'enum') {
      const opt = getFieldOptions(field).find(o => o.key === value);
      return opt?.value ?? value;
    }

    if (isPk && !isMobile) {
        return (
            <Chip 
                label={value} 
                size="small" 
                color="primary"
                onClick={(e) => { e.stopPropagation(); navigate(`/admin/${config.name}/${params.row[config.primaryKey]}`); }}
                sx={{ cursor: 'pointer', fontWeight: 'bold' }}
            />
        );
    }

    return value;
}