import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { StepIndicator } from './StepIndicator';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

const meta: Meta<typeof StepIndicator> = {
  title: 'Molecules/StepIndicator',
  component: StepIndicator,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2375-47468',
    },
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: 600 }}>
        <Story />
      </Box>
    ),
  ],
};

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

// ─── Arrangement Flow Steps ─────────────────────────────────────────────────

const arrangementSteps = [
  { label: 'Details' },
  { label: 'Venue' },
  { label: 'Service' },
  { label: 'Extras' },
  { label: 'Review' },
];

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

/** Default — 5-step arrangement flow, currently on step 3 */
export const Default: Story = {
  args: {
    steps: arrangementSteps,
    currentStep: 2,
  },
};

// ─── All States ─────────────────────────────────────────────────────────────

/** Shows progression through every step position */
export const AllStates: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {arrangementSteps.map((_, index) => (
        <Box key={index}>
          <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
            Step {index + 1} of {arrangementSteps.length}
          </Typography>
          <StepIndicator steps={arrangementSteps} currentStep={index} />
        </Box>
      ))}
    </Box>
  ),
};

// ─── Two Steps ──────────────────────────────────────────────────────────────

/** Minimal — 2-step flow (e.g. choose + confirm) */
export const TwoSteps: Story = {
  args: {
    steps: [{ label: 'Choose' }, { label: 'Confirm' }],
    currentStep: 0,
  },
};

// ─── Many Steps ─────────────────────────────────────────────────────────────

/** Maximum — 8-step flow showing label truncation */
export const ManySteps: Story = {
  args: {
    steps: [
      { label: 'Details' },
      { label: 'Director' },
      { label: 'Venue' },
      { label: 'Service' },
      { label: 'Coffin' },
      { label: 'Extras' },
      { label: 'Payment' },
      { label: 'Review' },
    ],
    currentStep: 3,
  },
};

// ─── Interactive ────────────────────────────────────────────────────────────

/** Interactive — navigate forward and back through steps */
export const Interactive: Story = {
  render: function Render() {
    const [step, setStep] = React.useState(0);

    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
        <StepIndicator steps={arrangementSteps} currentStep={step} />

        <Box
          sx={{
            p: 3,
            bgcolor: 'background.paper',
            borderRadius: 1,
            border: '1px solid',
            borderColor: 'divider',
          }}
        >
          <Typography variant="h5" sx={{ mb: 1 }}>
            {arrangementSteps[step].label}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Step {step + 1} of {arrangementSteps.length} — content for this step would appear here.
          </Typography>
        </Box>

        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          <Button
            variant="outlined"
            color="secondary"
            onClick={() => setStep((s) => Math.max(0, s - 1))}
            disabled={step === 0}
          >
            Back
          </Button>
          <Button
            variant="contained"
            onClick={() => setStep((s) => Math.min(arrangementSteps.length - 1, s + 1))}
            disabled={step === arrangementSteps.length - 1}
          >
            {step === arrangementSteps.length - 2 ? 'Review' : 'Continue'}
          </Button>
        </Box>
      </Box>
    );
  },
};

// ─── Completed ──────────────────────────────────────────────────────────────

/** All steps completed — final step active, all bars filled */
export const Completed: Story = {
  args: {
    steps: arrangementSteps,
    currentStep: arrangementSteps.length - 1,
  },
};

// ─── Narrow Container ───────────────────────────────────────────────────────

/** Mobile-width container showing responsive sizing */
export const NarrowContainer: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ width: 320 }}>
        <Story />
      </Box>
    ),
  ],
  args: {
    steps: arrangementSteps,
    currentStep: 2,
  },
};
