@page "/blocks/music"
@namespace Lumeo.Docs.Pages.Patterns

<PageTitle>Music Player — Lumeo Patterns</PageTitle>

<PageHeader Title="Music Player" Description="A full-screen music application with sidebar library navigation, album grid browsing, a 'Made for You' row, and a persistent bottom playback bar with progress and volume controls." />

<ComponentDemo Title="Music Player App" Code="@_code">
    <Stack Class="w-full min-w-[760px] border border-border/40 rounded-[var(--radius-lg)] overflow-hidden" style="height: 620px;">
        <Flex Class="h-full">

            <!-- Sidebar -->
            <Flex Direction="col" Class="w-60 border-r border-border/40 bg-card shrink-0">
                <!-- Logo -->
                <Flex Class="items-center gap-2.5 px-5 py-4 border-b border-border/40">
                    <Flex Class="h-7 w-7 items-center justify-center rounded-md bg-primary shrink-0">
                        <DynamicIcon Name="Music" Class="h-4 w-4 text-primary-foreground" />
                    </Flex>
                    <Lumeo.Text Class="text-base font-bold text-foreground tracking-tight">Wavefront</Lumeo.Text>
                </Flex>

                <Stack Class="px-3 py-3 flex-1 overflow-y-auto gap-0">
                    <!-- Discover -->
                    <Lumeo.Text Class="px-2 mb-1 mt-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Discover</Lumeo.Text>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm font-medium bg-accent text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Home" Class="h-4 w-4 shrink-0" />
                        Home
                    </button>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Search" Class="h-4 w-4 shrink-0" />
                        Browse
                    </button>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Radio" Class="h-4 w-4 shrink-0" />
                        Radio
                    </button>

                    <Separator Class="my-3" />

                    <!-- Library -->
                    <Lumeo.Text Class="px-2 mb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Your Library</Lumeo.Text>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="ListMusic" Class="h-4 w-4 shrink-0" />
                        Playlists
                        <Badge Variant="Badge.BadgeVariant.Secondary" Class="ml-auto text-[10px] py-0 px-1.5">12</Badge>
                    </button>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Music" Class="h-4 w-4 shrink-0" />
                        Songs
                    </button>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Mic" Class="h-4 w-4 shrink-0" />
                        Artists
                    </button>
                    <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5">
                        <DynamicIcon Name="Disc" Class="h-4 w-4 shrink-0" />
                        Albums
                    </button>

                    <Separator Class="my-3" />

                    <!-- Recent Playlists -->
                    <Lumeo.Text Class="px-2 mb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Playlists</Lumeo.Text>
                    @foreach (var pl in _playlists)
                    {
                        <button class="flex items-center gap-2.5 w-full rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors mb-0.5 truncate">
                            <DynamicIcon Name="ListMusic" Class="h-3.5 w-3.5 shrink-0 opacity-60" />
                            <span class="truncate">@pl</span>
                        </button>
                    }
                </Stack>
            </Flex>

            <!-- Main Content -->
            <Flex Direction="col" Class="flex-1 overflow-hidden bg-background">
                <Stack Class="flex-1 overflow-y-auto p-6 gap-0">

                    <!-- Recently Played -->
                    <Stack Class="mb-7">
                        <Flex Class="items-center justify-between mb-4">
                            <Heading Level="3" Class="text-xl font-semibold text-foreground tracking-tight">Recently Played</Heading>
                            <button class="text-sm text-primary hover:underline flex items-center gap-1 transition-colors">
                                See all <DynamicIcon Name="ChevronRight" Class="h-3.5 w-3.5" />
                            </button>
                        </Flex>
                        <Grid Class="grid-cols-2 lg:grid-cols-4 gap-4">
                            @foreach (var album in _featuredAlbums)
                            {
                                var a = album;
                                <div class="group cursor-pointer" @onclick="@(() => SelectSong(a.Title, a.Artist, a.Duration))">
                                    <div class="relative rounded-[var(--radius-md)] overflow-hidden @a.BgClass mb-3" style="aspect-ratio:1">
                                        <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <DynamicIcon Name="Music" Class="h-12 w-12 text-white/20" />
                                        </div>
                                        <!-- Play overlay on hover -->
                                        <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                            <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center shadow-lg">
                                                <DynamicIcon Name="Play" Class="h-5 w-5 text-primary-foreground ml-0.5" />
                                            </div>
                                        </div>
                                        <div class="absolute bottom-0 left-0 right-0 px-3 py-2.5 bg-gradient-to-t from-black/60 to-transparent">
                                            <Lumeo.Text Class="text-white text-xs font-semibold leading-tight truncate">@a.Title</Lumeo.Text>
                                        </div>
                                    </div>
                                    <Lumeo.Text Class="text-sm font-semibold text-foreground truncate leading-tight">@a.Title</Lumeo.Text>
                                    <Lumeo.Text Class="text-xs text-muted-foreground truncate mt-0.5">@a.Artist</Lumeo.Text>
                                </div>
                            }
                        </Grid>
                    </Stack>

                    <!-- Made For You -->
                    <Stack>
                        <Flex Class="items-center justify-between mb-4">
                            <Heading Level="3" Class="text-xl font-semibold text-foreground tracking-tight">Made For You</Heading>
                            <button class="text-sm text-primary hover:underline flex items-center gap-1 transition-colors">
                                See all <DynamicIcon Name="ChevronRight" Class="h-3.5 w-3.5" />
                            </button>
                        </Flex>
                        <Grid Class="grid-cols-3 lg:grid-cols-6 gap-3">
                            @foreach (var mix in _madeForYou)
                            {
                                var m = mix;
                                <div class="group cursor-pointer" @onclick="@(() => SelectSong(m.Title, m.Artist, m.Duration))">
                                    <div class="relative rounded-[var(--radius-md)] overflow-hidden @m.BgClass mb-2 group-hover:opacity-90 transition-opacity" style="aspect-ratio:1">
                                        <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <DynamicIcon Name="Music" Class="h-7 w-7 text-white/25" />
                                        </div>
                                    </div>
                                    <Lumeo.Text Class="text-xs font-medium text-foreground truncate leading-snug">@m.Title</Lumeo.Text>
                                    <Lumeo.Text Class="text-[11px] text-muted-foreground truncate">@m.Artist</Lumeo.Text>
                                </div>
                            }
                        </Grid>
                    </Stack>

                </Stack>

                <!-- Bottom Player Bar -->
                <Stack Class="border-t border-border/40 bg-card px-5 py-3 shrink-0">
                    <Flex Class="items-center gap-4">

                        <!-- Current Track Info -->
                        <Flex Class="items-center gap-3 w-52 shrink-0 min-w-0">
                            <div class="relative h-11 w-11 rounded-md overflow-hidden @_currentBg shrink-0">
                                <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <DynamicIcon Name="Music" Class="h-4 w-4 text-white/30" />
                                </div>
                            </div>
                            <Stack Class="min-w-0 flex-1">
                                <Lumeo.Text Class="text-sm font-medium text-foreground truncate leading-tight">@_currentSong</Lumeo.Text>
                                <Lumeo.Text Class="text-xs text-muted-foreground truncate">@_currentArtist</Lumeo.Text>
                            </Stack>
                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-7 w-7 shrink-0" @onclick="() => _isLiked = !_isLiked">
                                <DynamicIcon Name="Heart" Class="@(_isLiked ? "h-4 w-4 text-destructive fill-destructive transition-colors" : "h-4 w-4 text-muted-foreground transition-colors")" />
                            </Button>
                        </Flex>

                        <!-- Playback Controls -->
                        <Flex Direction="col" Class="flex-1 items-center gap-1.5 min-w-0">
                            <Flex Class="items-center gap-1">
                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-foreground transition-colors">
                                    <DynamicIcon Name="Shuffle" Class="h-4 w-4" />
                                </Button>
                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-foreground transition-colors" @onclick="PrevSong">
                                    <DynamicIcon Name="SkipBack" Class="h-4 w-4" />
                                </Button>
                                <Button Variant="Button.ButtonVariant.Default" Size="Button.ButtonSize.Icon" Class="h-9 w-9 rounded-full" @onclick="TogglePlay">
                                    @if (_isPlaying)
                                    {
                                        <DynamicIcon Name="Pause" Class="h-4 w-4" />
                                    }
                                    else
                                    {
                                        <DynamicIcon Name="Play" Class="h-4 w-4 ml-0.5" />
                                    }
                                </Button>
                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-foreground transition-colors" @onclick="NextSong">
                                    <DynamicIcon Name="SkipForward" Class="h-4 w-4" />
                                </Button>
                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-foreground transition-colors">
                                    <DynamicIcon Name="Repeat" Class="h-4 w-4" />
                                </Button>
                            </Flex>
                            <Flex Class="items-center gap-2 w-full max-w-sm">
                                <Lumeo.Text As="span" Class="text-[11px] text-muted-foreground w-8 text-right tabular-nums shrink-0">@FormatTime(_progress)</Lumeo.Text>
                                <Slider @bind-Value="_progress" Min="0" Max="@_currentDuration" Class="flex-1" />
                                <Lumeo.Text As="span" Class="text-[11px] text-muted-foreground w-8 tabular-nums shrink-0">@FormatTime(_currentDuration)</Lumeo.Text>
                            </Flex>
                        </Flex>

                        <!-- Volume -->
                        <Flex Class="items-center gap-2 w-28 shrink-0">
                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground transition-colors">
                                <DynamicIcon Name="Volume2" Class="h-4 w-4" />
                            </Button>
                            <Slider @bind-Value="_volume" Min="0" Max="100" Class="flex-1" />
                        </Flex>

                    </Flex>
                </Stack>
            </Flex>

        </Flex>
    </Stack>
