import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { TableCell, TableRow } from '@/components/ui/table'
import type { Playlist } from '@/lib/api/services/playlists'
import { formatDuration } from '@/utils/format-duration'
import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'

interface PlaylistRowProps {
  playlist: Playlist
  onEdit: (playlist: Playlist) => void
  onSetCurrent: (playlist: Playlist) => void
}

export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString()
  }

  return (
    <TableRow className="hover:bg-muted/50">
      <TableCell>
        <div className="flex items-center gap-2">
          <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
          <div className="min-w-0">
            <div className="font-medium truncate">{playlist.name}</div>
            {playlist.description && (
              <div className="text-sm text-muted-foreground truncate">
                {playlist.description}
              </div>
            )}
          </div>
        </div>
      </TableCell>
      <TableCell>
        {playlist.genre ? (
          <Badge variant="secondary">{playlist.genre}</Badge>
        ) : (
          <span className="text-muted-foreground">-</span>
        )}
      </TableCell>
      <TableCell>
        {playlist.user_name ? (
          <div className="flex items-center gap-2">
            <User className="h-4 w-4 text-muted-foreground" />
            <span>{playlist.user_name}</span>
          </div>
        ) : (
          <span className="text-muted-foreground">System</span>
        )}
      </TableCell>
      <TableCell className="text-center">
        <div className="flex items-center justify-center gap-1">
          <Music className="h-3 w-3 text-muted-foreground" />
          {playlist.sound_count}
        </div>
      </TableCell>
      <TableCell className="text-center">
        <div className="flex items-center justify-center gap-1">
          <Clock className="h-3 w-3 text-muted-foreground" />
          {formatDuration(playlist.total_duration || 0)}
        </div>
      </TableCell>
      <TableCell className="text-center">
        <div className="flex items-center justify-center gap-1">
          <Calendar className="h-3 w-3 text-muted-foreground" />
          {formatDate(playlist.created_at)}
        </div>
      </TableCell>
      <TableCell className="text-center">
        <div className="flex items-center justify-center gap-1">
          {playlist.is_current && <Badge variant="default">Current</Badge>}
          {playlist.is_main && <Badge variant="outline">Main</Badge>}
          {!playlist.is_current && !playlist.is_main && (
            <span className="text-muted-foreground">-</span>
          )}
        </div>
      </TableCell>
      <TableCell className="text-center">
        <div className="flex items-center justify-center gap-1">
          <Button
            size="sm"
            variant="ghost"
            onClick={() => onEdit(playlist)}
            className="h-8 w-8 p-0"
            title={`Edit "${playlist.name}"`}
          >
            <Edit className="h-4 w-4" />
          </Button>
          {!playlist.is_current && (
            <Button
              size="sm"
              variant="ghost"
              onClick={() => onSetCurrent(playlist)}
              className="h-8 w-8 p-0"
              title={`Set "${playlist.name}" as current playlist`}
            >
              <Play className="h-4 w-4" />
            </Button>
          )}
        </div>
      </TableCell>
    </TableRow>
  )
}