"use client"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import {
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Volume2,
  Repeat,
  Shuffle,
  ListMusic,
  Maximize2,
  Heart,
  MoreHorizontal,
  Search,
  Home,
  Library,
  Plus,
} from "lucide-react"
import { useState } from "react"

export function MediaPlayerExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""
  const [isPlaying, setIsPlaying] = useState(true)

  const playlists = [
    { name: "Recently Played", count: "28 tracks" },
    { name: "Liked Songs", count: "74 tracks" },
    { name: "Your Top 2023", count: "50 tracks" },
  ]

  const songs = [
    {
      title: "Midnight Serenade",
      artist: "Luna Ray",
      album: "Nocturnal",
      duration: "3:45",
      cover: "/placeholder.svg?key=isxqj",
    },
    {
      title: "Electric Dreams",
      artist: "Neon Pulse",
      album: "Synthwave",
      duration: "4:20",
      cover: "/placeholder.svg?key=2180v",
    },
    {
      title: "Ocean Waves",
      artist: "Coastal Sounds",
      album: "Tides",
      duration: "3:12",
      cover: "/placeholder.svg?key=qtoim",
    },
    {
      title: "Mountain High",
      artist: "Alpine Echo",
      album: "Elevate",
      duration: "5:08",
      cover: "/placeholder.svg?key=tsruc",
    },
  ]

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <div className={cn("w-16 md:w-56 border-r flex flex-col", materialClass)}>
          <div className="p-4">
            <div className="flex items-center gap-2 mb-6">
              <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
                <ListMusic className="h-4 w-4 text-primary-foreground" />
              </div>
              <h1 className="text-lg font-semibold hidden md:block">MusicStream</h1>
            </div>

            <div className="space-y-1">
              <Button variant="ghost" className="w-full justify-start" size="lg">
                <Home className="h-5 w-5 md:mr-2" />
                <span className="hidden md:inline">Home</span>
              </Button>
              <Button variant="ghost" className="w-full justify-start" size="lg">
                <Search className="h-5 w-5 md:mr-2" />
                <span className="hidden md:inline">Search</span>
              </Button>
              <Button variant="ghost" className="w-full justify-start" size="lg">
                <Library className="h-5 w-5 md:mr-2" />
                <span className="hidden md:inline">Your Library</span>
              </Button>
            </div>

            <div className="mt-8">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-sm font-medium hidden md:block">Playlists</h2>
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <div className="space-y-1">
                {playlists.map((playlist, i) => (
                  <Button key={i} variant="ghost" className="w-full justify-start text-left" size="sm">
                    <div className="hidden md:block">
                      <p className="text-sm">{playlist.name}</p>
                      <p className="text-xs text-muted-foreground">{playlist.count}</p>
                    </div>
                    <div className="md:hidden h-8 w-8 rounded bg-muted flex items-center justify-center">
                      <ListMusic className="h-4 w-4" />
                    </div>
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Main Area */}
        <div className="flex-1 overflow-auto">
          {/* Now Playing Header */}
          <div className={cn("p-6 flex items-end", materialClass)}>
            <div className="flex items-center gap-6">
              <div className="h-40 w-40 rounded-lg overflow-hidden shadow-lg">
                <img src="/placeholder.svg?key=y5deb" alt="Album cover" className="h-full w-full object-cover" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">ALBUM</p>
                <h1 className="text-3xl font-bold mb-2">Chromatic Dreams</h1>
                <div className="flex items-center gap-2">
                  <Avatar className="h-6 w-6">
                    <AvatarImage src="/diverse-avatars.png" />
                    <AvatarFallback>VP</AvatarFallback>
                  </Avatar>
                  <p className="text-sm font-medium">Violet Prism</p>
                  <span className="text-sm text-muted-foreground">• 2023 • 12 songs, 48 min</span>
                </div>
              </div>
            </div>
          </div>

          {/* Song List */}
          <div className="p-6">
            <div className="flex items-center gap-4 mb-6">
              <Button size="icon" className="rounded-full h-12 w-12 bg-primary text-primary-foreground">
                {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full">
                <Heart className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full">
                <MoreHorizontal className="h-5 w-5" />
              </Button>
            </div>

            <div className="rounded-md border">
              <table className="w-full">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th className="text-left p-3 text-xs font-medium text-muted-foreground w-10">#</th>
                    <th className="text-left p-3 text-xs font-medium text-muted-foreground">Title</th>
                    <th className="text-left p-3 text-xs font-medium text-muted-foreground hidden md:table-cell">
                      Album
                    </th>
                    <th className="text-right p-3 text-xs font-medium text-muted-foreground">Duration</th>
                  </tr>
                </thead>
                <tbody>
                  {songs.map((song, i) => (
                    <tr key={i} className={cn(i !== songs.length - 1 ? "border-b" : "", i === 1 ? "bg-accent/50" : "")}>
                      <td className="p-3 text-sm">{i + 1}</td>
                      <td className="p-3">
                        <div className="flex items-center gap-3">
                          <img src={song.cover || "/placeholder.svg"} alt={song.title} className="h-10 w-10 rounded" />
                          <div>
                            <p className="font-medium">{song.title}</p>
                            <p className="text-sm text-muted-foreground">{song.artist}</p>
                          </div>
                        </div>
                      </td>
                      <td className="p-3 hidden md:table-cell text-sm text-muted-foreground">{song.album}</td>
                      <td className="p-3 text-right text-sm text-muted-foreground">{song.duration}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* Player Controls */}
      <div className={cn("border-t p-4", materialClass)}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 w-1/4">
            <img src="/placeholder.svg?key=661in" alt="Now playing" className="h-12 w-12 rounded" />
            <div className="hidden sm:block">
              <p className="font-medium text-sm">Electric Dreams</p>
              <p className="text-xs text-muted-foreground">Neon Pulse</p>
            </div>
            <Button variant="ghost" size="icon" className="hidden sm:flex">
              <Heart className="h-4 w-4" />
            </Button>
          </div>

          <div className="flex flex-col items-center w-2/4">
            <div className="flex items-center gap-2 mb-1">
              <Button variant="ghost" size="icon" className="hidden sm:flex">
                <Shuffle className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon">
                <SkipBack className="h-4 w-4" />
              </Button>
              <Button size="icon" className="rounded-full h-8 w-8 bg-foreground text-background">
                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
              </Button>
              <Button variant="ghost" size="icon">
                <SkipForward className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon" className="hidden sm:flex">
                <Repeat className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex items-center gap-2 w-full">
              <span className="text-xs text-muted-foreground">2:15</span>
              <Slider defaultValue={[52]} max={100} step={1} className="flex-1" />
              <span className="text-xs text-muted-foreground">4:20</span>
            </div>
          </div>

          <div className="flex items-center justify-end gap-2 w-1/4">
            <Button variant="ghost" size="icon" className="hidden sm:flex">
              <ListMusic className="h-4 w-4" />
            </Button>
            <div className="hidden sm:flex items-center gap-2">
              <Volume2 className="h-4 w-4 text-muted-foreground" />
              <Slider defaultValue={[80]} max={100} step={1} className="w-24" />
            </div>
            <Button variant="ghost" size="icon" className="hidden sm:flex">
              <Maximize2 className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}