</ComponentDemo>

@code {
    private string _currentSong = "Neon Bloom";
    private string _currentArtist = "Hollow Echoes";
    private string _currentBg = "bg-primary";
    private bool _isPlaying = false;
    private bool _isLiked = false;
    private double _progress = 67;
    private double _volume = 72;
    private double _currentDuration = 214;

    private readonly List<string> _playlists = new()
    {
        "Late Night Drive", "Focus Mode", "Summer 2024", "Indie Essentials"
    };

    private record AlbumItem(string Title, string Artist, string BgClass, double Duration);

    private readonly List<AlbumItem> _featuredAlbums = new()
    {
        new("Neon Bloom",       "Hollow Echoes",     "bg-primary",         214),
        new("Solar Static",     "Nova Circuit",      "bg-destructive/80",  198),
        new("Tide & Current",   "Blue Harbor",       "bg-chart-1/80",      227),
        new("Concrete Jungle",  "Milo & The Beat",   "bg-chart-2/80",      183),
    };

    private readonly List<AlbumItem> _madeForYou = new()
    {
        new("Chill Mix",        "Various Artists",   "bg-primary/60",      0),
        new("Focus Flow",       "Various Artists",   "bg-chart-1/60",      0),
        new("Late Night",       "Various Artists",   "bg-chart-2/60",      0),
        new("Morning Vibes",    "Various Artists",   "bg-chart-3/60",      0),
        new("Workout Hits",     "Various Artists",   "bg-destructive/60",  0),
        new("Jazz Hour",        "Various Artists",   "bg-chart-4/60",      0),
    };

    private void SelectSong(string title, string artist, double duration)
    {
        _currentSong = title;
        _currentArtist = artist;
        _currentDuration = duration > 0 ? duration : 210;
        _currentBg = _featuredAlbums.FirstOrDefault(a => a.Title == title)?.BgClass ?? "bg-primary";
        _isPlaying = true;
        _progress = 0;
    }

    private void TogglePlay() => _isPlaying = !_isPlaying;

    private void PrevSong() => _progress = 0;

    private void NextSong()
    {
        _progress = 0;
        _isPlaying = true;
    }

    private string FormatTime(double seconds)
    {
        var ts = TimeSpan.FromSeconds(seconds);
        return $"{(int)ts.TotalMinutes}:{ts.Seconds:D2}";
    }

    private string _code = @"<!-- Music Player Layout -->
<Stack Class=""border border-border/40 rounded-[var(--radius-lg)] overflow-hidden"" style=""height:620px"">
<Flex Class=""h-full"">

  <!-- Sidebar -->
  <Flex Direction=""col"" Class=""w-60 border-r border-border/40 bg-card shrink-0"">
    <Flex Class=""items-center gap-2.5 px-5 py-4 border-b border-border/40"">
      <Flex Class=""h-7 w-7 items-center justify-center rounded-md bg-primary shrink-0"">
        <DynamicIcon Name=""Music"" Class=""h-4 w-4 text-primary-foreground"" />
      </Flex>
      <Lumeo.Text Class=""text-base font-bold text-foreground"">Wavefront</Lumeo.Text>
    </Flex>
    <Stack Class=""px-3 py-3 flex-1 overflow-y-auto"">
      <!-- Nav items with hover:bg-accent transition-colors -->
      <button class=""...active"">Home</button>
      <button class=""...muted hover"">Browse</button>
      <Separator Class=""my-3"" />
      <!-- Library + Playlists sections ... -->
    </Stack>
  </Flex>

  <!-- Main -->
  <Flex Direction=""col"" Class=""flex-1 overflow-hidden bg-background"">
    <Stack Class=""flex-1 overflow-y-auto p-6"">

      <!-- Recently Played grid -->
      <Heading Level=""3"">Recently Played</Heading>
      <Grid Class=""grid-cols-4 gap-4"">
        @foreach (var album in _featuredAlbums)
        {
          <div class=""group cursor-pointer"" @onclick=""() => SelectSong(album)"">
            <div class=""relative rounded-[var(--radius-md)] @album.BgClass overflow-hidden"" style=""aspect-ratio:1"">
              <!-- Play overlay on group-hover -->
              <div class=""absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"">
                <div class=""h-10 w-10 rounded-full bg-primary flex items-center justify-center"">
                  <DynamicIcon Name=""Play"" Class=""h-5 w-5 text-primary-foreground"" />
                </div>
              </div>
            </div>
            <Lumeo.Text Class=""text-sm font-semibold text-foreground"">@album.Title</Lumeo.Text>
            <Lumeo.Text Class=""text-xs text-muted-foreground"">@album.Artist</Lumeo.Text>
          </div>
        }
      </Grid>

      <!-- Made For You row -->
      <Heading Level=""3"">Made For You</Heading>
      <Grid Class=""grid-cols-6 gap-3""><!-- mix tiles --></Grid>

    </Stack>

    <!-- Player Bar -->
    <Stack Class=""border-t border-border/40 bg-card px-5 py-3 shrink-0"">
      <Flex Class=""items-center gap-4"">
        <!-- Track info (w-52) -->
        <!-- Playback controls (flex-1 center, gap-1) -->
        <!--   Shuffle | SkipBack | Play/Pause (rounded-full) | SkipForward | Repeat -->
        <!--   Progress slider with time labels -->
        <!-- Volume (w-28) -->
      </Flex>
    </Stack>
  </Flex>

</Flex>
</Stack>

@code {
  private string _currentSong = ""Neon Bloom"";
  private string _currentArtist = ""Hollow Echoes"";
  private bool _isPlaying = false;
  private bool _isLiked = false;
  private double _progress = 67;
  private double _volume = 72;

  private void TogglePlay() => _isPlaying = !_isPlaying;
  private string FormatTime(double s) => $""{(int)(s/60)}:{((int)s%60):D2}"";
}";
}
