import React, { useRef, useState } from 'react';
import { Box, Button, Stack, TextField, Typography } from '@mui/material';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import GridLayout, { getAllCollisions, noCompactor, verticalCompactor, useContainerWidth, type Compactor, type Layout } from 'react-grid-layout';
import { arrangeDashboardWidgets, type DashboardLayout, type DashboardWidget, WIDGETS } from '../dashboardLayout';
import { useI18n } from '../i18n/I18nProvider';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

const preserveGaps: Compactor = {
  ...verticalCompactor,
  compact(layout, cols) {
    // The library resolves collisions; untouched gaps survive mount and reload.
    return layout.some(item => getAllCollisions(layout, item).length > 0)
      ? verticalCompactor.compact(layout, cols) : noCompactor.compact(layout, cols);
  },
};

type Props = {
  layout: DashboardLayout;
  editing: boolean;
  disabled: boolean;
  onChange: (layout: DashboardLayout) => void;
  childrenFor: (widget: DashboardWidget) => React.ReactNode;
};

export default function DashboardGrid({ layout, editing, disabled, onChange, childrenFor }: Props) {
  const { t } = useI18n();
  const { width, containerRef } = useContainerWidth({ initialWidth: 0 });
  const wide = width >= 800;
  const [announcement, announce] = useState('');
  const focus = useRef<HTMLDivElement>(null);
  const contents = new Map(layout.widgets.filter(widget => widget.visible).map(widget => [widget.id, childrenFor(widget)]));
  const visible = layout.widgets.filter(widget => widget.visible && contents.get(widget.id) != null);
  const update = (id: string, patch: Partial<DashboardWidget>) => {
    if (disabled) return;
    const widgets = layout.widgets.map(widget => widget.id === id ? { ...widget, ...patch } : widget);
    onChange({ ...layout, widgets: arrangeDashboardWidgets(widgets) });
  };
  const move = (id: string, direction: number) => {
    const index = layout.widgets.findIndex(widget => widget.id === id);
    const target = index + direction;
    if (disabled || target < 0 || target >= layout.widgets.length) return;
    const widgets = [...layout.widgets];
    const [moved] = widgets.splice(index, 1); widgets.splice(target, 0, moved);
    onChange({ ...layout, widgets: arrangeDashboardWidgets(widgets) });
    announce(t('dashboardMoved', { name: t(WIDGETS.find(widget => widget.id === id)!.titleKey), position: target + 1, total: widgets.length }));
    requestAnimationFrame(() => focus.current?.querySelector<HTMLButtonElement>(`[data-dashboard-widget="${id}"] button[data-move]:not(:disabled)`)?.focus());
  };
  const finish = (next: Layout) => {
    if (!editing || disabled) return;
    // Mount, compaction and viewport changes never write preferences.
    if (next.some(item => item.x < 0 || item.y < 0 || item.x + item.w > 12 || item.y + item.h > 256)) return;
    const widgets = layout.widgets.map(widget => {
      const item = next.find(item => item.i === widget.id);
      return item ? { ...widget, x: item.x, y: item.y, w: item.w, h: item.h, size: item.w === 12 ? 'full' as const : 'standard' as const } : widget;
    });
    const ordered = widgets.filter(widget => widget.visible).sort((a, b) => a.y - b.y || a.x - b.x);
    onChange({ ...layout, widgets: widgets.map(widget => widget.visible ? ordered.shift()! : widget) });
    announce(t('assetsUnsavedChanges'));
  };
  const tiles = visible.map(widget => {
    const name = t(WIDGETS.find(item => item.id === widget.id)!.titleKey);
    const index = layout.widgets.indexOf(widget);
    return <Box key={widget.id} data-dashboard-widget={widget.id} data-widget-size={widget.size}
      sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', border: editing ? '1px solid' : undefined, borderColor: 'divider', borderRadius: 2, bgcolor: 'background.paper', overflow: 'hidden' }}>
      {editing ? <Stack direction="row" useFlexGap flexWrap="wrap" spacing={0.5} sx={{ p: 1, flexShrink: 0, maxHeight: '65%', overflow: 'auto' }}>
        <Button className="dashboard-grid-handle" disabled={disabled || !wide} aria-label={t('dashboardDrag', { name })} aria-describedby="dashboard-grid-help" sx={{ cursor: 'grab', minWidth: 44, minHeight: 44 }}><DragIndicatorIcon /></Button>
        <Box component="details" sx={{ flex: 1, minWidth: 0 }}>
          <Box component="summary" sx={{ cursor: 'pointer', p: 1, minHeight: 44 }}>{name}</Box>
          <Stack direction="row" useFlexGap flexWrap="wrap" spacing={1}>
            {[-1, 1].map(direction => <Button key={direction} data-move={direction} disabled={disabled || index + direction < 0 || index + direction >= layout.widgets.length}
              aria-label={t(direction < 0 ? 'dashboardMoveEarlierNamed' : 'dashboardMoveLaterNamed', { name })} onClick={() => move(widget.id, direction)}>{t(direction < 0 ? 'dashboardEarlier' : 'dashboardLater')}</Button>)}
            <TextField select label={t('dashboardSize')} value={widget.size} disabled={disabled || widget.id === 'cards'}
              slotProps={{ select: { native: true }, htmlInput: { 'aria-label': t('dashboardSizeFor', { name }) } }}
              onChange={event => update(widget.id, { size: event.target.value as 'standard' | 'full', w: event.target.value === 'full' ? 12 : 6 })}>
              <option value="standard">{t('dashboardSizeStandard')}</option><option value="full">{t('dashboardSizeFull')}</option>
            </TextField>
            <TextField type="number" label={t('dashboardHeightFor', { name })} value={widget.h} disabled={disabled} sx={{ width: 110 }}
              slotProps={{ htmlInput: { min: 4, max: 24, step: 1 } }} onChange={event => { const h = Number(event.target.value); if (Number.isInteger(h) && h >= 4 && h <= 24) update(widget.id, { h }); }} />
            <Button disabled={disabled} onClick={() => {
              update(widget.id, { visible: false });
              announce(t('dashboardWidgetHidden', { name }));
              requestAnimationFrame(() => focus.current?.focus());
            }}>{t('dashboardHideWidget')}</Button>
          </Stack>
        </Box>
      </Stack> : null}
      <Box tabIndex={wide ? 0 : undefined} role={wide ? 'group' : undefined} aria-label={wide ? name : undefined}
        sx={{ minHeight: 0, minWidth: 0, flex: 1, overflow: wide ? 'auto' : 'visible', p: editing ? 1 : 0 }}>{contents.get(widget.id)}</Box>
    </Box>;
  });
  return <Box ref={containerRef} sx={{ minWidth: 0 }}>
    {editing ? <Typography id="dashboard-grid-help" variant="body2">{t('dashboardGridHelp')}</Typography> : null}
    <Typography role="status" aria-live="polite" sx={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clipPath: 'inset(50%)' }}>{announcement}</Typography>
    <Box ref={focus} tabIndex={editing ? -1 : undefined} role={editing ? 'region' : undefined} aria-label={editing ? t('dashboardPreview') : undefined}
      sx={{ '& .react-resizable-handle': { width: 44, height: 44 }, '@media (prefers-reduced-motion: reduce)': { '& .react-grid-item': { transition: 'none' } } }}>
      {wide ? <GridLayout width={width} compactor={preserveGaps} layout={visible.map(widget => ({ i: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h, minW: widget.id === 'cards' ? 12 : 4, maxW: 12, minH: 4, maxH: 24 }))}
        gridConfig={{ cols: 12, rowHeight: 40, margin: [16, 16], containerPadding: [0, 0], maxRows: 256 }}
        dragConfig={{ enabled: editing && !disabled, handle: '.dashboard-grid-handle', allowMobileScroll: true }}
        resizeConfig={{ enabled: editing && !disabled, handles: ['se'] }} onDragStop={finish} onResizeStop={finish}>{tiles}</GridLayout>
        : <Stack spacing={3}>{tiles}</Stack>}
    </Box>
  </Box>;
}