import React from 'react';
import Box from '@mui/material/Box';
import TuneIcon from '@mui/icons-material/Tune';
import type { SxProps, Theme } from '@mui/material/styles';
import { DialogShell } from '../../atoms/DialogShell';
import { Button } from '../../atoms/Button';
import { Badge } from '../../atoms/Badge';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FilterPanel molecule */
export interface FilterPanelProps {
  /** Trigger button label */
  label?: string;
  /** Number of active filters (shown as count on the trigger) */
  activeCount?: number;
  /** Filter controls — rendered inside the dialog body */
  children: React.ReactNode;
  /** Callback when "Clear all" is clicked */
  onClear?: () => void;
  /** MUI sx prop for the trigger button */
  sx?: SxProps<Theme>;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Reusable filter panel for the FA arrangement wizard.
 *
 * Renders a trigger button ("Filters") that opens a DialogShell containing
 * arbitrary filter controls (chips, selects, sliders, etc.) passed as
 * children. Active filter count shown as a badge on the trigger.
 *
 * Used in ProvidersStep, VenueStep, and CoffinsStep.
 */
export const FilterPanel = React.forwardRef<HTMLDivElement, FilterPanelProps>(
  ({ label = 'Filters', activeCount = 0, children, onClear, sx }, ref) => {
    const [open, setOpen] = React.useState(false);

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
      <>
        {/* Trigger button */}
        <Box ref={ref} sx={[{ display: 'inline-flex' }, ...(Array.isArray(sx) ? sx : [sx])]}>
          <Button
            variant="outlined"
            color="secondary"
            size="small"
            startIcon={<TuneIcon />}
            onClick={handleOpen}
            aria-expanded={open}
            aria-haspopup="dialog"
          >
            {label}
            {activeCount > 0 && (
              <Badge variant="filled" color="brand" size="small" sx={{ ml: 1 }} aria-hidden="true">
                {activeCount}
              </Badge>
            )}
            {activeCount > 0 && (
              <Box
                component="span"
                sx={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden' }}
              >
                {activeCount} active filter{activeCount !== 1 ? 's' : ''}
              </Box>
            )}
          </Button>
        </Box>

        {/* Filter dialog */}
        <DialogShell
          open={open}
          onClose={handleClose}
          title={label}
          footer={
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              {onClear && activeCount > 0 ? (
                <Button variant="text" size="small" color="secondary" onClick={() => onClear()}>
                  Reset filters
                </Button>
              ) : (
                <Box />
              )}
              <Button variant="contained" size="small" onClick={handleClose}>
                Apply
              </Button>
            </Box>
          }
        >
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>{children}</Box>
        </DialogShell>
      </>
    );
  },
);

FilterPanel.displayName = 'FilterPanel';
export default FilterPanel;
