import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import RefreshIcon from '@mui/icons-material/Refresh';
import CircularProgress from '@mui/material/CircularProgress';
import { PanelTile } from 'dashgui/panels';
import { AutomatGrid } from 'react-virtual-aggridautomat';
import { articleHistoryGridAutomat } from '../../automats';
import { router } from '../../appRouter';

const COLUMN_DEFS = [
  {
    headerName: 'ID',
    field: 'id',
    maxWidth: 90,
    sortable: true,
    filter: 'agNumberColumnFilter',
    cellStyle: { fontVariantNumeric: 'tabular-nums' },
  },
  {
    headerName: 'Datum',
    field: 'date',
    minWidth: 170,
    maxWidth: 200,
    sortable: true,
    valueFormatter: (p) => (p.value ? new Date(p.value).toLocaleString('de-DE') : ''),
    cellStyle: { fontVariantNumeric: 'tabular-nums' },
  },
  {
    headerName: 'Artikel-Nr.',
    field: 'sku',
    minWidth: 130,
    maxWidth: 160,
    sortable: true,
    filter: 'agTextColumnFilter',
    cellRenderer: (p) => {
      if (!p.value) return '';
      return (
        <a
          href={`/artikel/${encodeURIComponent(p.value)}`}
          onClick={(e) => {
            e.preventDefault();
            void router.navigate(`/artikel/${encodeURIComponent(p.value)}`);
          }}
          style={{ color: '#2563eb', fontWeight: 600, textDecoration: 'none' }}
        >
          {p.value}
        </a>
      );
    },
  },
  {
    headerName: 'Artikelname',
    field: 'name',
    minWidth: 180,
    flex: 1,
    sortable: true,
    filter: 'agTextColumnFilter',
  },
  {
    headerName: 'Änderung / Ereignis',
    field: 'text',
    minWidth: 300,
    flex: 2,
    sortable: true,
    filter: 'agTextColumnFilter',
    cellStyle: { whiteSpace: 'pre-wrap', lineHeight: '1.4' },
    autoHeight: true,
  },
  {
    headerName: 'Benutzer',
    field: 'user',
    maxWidth: 160,
    sortable: true,
    filter: 'agTextColumnFilter',
    valueGetter: (p) =>
      p.data?.user ||
      p.data?.employee ||
      p.data?.companyuser ||
      (p.data?.companyuserId ? `User #${p.data.companyuserId}` : '—'),
  },
];

export default class ArticleHistoryPage extends PureComponent {
  constructor(props) {
    super(props);
    const s = articleHistoryGridAutomat.state;
    this.state = {
      loading: s.loading,
      error: s.error,
      totalRows: s.totalRows,
    };
    this.handleReload = this.handleReload.bind(this);
  }

  componentDidMount() {
    this.unsub = articleHistoryGridAutomat.subscribe(this, (state) => ({
      loading: state.loading,
      error: state.error,
      totalRows: state.totalRows,
    }));
  }

  componentWillUnmount() {
    this.unsub?.();
  }

  handleReload() {
    articleHistoryGridAutomat.actions.reload();
  }

  render() {
    const { loading, totalRows } = this.state;

    const actions = (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
        {loading && <CircularProgress size={18} thickness={5} />}
        {totalRows >= 0 && (
          <Typography variant="body2" color="text.secondary">
            {totalRows} Einträge
          </Typography>
        )}
        <Button
          size="small"
          variant="outlined"
          startIcon={<RefreshIcon />}
          onClick={this.handleReload}
          disabled={loading}
        >
          Aktualisieren
        </Button>
      </Box>
    );

    return (
      <PanelTile title="Artikel-Historie" actions={actions} sx={{ p: 0, height: 'calc(100vh - 140px)', display: 'flex', flexDirection: 'column' }}>
        <Box sx={{ flex: 1, minHeight: 0, width: '100%' }}>
          <AutomatGrid
            automat={articleHistoryGridAutomat}
            columnDefs={COLUMN_DEFS}
            rowIdField="id"
            cacheBlockSize={50}
            height="100%"
            width="100%"
            noRowsOverlayText="Keine Historieneinträge vorhanden"
          />
        </Box>
      </PanelTile>
    );
  }
}