import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { ProgressCircle } from './progress-circle';

const meta = {
  title: 'Components/ProgressCircle',
  component: ProgressCircle,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Circular progress (0–100). The linear `Progress` is the better default — a ring is for places a bar does not fit, like a tile corner or a table cell. Omit `value` for an indeterminate task and the ring spins.\n\nSizes run `xs`–`xl` (24–64px) with the stroke weight climbing 4→8, straight from CBAR. Colours come from the palette: the track is `--ctl-subtle` and the arc `--ctl-solid`. CBAR picks a different pair of ramp steps per palette, which leaves its `secondary` ring one step apart from its own track; using the roles keeps every palette legible.',
      },
    },
  },
  tags: ['autodocs'],
  args: { value: 72 },
  argTypes: {
    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
  },
} satisfies Meta<typeof ProgressCircle>;

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

export const Default: Story = {};

/** 24 / 32 / 40 / 48 / 64px, with the stroke thickening as the ring grows. */
export const Sizes: Story = {
  render: () => (
    <div className="flex items-end gap-4">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <ProgressCircle key={size} size={size} value={72} />
      ))}
    </div>
  ),
};

export const Palettes: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      {(['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'] as const).map(
        (palette) => (
          <ProgressCircle key={palette} colorPalette={palette} size="lg" value={64} />
        )
      )}
    </div>
  ),
};

/** Without a label, for a dense row where the number would not be readable. */
export const WithoutValue: Story = {
  args: { showValue: false, size: 'sm' },
};

/** No `value` at all — Radix marks it indeterminate and the arc spins. */
export const Indeterminate: Story = {
  args: { value: undefined },
};

export const Animated: Story = {
  render: function AnimatedStory() {
    const [value, setValue] = React.useState(10);

    React.useEffect(() => {
      const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 10)), 700);
      return () => clearInterval(id);
    }, []);

    return <ProgressCircle size="xl" value={value} />;
  },
};