import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ToggleButtonGroup } from './ToggleButtonGroup';
import Box from '@mui/material/Box';

const meta: Meta<typeof ToggleButtonGroup> = {
  title: 'Atoms/ToggleButtonGroup',
  component: ToggleButtonGroup,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    value: { control: 'text' },
    error: { control: 'boolean' },
    required: { control: 'boolean' },
    fullWidth: { control: 'boolean' },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
      table: { defaultValue: { summary: 'large' } },
    },
  },
};

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

// ─── Default ─────────────────────────────────────────────────────────────────

/** Binary choice with labels only */
export const Default: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Who is this funeral being arranged for?"
          options={[
            { value: 'myself', label: 'Myself' },
            { value: 'someone', label: 'Someone else' },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};

// ─── With Descriptions ──────────────────────────────────────────────────────

/** Options with label + description text */
export const WithDescriptions: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Who is this funeral being arranged for?"
          options={[
            {
              value: 'myself',
              label: 'Myself',
              description: 'I want to plan my own funeral',
            },
            {
              value: 'someone',
              label: 'Someone else',
              description: 'I am arranging for a family member or friend',
            },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};

// ─── Pre-selected ───────────────────────────────────────────────────────────

/** With a value already selected */
export const PreSelected: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>('yes');
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Has the person died?"
          options={[
            { value: 'yes', label: 'Yes', description: 'I need to arrange a funeral now' },
            { value: 'no', label: 'No', description: 'I am planning ahead' },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};

// ─── Error state ─────────────────────────────────────────────────────────────

/** Validation error — no selection made */
export const Error: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Who is this funeral being arranged for?"
          options={[
            { value: 'myself', label: 'Myself' },
            { value: 'someone', label: 'Someone else' },
          ]}
          value={value}
          onChange={setValue}
          error
          helperText="We need to know who the funeral is for to show you the right options."
          fullWidth
        />
      </Box>
    );
  },
};

// ─── Three options ──────────────────────────────────────────────────────────

/** More than two options */
export const ThreeOptions: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 600 }}>
        <ToggleButtonGroup
          label="Service style preference"
          options={[
            { value: 'traditional', label: 'Traditional' },
            { value: 'contemporary', label: 'Contemporary' },
            { value: 'religious', label: 'Religious' },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};

// ─── Disabled option ────────────────────────────────────────────────────────

/** One option disabled */
export const DisabledOption: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>('myself');
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Who is this funeral being arranged for?"
          options={[
            { value: 'myself', label: 'Myself' },
            { value: 'someone', label: 'Someone else', disabled: true },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};

// ─── Small size ──────────────────────────────────────────────────────────────

/** Small size variant */
export const Small: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 400 }}>
        <ToggleButtonGroup
          label="Urgency"
          options={[
            { value: 'immediate', label: 'Immediate' },
            { value: 'planning', label: 'Planning ahead' },
          ]}
          value={value}
          onChange={setValue}
          size="small"
          fullWidth
        />
      </Box>
    );
  },
};

// ─── With helper text ───────────────────────────────────────────────────────

/** Helper text below the group */
export const WithHelperText: Story = {
  render: () => {
    const [value, setValue] = useState<string | null>(null);
    return (
      <Box sx={{ width: 500 }}>
        <ToggleButtonGroup
          label="Has the person died?"
          helperText="This helps us tailor the process to your situation."
          options={[
            { value: 'yes', label: 'Yes' },
            { value: 'no', label: 'No' },
          ]}
          value={value}
          onChange={setValue}
          fullWidth
        />
      </Box>
    );
  },
};
