import { useState } from 'react';
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Info, CheckCircle, Warning, XCircle } from '@phosphor-icons/react';
import { Progress, Spinner, Callout, Badge, Chip, Button } from '../components/ui';

const meta = {
  title: 'Feedback/Status',
  component: Progress,
  parameters: {
    docs: {
      description: {
        component:
          'Progress bar, spinner, callouts, badges and chips — the status + signalling family.',
      },
    },
  },
} satisfies Meta<typeof Progress>;

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

function ProgressDemo() {
  const [v, setV] = useState(40);
  return (
    <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Progress value={v} />
      <div style={{ display: 'flex', gap: 8 }}>
        <Button size="sm" onClick={() => setV((x) => Math.max(0, x - 10))}>−10</Button>
        <Button size="sm" variant="primary" onClick={() => setV((x) => Math.min(100, x + 10))}>+10</Button>
      </div>
    </div>
  );
}

export const ProgressBar: Story = { render: () => <ProgressDemo /> };

export const Spinners: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Spinner size="sm" />
      <Spinner />
      <Spinner size="lg" />
    </div>
  ),
};

export const Callouts: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 460 }}>
      <Callout variant="info" icon={<Info size={18} />}>Sync runs in the background.</Callout>
      <Callout variant="success" icon={<CheckCircle size={18} />}>All changes saved.</Callout>
      <Callout variant="warning" icon={<Warning size={18} />}>Storage is almost full.</Callout>
      <Callout variant="danger" icon={<XCircle size={18} />}>Failed to reach the server.</Callout>
    </div>
  ),
};

export const Badges: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <Badge variant="lime">Lime</Badge>
      <Badge variant="ember">Ember</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="lime" dot>Online</Badge>
    </div>
  ),
};

export const Chips: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      <Chip>Design</Chip>
      <Chip onRemove={() => {}}>Removable</Chip>
    </div>
  ),
};