import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks';
import * as AudioPlayerStories from './AudioPlayer.stories';

<Meta of={AudioPlayerStories} />

<Title />
<Subtitle>A versatile and unified audio playback component supporting two distinct layouts: an interactive card and a global floating bar.</Subtitle>

<Description>
The `AudioPlayer` is designed to handle all media consumption needs across the platform, from audio previews in content pages to persistent global playback for podcasts or process audios. It features intelligent state transitions and a highly responsive interface.
</Description>

<Primary />

## Main Properties
<Controls />

---

## Layout Variants

The component is highly adaptable and can be used in two primary modes via the `variant` prop:

### 1. Card (Default)
Ideal for embedding within pages, such as articles or process details.

*   **Auto-Float**: By default, if audio is playing and the user scrolls away, the player automatically transforms into a floating window in the corner.
*   **Behavior**: Can be disabled via the `enableAutoFloat={false}` prop.

<Canvas>
  <AudioPlayerStories.Card />
</Canvas>

### 2. Bar (Global)
A fixed bar at the bottom of the application, perfect for continuous listening while the user navigates through different screens.

*   **Layout Adjustment**: Automatically respects sidebar and AI assistant expansion using `LayoutContext` to avoid overlapping vital UI elements.
*   **Podcast Style**: Can use `colorVariant="primary"` for a high-contrast look using brand colors.

<Canvas>
  <AudioPlayerStories.GlobalBar />
</Canvas>

---

## Features and Functionality

### Playback Speed Control
The player allows adjusting the playback speed (`0.5x`, `1x`, `1.5x`, `2x`). On large screens, the control is directly accessible; on smaller screens, it automatically migrates to the secondary options menu.

### Intelligent Responsiveness
Unlike static menus, the `AudioPlayer` uses dynamic reallocation logic:
*   **Volume, Speed, and Actions**: As the screen width decreases, these controls move from the main bar and are automatically grouped into the "More Options" menu (`...`), ensuring the player never breaks or hides vital controls.

### Floating Window
When in floating mode (either via auto-float or manually), the player displays the fixed title **"Reproduzindo Mídia"** to maintain visual consistency and focus on playback, regardless of the original title length.

---

## AI Best Practices

> [!TIP]
> - **Recommended Variant** — Use the `bar` variant for audios the user should continue listening to while performing other tasks. Use the `card` variant for page-specific explanatory content.
> - **Playback Identification** — When the player floats, it shows a generic title for a clean compact layout, but keeps metadata accessible in the controls.

> [!IMPORTANT]
> - **Singleton** — We recommend instantiating only one global `AudioPlayer` per application to avoid overlapping audio streams.