import type { Meta, StoryObj } from '@storybook/react';
import { FilterPanel } from './FilterPanel';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { Chip } from '../../atoms/Chip';

const meta: Meta<typeof FilterPanel> = {
  title: 'Molecules/FilterPanel',
  component: FilterPanel,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    label: { control: 'text' },
    activeCount: { control: 'number' },
  },
  decorators: [
    (Story) => (
      <Box sx={{ p: 4, minHeight: 400 }}>
        <Story />
      </Box>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof FilterPanel>;

/** Default state — no active filters */
export const Default: Story = {
  args: {
    activeCount: 0,
    children: (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <Chip label="Verified providers" variant="outlined" size="small" />
        <Chip label="Within 10km" variant="outlined" size="small" />
        <Chip label="Reviews 4+★" variant="outlined" size="small" />
      </Box>
    ),
  },
};

/** With active filters — badge count shown */
export const WithActiveFilters: Story = {
  args: {
    activeCount: 2,
    onClear: () => {},
    children: (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <Chip label="Verified providers" variant="outlined" size="small" selected />
        <Chip label="Within 10km" variant="outlined" size="small" selected />
        <Chip label="Reviews 4+★" variant="outlined" size="small" />
      </Box>
    ),
  },
};

/** Select-based filters — category + price (CoffinsStep pattern) */
export const SelectFilters: Story = {
  args: {
    activeCount: 1,
    onClear: () => {},
    children: (
      <>
        <TextField select label="Category" value="solid_timber" fullWidth>
          <MenuItem value="all">All categories</MenuItem>
          <MenuItem value="solid_timber">Solid Timber</MenuItem>
          <MenuItem value="environmental">Environmental</MenuItem>
          <MenuItem value="designer">Designer</MenuItem>
        </TextField>
        <TextField select label="Price range" value="all" fullWidth>
          <MenuItem value="all">All prices</MenuItem>
          <MenuItem value="under_2000">Under $2,000</MenuItem>
          <MenuItem value="2000_4000">$2,000 – $4,000</MenuItem>
          <MenuItem value="over_4000">Over $4,000</MenuItem>
        </TextField>
      </>
    ),
  },
};

/** Custom label */
export const CustomLabel: Story = {
  args: {
    label: 'Sort & Filter',
    activeCount: 0,
    children: (
      <TextField select label="Sort by" value="popular" fullWidth>
        <MenuItem value="popular">Most popular</MenuItem>
        <MenuItem value="price_low">Price: Low to high</MenuItem>
        <MenuItem value="price_high">Price: High to low</MenuItem>
      </TextField>
    ),
  },
};
